Tutorial Three
From OS OpenData developer wiki
Contents |
Displaying a line on a map
How do we add a line to the map? We are going to build on Example 1. In fact, in example 1 we created an HTML document with all the appropriate tags and included a DIV tag which gave instructions on how to display the map. The heavy lifting is all done within the javascript section (between the <script>…</script> tags). The instructions in this document will deal with this core of the code. Essentially we will be replacing the content of Example 1’s script tags, with the following:
<source lang="html4strict" enclose="pre" highlight="5"> <script type="text/javascript"> var osMap; function init() { // Creates the map centered on OSHQ osMap = new OpenSpace.Map('map'); osMap.setCenter(new OpenSpace.MapPoint(438760, 114760), 8); var vectorLayer = new OpenLayers.Layer.Vector("Vector Layer"); osMap.addLayer(vectorLayer); /*
- Define the line style
- /
var style_green = { strokeColor: "#00FF00", strokeOpacity: 0.7, strokeWidth: 6 }; // Define the line var p1 = new OpenLayers.Geometry.Point(438770, 114846); var p2 = new OpenLayers.Geometry.Point(438816, 114874); var p3 = new OpenLayers.Geometry.Point(438892, 114740); var p4 = new OpenLayers.Geometry.Point(438898, 114810); var p5 = new OpenLayers.Geometry.Point(439098, 115030); var p6 = new OpenLayers.Geometry.Point(439184, 115012); var p7 = new OpenLayers.Geometry.Point(439310, 115090); var p8 = new OpenLayers.Geometry.Point(439398, 115068); var p9 = new OpenLayers.Geometry.Point(439796, 115160); var p10 = new OpenLayers.Geometry.Point(439882, 115206); var p11 = new OpenLayers.Geometry.Point(439950, 115158); var p12 = new OpenLayers.Geometry.Point(439870, 115048); var points = []; points.push(p1); points.push(p2); points.push(p3); points.push(p4); points.push(p5); points.push(p6); points.push(p7); points.push(p8); points.push(p9); points.push(p10); points.push(p11); points.push(p12); // create a line feature from a list of points var lineString = new OpenLayers.Geometry.LineString(points); var lineFeature = new OpenLayers.Feature.Vector(lineString, null, style_green); vectorLayer.addFeatures([lineFeature]); } </script> </source>
Let's break this up:
We start a script tag to contain our code:
<source lang="html4strict" enclose="pre" highlight="5"> <script type="text/javascript"> </source>
Then we create a map object variable, osMap and a vectorlayer object variable:
<source lang="html4strict" enclose="pre" highlight="5"> var osMap, vectorLayer; </source>
Now we define our init function:
<source lang="html4strict" enclose="pre" highlight="5"> function init() { </source>
Create a new OS OpenSpace map object and pass it our 'map' element id. This is the HTML div that will hold the map.
<source lang="html4strict" enclose="pre" highlight="5"> osMap = new OpenSpace.Map('map'); </source>
We now set the centre of the map above Ordnance Survey head office:
<source lang="html4strict" enclose="pre" highlight="5"> osMap.setCenter(new OpenSpace.MapPoint(438760, 114760), 8); </source>
Add a vector layer to the map:
<source lang="html4strict" enclose="pre" highlight="5"> var vectorLayer = new OpenLayers.Layer.Vector("Vector Layer"); osMap.addLayer(vectorLayer); </source>
Create an array to hold the line point coordinates:
<source lang="html4strict" enclose="pre" highlight="5"> var points = []; </source>
Define our particular line styling, including width and colour of the line:
<source lang="html4strict" enclose="pre" highlight="5"> var style_green = { strokeColor: "#00FF00", strokeOpacity: 0.7, strokeWidth: 6 }; </source>
This defines the line manually from a list of points:
<source lang="html4strict" enclose="pre" highlight="5"> // Define the line var p1 = new OpenLayers.Geometry.Point(438770, 114846); var p2 = new OpenLayers.Geometry.Point(438816, 114874); var p3 = new OpenLayers.Geometry.Point(438892, 114740); var p4 = new OpenLayers.Geometry.Point(438898, 114810); var p5 = new OpenLayers.Geometry.Point(439098, 115030); var p6 = new OpenLayers.Geometry.Point(439184, 115012); var p7 = new OpenLayers.Geometry.Point(439310, 115090); var p8 = new OpenLayers.Geometry.Point(439398, 115068); var p9 = new OpenLayers.Geometry.Point(439796, 115160); var p10 = new OpenLayers.Geometry.Point(439882, 115206); var p11 = new OpenLayers.Geometry.Point(439950, 115158); var p12 = new OpenLayers.Geometry.Point(439870, 115048); var points = []; points.push(p1); points.push(p2); points.push(p3); points.push(p4); points.push(p5); points.push(p6); points.push(p7); points.push(p8); points.push(p9); points.push(p10); points.push(p11); points.push(p12); </source>
Create the line feature from the array of points:
<source lang="html4strict" enclose="pre" highlight="5"> var lineString = new OpenLayers.Geometry.LineString(points); var lineFeature = new OpenLayers.Feature.Vector(lineString, null, style_green); </source>
Finally, we add the line feature to the vector layer, and close both the function and the script tag.
<source lang="html4strict" enclose="pre" highlight="5"> vectorLayer.addFeatures([lineFeature]); } </script> </source>
The full example can be found below:
<source lang="html4strict" enclose="pre" highlight="5"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Open Space Tutorial - Example 3</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, vectorLayer; function init() { // Creates the map centered on OSHQ osMap = new OpenSpace.Map('map'); osMap.setCenter(new OpenSpace.MapPoint(438760, 114760), 8); var vectorLayer = new OpenLayers.Layer.Vector("Vector Layer"); osMap.addLayer(vectorLayer); var points = []; /*
- Define the line style
- /
var style_green = { strokeColor: "#00FF00", strokeOpacity: 0.7, strokeWidth: 6, pointRadius: 6, pointerEvents: "visiblePainted" }; // Define the line var p1 = new OpenLayers.Geometry.Point(438770, 114846); var p2 = new OpenLayers.Geometry.Point(438816, 114874); var p3 = new OpenLayers.Geometry.Point(438892, 114740); var p4 = new OpenLayers.Geometry.Point(438898, 114810); var p5 = new OpenLayers.Geometry.Point(439098, 115030); var p6 = new OpenLayers.Geometry.Point(439184, 115012); var p7 = new OpenLayers.Geometry.Point(439310, 115090); var p8 = new OpenLayers.Geometry.Point(439398, 115068); var p9 = new OpenLayers.Geometry.Point(439796, 115160); var p10 = new OpenLayers.Geometry.Point(439882, 115206); var p11 = new OpenLayers.Geometry.Point(439950, 115158); var p12 = new OpenLayers.Geometry.Point(439870, 115048); var points = []; points.push(p1); points.push(p2); points.push(p3); points.push(p4); points.push(p5); points.push(p6); points.push(p7); points.push(p8); points.push(p9); points.push(p10); points.push(p11); points.push(p12); ///create a polyline feature from points var lineString = new OpenLayers.Geometry.LineString(points); var lineFeature = new OpenLayers.Feature.Vector(lineString, null, style_green); vectorLayer.addFeatures([lineFeature]); } </script> </head> <body onload="init();">
Displaying a line on a map
</body> </html> </source>
