Jump to the following:

OS OpenSpace [logo]

Cluster, drag, and add markers

OS OpenSpace map displaying markers

How do we cluster, drag, and add markers as necessary. First, we need to tell the browser to pull in the OS OpenSpace API:

  1. <script type="text/javascript" src="http://openspace.ordnancesurvey.co.uk/osmapapi/openspace.js?key=insert_your_api_key_here"></script>

Next, in the body, we need to tell JavaScript to run our initialisation function on loading the page:

  1. <body unload="init();">

Next we need to add a map div element; this is the HTML element that will contain the map:

  1. <div id="map" style="width: 750px; height: 420px; border: 1px solid black;"></div>

Now we move on to the core of the code, actually instantiating and adding the map:

First we declare our global variables:

  1. var osMap, markersLayer, clusterControl, dragControl;

The map, markers, and controls are initiated:

  1. function init()
  2.  {

An OpenSpace map is created and cantered as appropriate:

  1. osMap = new OpenSpace.Map('map');
  2. osMap.setCenter(new OpenSpace.MapPoint(300000, 200000), 1);

Some markers are created markers on the map:

  1. osMap.createMarker(new OpenSpace.MapPoint(20000, 15000));
  2.     osMap.createMarker(new OpenSpace.MapPoint(43000, 26000));
  3.     osMap.createMarker(new OpenSpace.MapPoint(30000, 17000));
  4.     osMap.createMarker(new OpenSpace.MapPoint(31000, 22000));
  5.     osMap.createMarker(new OpenSpace.MapPoint(34000, 22000));
  6.     osMap.createMarker(new OpenSpace.MapPoint(100000, 25200));
  7.     osMap.createMarker(new OpenSpace.MapPoint(314758.86,391221.15));
  8.     osMap.createMarker(new OpenSpace.MapPoint(432833.86,384671.15));
  9.     osMap.createMarker(new OpenSpace.MapPoint(434283.86,385096.15));
  10.     osMap.createMarker(new OpenSpace.MapPoint(445108.86,392871.15));
  11.     osMap.createMarker(new OpenSpace.MapPoint(435733.00,387546.15));
  12.     osMap.createMarker(new OpenSpace.MapPoint(345908.4,352278.3));
  13.     osMap.createMarker(new OpenSpace.MapPoint(341084.58,345753.78));
  14.     osMap.createMarker(new OpenSpace.MapPoint(345815.63,341672.08));
  15.     osMap.createMarker(new OpenSpace.MapPoint(361214.73,339662.15));
  16.     osMap.createMarker(new OpenSpace.MapPoint(361091.05,351072.35));
  17.     osMap.createMarker(new OpenSpace.MapPoint(411091.56,423460.42));
  18.     osMap.createMarker(new OpenSpace.MapPoint(356669.14,251782.05));
  19.     osMap.createMarker(new OpenSpace.MapPoint(288393.71,236939.5));
  20.     osMap.createMarker(new OpenSpace.MapPoint(297793.87,292846.37));
  21.     osMap.createMarker(new OpenSpace.MapPoint(302741.43,296804.36));
  22.     osMap.createMarker(new OpenSpace.MapPoint(300762.35,284435.58));
  23.     osMap.createMarker(new OpenSpace.MapPoint(293835.97,297299.1));
  24.     osMap.createMarker(new OpenSpace.MapPoint(411586.61,171137.65));
  25.     osMap.createMarker(new OpenSpace.MapPoint(364585.28,146894.85));
  26.     osMap.createMarker(new OpenSpace.MapPoint(351721.66,231002.52));
  27.     osMap.createMarker(new OpenSpace.MapPoint(406144.34,231991.99));
  28.     osMap.createMarker(new OpenSpace.MapPoint(333416.04,220117.95));
  29.     osMap.createMarker(new OpenSpace.MapPoint(334900.16,225065.49));
  30.     osMap.createMarker(new OpenSpace.MapPoint(340837.13,222591.72));
  31.     osMap.createMarker(new OpenSpace.MapPoint(336384.53,221602.25));
  32.     osMap.createMarker(new OpenSpace.MapPoint(416534.18,341331.89));
  33.     osMap.createMarker(new OpenSpace.MapPoint(426429.04,323026.09));
  34.     osMap.createMarker(new OpenSpace.MapPoint(600000,100000));
  35.     osMap.createMarker(new OpenSpace.MapPoint(609000,115000)); }

We then set up a control to replace clusters of markers with a cluster marker, indicating the number of markers that it represents

  1. clusterControl = new OpenSpace.Control.ClusterManager();
  2.     osMap.addControl(clusterControl);
  3.     clusterControl.activate();

We create a reference to the default markers layer:

  1. markersLayer = osMap.getMarkerLayer();

We then set up a dragging control that is activated and deactivated by the appropriate buttons:

  1. dragControl = new OpenSpace.Control.DragMarkers(markersLayer);
  2.     osMap.addControl(dragControl);

If we want to add another marker to the clustering process we need to do the following:

Deactivate the current clustering control:

  1. clusterControl.deactivate();

Add our new marker:

  1. osMap.createMarker(new OpenSpace.MapPoint(437300,113300));

Finally, create a new clustering control:

  1. clusterControl = new OpenSpace.Control.ClusterManager();
  2.     osMap.addControl(clusterControl);
  3.     clusterControl.activate();
  4.  }

We activate the dragging functionality, but also override any info windows that would normally appear on a mouse-down event on the marker:

  1. function dragStart()
  2.  {
  3.   dragControl.activate();
  4.   markersLayer.setDragMode(true);
  5.  }

To deactivate the dragging process:

  1. function dragStop()
  2.  {
  3.   markersLayer.setDragMode(false);
  4.   dragControl.deactivate();

run the clustering process, in case any markers have been dragged into a cluster:

  1. osMap.zoomIn(0);
  2.   osMap.zoomOut(0);
  3.  }

The full code is shown below:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head>
<title>OpenSpace Tutorial - Example 15</title><script type="text/javascript" src="http://openspace.ordnancesurvey.co.uk/osmapapi/openspace.js?key=insert_your_api_key_here"></script>
<script type="text/javascript">
 var osMap, markersLayer, clusterControl, dragControl;
 function init(){
    osMap = new OpenSpace.Map('map');
    osMap.setCenter(new OpenSpace.MapPoint(300000, 200000), 1);
    osMap.createMarker(new OpenSpace.MapPoint(20000, 15000));
    osMap.createMarker(new OpenSpace.MapPoint(43000, 26000));
    osMap.createMarker(new OpenSpace.MapPoint(30000, 17000));
    osMap.createMarker(new OpenSpace.MapPoint(31000, 22000));
    osMap.createMarker(new OpenSpace.MapPoint(34000, 22000));
    osMap.createMarker(new OpenSpace.MapPoint(100000, 25200));
    osMap.createMarker(new OpenSpace.MapPoint(314758.86,391221.15));
    osMap.createMarker(new OpenSpace.MapPoint(432833.86,384671.15));
    osMap.createMarker(new OpenSpace.MapPoint(434283.86,385096.15));
    osMap.createMarker(new OpenSpace.MapPoint(445108.86,392871.15));
    osMap.createMarker(new OpenSpace.MapPoint(435733.00,387546.15));
    osMap.createMarker(new OpenSpace.MapPoint(345908.4,352278.3));
    osMap.createMarker(new OpenSpace.MapPoint(341084.58,345753.78));
    osMap.createMarker(new OpenSpace.MapPoint(345815.63,341672.08));
    osMap.createMarker(new OpenSpace.MapPoint(361214.73,339662.15));
    osMap.createMarker(new OpenSpace.MapPoint(361091.05,351072.35));
    osMap.createMarker(new OpenSpace.MapPoint(411091.56,423460.42));
    osMap.createMarker(new OpenSpace.MapPoint(356669.14,251782.05));
    osMap.createMarker(new OpenSpace.MapPoint(288393.71,236939.5));
    osMap.createMarker(new OpenSpace.MapPoint(297793.87,292846.37));
    osMap.createMarker(new OpenSpace.MapPoint(302741.43,296804.36));
    osMap.createMarker(new OpenSpace.MapPoint(300762.35,284435.58));
    osMap.createMarker(new OpenSpace.MapPoint(293835.97,297299.1));
    osMap.createMarker(new OpenSpace.MapPoint(411586.61,171137.65));
    osMap.createMarker(new OpenSpace.MapPoint(364585.28,146894.85));
    osMap.createMarker(new OpenSpace.MapPoint(351721.66,231002.52));
    osMap.createMarker(new OpenSpace.MapPoint(406144.34,231991.99));
    osMap.createMarker(new OpenSpace.MapPoint(333416.04,220117.95));
    osMap.createMarker(new OpenSpace.MapPoint(334900.16,225065.49));
    osMap.createMarker(new OpenSpace.MapPoint(340837.13,222591.72));
    osMap.createMarker(new OpenSpace.MapPoint(336384.53,221602.25));
    osMap.createMarker(new OpenSpace.MapPoint(416534.18,341331.89));
    osMap.createMarker(new OpenSpace.MapPoint(426429.04,323026.09));
    osMap.createMarker(new OpenSpace.MapPoint(600000,100000));
    osMap.createMarker(new OpenSpace.MapPoint(609000,115000));
    clusterControl = new OpenSpace.Control.ClusterManager();
    osMap.addControl(clusterControl);
    clusterControl.activate();
    markersLayer = osMap.getMarkerLayer();
    dragControl = new OpenSpace.Control.DragMarkers(markersLayer);
    osMap.addControl(dragControl);
    clusterControl.deactivate();
    osMap.createMarker(new OpenSpace.MapPoint(437300,113300));
    clusterControl = new OpenSpace.Control.ClusterManager();
    osMap.addControl(clusterControl);
    clusterControl.activate();
 }
 function dragStart()
 {
  dragControl.activate();
  markersLayer.setDragMode(true);
 }
  function dragStop()
 {
  markersLayer.setDragMode(false);
  dragControl.deactivate();
  osMap.zoomIn(0);
  osMap.zoomOut(0);
 }
</script>
</head><body onload="init()">
<form name="form1" method="post" action="">
  <input type="button" name="Submit2" onClick="dragStart()" return="false" value="start drag markers">
  <input type="button" name="Button" onClick="dragStop()" return="false" value="stop drag markers">
</form>
<div id="map" style="width: 750px; height: 420px; border: 1px solid black;"></div>
</body></html>