Jump to the following:

OS OpenSpace [logo]

Linking routes to markers and waypoints

OS OpenSpace map displaying routes, markers and waypoints

Routes on a map are constructed from lines but in addition it may be useful to link them to markers or waypoints as they are used here. In order that routes lines re-align as each waypoint is dragged it is necessary to implement the appropriate functionality.

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: 600px; height: 500px; 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, linesLayer, lineString, lineFeature, markersLayer, pointVal;
  2. var style_green; var points = new Array();

The "init" function is called as described above:

  1. function init()
  2.  {

An OpenSpace map is generated:

  1. osMap = new OpenSpace.Map('map');
  2.   osMap.setCenter(new OpenSpace.MapPoint(439400, 376600), 7);

Create a vector layer to hold the route lines:

  1. style_green = {strokeColor: "#00FF00", strokeOpacity: 1, strokeWidth: 6};
  2.   linesLayer = new OpenLayers.Layer.Vector("Lines Layer");
  3.   osMap.addLayer(linesLayer);

Next create an icon for waypoints. This can be any image that you choose but the one specified here will get you started in this example:

  1. var size = new OpenLayers.Size(17, 17);
  2.   var offset = new OpenLayers.Pixel(-16, -37);
  3.   var icon = new OpenSpace.Icon('http://openspace.ordnancesurvey.co.uk/osmapapi/img/OS/images/markers/
  4. /misc/round-marker1.png', size, null, this.calculateOffset);

We then create the waypoint markers for our route:

  1. osMap.createMarker(new OpenSpace.MapPoint(438415.43, 378206.33));
  2.   osMap.createMarker(new OpenSpace.MapPoint(438714.13, 377564.7), icon);
  3.   var iconClone = icon.clone();
  4.   osMap.createMarker(new OpenSpace.MapPoint(438260.56, 376458.43), iconClone);
  5.   var iconClone = icon.clone();
  6.   osMap.createMarker(new OpenSpace.MapPoint(438105.68, 375540.23), iconClone);
  7.   var iconClone = icon.clone();
  8.   osMap.createMarker(new OpenSpace.MapPoint(439599.14, 375462.79), iconClone);
  9.   var iconClone = icon.clone();
  10.   osMap.createMarker(new OpenSpace.MapPoint(439853.58, 376380.99), iconClone);
  11.   osMap.createMarker(new OpenSpace.MapPoint(440738.6, 377221.76));

The route lines are constructed from points that correspond to the markers as defined above. These are pushed into our global array variable, as declared at the top of the code:

  1. points.push(new OpenLayers.Geometry.Point(438415.43, 378206.33));
  2.   points.push(new OpenLayers.Geometry.Point(438714.13, 377564.7));
  3.   points.push(new OpenLayers.Geometry.Point(438260.56, 376458.43));
  4.   points.push(new OpenLayers.Geometry.Point(438105.68, 375540.23));
  5.   points.push(new OpenLayers.Geometry.Point(439599.14, 375462.79));
  6.   points.push(new OpenLayers.Geometry.Point(439853.58, 376380.99));
  7.   points.push(new OpenLayers.Geometry.Point(440738.6, 377221.76));

Generate a polyline geometry, from the points:

  1. lineString = new OpenLayers.Geometry.LineString(points);

Create a feature with a line style, as previously defined:

  1. lineFeature = new OpenLayers.Feature.Vector(lineString, null, style_green);

Add it to our vector layer:

  1. linesLayer.addFeatures([lineFeature]);

We get a reference to the default markers layer, where all our markers have been placed:

  1. markersLayer = osMap.getMarkerLayer();

Set up the options for the control that drags markers. We need to know about the three stages of the dragging process. Firstly, we need to know about the start (onStart) - We grab the coordinates of a marker at the start of its drag. Then whilst it is being dragged(onDrag) - Move the route lines with the marker. Finally, when the dragging is complete(onComplete) - Move the line to the final marker position.

  1. var options = {onStart: getMarker, onDrag: moveLines, onComplete: moveLines};

Add a drag control to the map, with the above options:

  1. dragControl = new OpenSpace.Control.DragMarkers(markersLayer, options);
  2.   osMap.addControl(dragControl);
  3.   dragControl.activate();
  4.  }

At the start of a drag we find the point in the collection of points that corresponds to our marker position:

  1. function getMarker(feature){
  2.  for (var i = 0; i < points.length; i++){
  3.        if (feature.lonlat.lon == points[i].x && feature.lonlat.lat == points[i].y){
  4.        pointVal = i;
  5.     }
  6.     }
  7.  }

The position of the marker is passed to this function, during and on completion of the drag process:

  1. function moveLines(feature){

Make sure that there is a feature passed to this function:

  1. if (feature == null){
  2.      return;
  3.  }

Change the point in the points array to the same coordinates as those of the feature. ‘PointVal’ is the position in the array which we found at the start of the drag:

  1. points.splice(pointVal, 1, (new OpenLayers.Geometry.Point(feature.lonlat.lon, feature.lonlat.lat)));

Finally, we remove our route line and add a new one, based on the revised set of points:

  1. linesLayer.removeFeatures([lineFeature]);
  2.  lineString = new OpenLayers.Geometry.LineString(points);
  3.     lineFeature = new OpenLayers.Feature.Vector(lineString, null, style_green);
  4.  linesLayer.addFeatures([lineFeature]);
  5.  }

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>move lines</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, linesLayer, lineString, lineFeature, markersLayer, pointVal;
var style_green; var points = new Array();
 function init()
 {
  osMap = new OpenSpace.Map('map');
  osMap.setCenter(new OpenSpace.MapPoint(439400, 376600), 7);
  style_green = {strokeColor: "#00FF00", strokeOpacity: 1, strokeWidth: 6};
  linesLayer = new OpenLayers.Layer.Vector("Lines Layer");
  osMap.addLayer(linesLayer);
  var size = new OpenLayers.Size(17, 17);
  var offset = new OpenLayers.Pixel(-16, -37);
  var icon = new OpenSpace.Icon('http://openspace.ordnancesurvey.co.uk/osmapapi/img/OS/images/markers/
/misc/round-marker1.png', size, null, this.calculateOffset);
  osMap.createMarker(new OpenSpace.MapPoint(438415.43, 378206.33));
  osMap.createMarker(new OpenSpace.MapPoint(438714.13, 377564.7), icon);
  var iconClone = icon.clone();
  osMap.createMarker(new OpenSpace.MapPoint(438260.56, 376458.43), iconClone);
  var iconClone = icon.clone();
  osMap.createMarker(new OpenSpace.MapPoint(438105.68, 375540.23), iconClone);
  var iconClone = icon.clone();
  osMap.createMarker(new OpenSpace.MapPoint(439599.14, 375462.79), iconClone);
  var iconClone = icon.clone();
  osMap.createMarker(new OpenSpace.MapPoint(439853.58, 376380.99), iconClone);
  osMap.createMarker(new OpenSpace.MapPoint(440738.6, 377221.76));
  points.push(new OpenLayers.Geometry.Point(438415.43, 378206.33));
  points.push(new OpenLayers.Geometry.Point(438714.13, 377564.7));
  points.push(new OpenLayers.Geometry.Point(438260.56, 376458.43));
  points.push(new OpenLayers.Geometry.Point(438105.68, 375540.23));
  points.push(new OpenLayers.Geometry.Point(439599.14, 375462.79));
  points.push(new OpenLayers.Geometry.Point(439853.58, 376380.99));
  points.push(new OpenLayers.Geometry.Point(440738.6, 377221.76));
  lineString = new OpenLayers.Geometry.LineString(points);
  lineFeature = new OpenLayers.Feature.Vector(lineString, null, style_green);
  linesLayer.addFeatures([lineFeature]);
  markersLayer = osMap.getMarkerLayer();
  var options = {onStart: getMarker, onDrag: moveLines, onComplete: moveLines};
  dragControl = new OpenSpace.Control.DragMarkers(markersLayer, options);
  osMap.addControl(dragControl);
  dragControl.activate();
 }
 function getMarker(feature){
 for (var i = 0; i < points.length; i++){
       if (feature.lonlat.lon == points[i].x && feature.lonlat.lat == points[i].y){
       pointVal = i;
    }
    }
 }
 function moveLines(feature){
 if (feature == null){
     return;
 }
points.splice(pointVal, 1, (new OpenLayers.Geometry.Point(feature.lonlat.lon, feature.lonlat.lat)));
linesLayer.removeFeatures([lineFeature]);
lineString = new OpenLayers.Geometry.LineString(points);
lineFeature = new OpenLayers.Feature.Vector(lineString, null, style_green);
linesLayer.addFeatures([lineFeature]);
 }
</script></head><body onload="init()">
<div id="map" style="width: 600px; height: 500px; border: 1px solid black;"></div>
</body></html>