Need some help?

• Basic Map
• Add a marker
• Create a polyline
• Create a polygon
• Do a gazetteer search
• Do a postcode search
• Display cursor location
• Display an administrative boundary
• Change the colour of the administrative boundary
• Show ward boundaries

End User Licence Agreement for OS Openspace Example Application.

Basic Map:

To help you get going, this code adds a basic map. It's possible to change the map size, centre coordinate position and zoom level in the code. The extent that you can pan around the map has been restricted in this example.

Code snippet:

1. //first we restrict the extent that you can pan around the map
2. var options = {restrictedExtent: new OpenSpace.MapBounds(390500, 362700, 472600, 413500)};
3. //the osMap variable refers to a div element whose size we have set in the html body
4. osMap = new OpenSpace.Map('map', options);
5. //set centre of map and zoom level
6. osMap.setCenter(new OpenSpace.MapPoint(430218.5, 383541.8), 5);

Add a marker:

You can use a marker to pinpoint a location on the map. The marker can be opened to show images or text. Many markers can be added to a map. Click on the marker in this example.

Code snippet:

1. //specify the location where the marker will be displayed on the map
2. pos = new OpenSpace.MapPoint(432833.86, 384671.15);
3. //specify the html content for the popup and its size
4. var content = 'Info window contents can be in <strong>HTML</strong><br />And can
5. contain links:<br /> <a href="index.html">Back to Index</a><br />And images:<br><img src=\"openspace-logo.jpg\" width=\"120\" height=\"32\" />';
6. var popUpSize = new OpenLayers.Size(300, 200)
7. //add the marker to the map - null means no custom icon
8. var marker = osMap.createMarker(pos, null, content, popUpSize );

Create a polyline:

You can show routes on the map by inserting waypoint coordinates within the code. A waypoint is usually where the route changes direction.

Code snippet:

1. //initialise our vector layer variable
2. vectorLayer = new OpenLayers.Layer.Vector("Vector Layer");
4. //define the line style
5. var style_green = {strokeColor: "#00FF00", strokeOpacity: 1, strokeWidth: 6};
7. //push points into array variable(named 'points')
8. points.push(new OpenLayers.Geometry.Point(430170.54, 387588.11));
9. points.push(new OpenLayers.Geometry.Point(427951.11, 386890.58));
10. points.push(new OpenLayers.Geometry.Point(425034.14, 387841.77));
11. points.push(new OpenLayers.Geometry.Point(423512.24, 388285.65));
12. points.push(new OpenLayers.Geometry.Point(420278.22, 386700.35));
13. points.push(new OpenLayers.Geometry.Point(419897.74, 384734.56));
14. points.push(new OpenLayers.Geometry.Point(420722.11, 382515.13));
15. points.push(new OpenLayers.Geometry.Point(422941.54, 381120.05));
16. points.push(new OpenLayers.Geometry.Point(424146.37, 377632.38));
17. points.push(new OpenLayers.Geometry.Point(426746.28, 380485.94));
18. points.push(new OpenLayers.Geometry.Point(428268.18, 380676.17));
19. points.push(new OpenLayers.Geometry.Point(429473.01, 382007.83));
20. points.push(new OpenLayers.Geometry.Point(430868.07, 382261.48));
21. points.push(new OpenLayers.Geometry.Point(432009.5, 383656.55));
22. points.push(new OpenLayers.Geometry.Point(432833.86, 384671.15));
23. //create a polyline feature from the array of points
24. var lineString = new OpenLayers.Geometry.LineString(points);
25. var lineFeature = new OpenLayers.Feature.Vector(lineString, null, style_green);
26. vectorLayer.addFeatures([lineFeature]);
27. //add it to the map
28. osMap.addLayer(vectorLayer);

Create a polygon:

You can create your own polygon to show an area of interest. This is similar to creating a route except that, in addition, the polygon is closed and can be coloured in.

Code snippet:

1. vectorLayer = new OpenLayers.Layer.Vector("Vector Layer");
3. //define our particular line styling, including width and colour of the line:
4.       var style_green =
5.       {
6.         strokeColor: "#000000",
7.   strokeOpacity: 1,
8.   strokeWidth: 2,
9.         fillColor: "#00FF00",
10.         fillOpacity: 0.6
11.       };
13.    //push points into an array variable(named 'points')
14.    points.push(new OpenLayers.Geometry.Point(430170.54, 387588.11));
15.    points.push(new OpenLayers.Geometry.Point(427951.11, 386890.58));
16.    points.push(new OpenLayers.Geometry.Point(425034.14, 387841.77));
17.    points.push(new OpenLayers.Geometry.Point(423512.24, 388285.65));
18.    points.push(new OpenLayers.Geometry.Point(420278.22, 386700.35));
19.    points.push(new OpenLayers.Geometry.Point(419897.74, 384734.56));
20.    points.push(new OpenLayers.Geometry.Point(420722.11, 382515.13));
21.    points.push(new OpenLayers.Geometry.Point(422941.54, 381120.05));
22.    points.push(new OpenLayers.Geometry.Point(424146.37, 377632.38));
23.    points.push(new OpenLayers.Geometry.Point(426746.28, 380485.94));
24.    points.push(new OpenLayers.Geometry.Point(428268.18, 380676.17));
25.    points.push(new OpenLayers.Geometry.Point(429473.01, 382007.83));
26.    points.push(new OpenLayers.Geometry.Point(430868.07, 382261.48));
27.    points.push(new OpenLayers.Geometry.Point(432009.5, 383656.55));
28.    points.push(new OpenLayers.Geometry.Point(432833.86, 384671.15));
30.       //create a polygon feature from the array of points and using the style from above
31.       var linearRing = new OpenLayers.Geometry.LinearRing(points);
32.       var polygonFeature = new OpenLayers.Feature.Vector(linearRing, null, style_green);
33.       vectorLayer.addFeatures([polygonFeature]);
34. //add it to the map
35. osMap.addLayer(vectorLayer);

Do a basic gazetteer search:

The gazetteer has over 250,000 place names and you can add a search box to find towns, villages, and all other names found on the 1:50,000 raster map.

Code snippet:

1. //set-up the gazetteer service
2. var osGaz = new OpenSpace.Gazetteer;
3. /*this can be entered via user input but as an example we will pre-define the name that we are searching for */
4. var placeStr = "Tideswell"
5. //pass any matches of the name to a function(gazOptions)
6. var gazArray = osGaz.getLocations(placeStr, gazOptions)
7.      }
8. function gazOptions(searchVal)
9.  {
10.   //in this case there is only one match so we zoom to it, if there are more we can offer them to the user to select
11.   osMap.setCenter(searchVal[0].location, 7);
12.  }

Do a postcode search:

This allows you to search by full postcode or postcode sector.

Code snippet:

1. //initialise the postcode service into a variable
2. var postcodeService = new OpenSpace.Postcode();
3. //pass our input, in this case 'hard-wired', to a function
4. postcodeService.getLonLat("S9 5NF", onResult);
5. }
7. function onResult(postcodeCentre)
8. {
9. /*if found, a MapPoint is passed into this function and the map is centered on it at
10. zoom level 10 */
11.  osMap.setCenter(postcodeCentre, 10);
12. }

Display cursor location:

To find the coordinates of a place, move the cursor around the map.

Code snippet:

1. /*create a screen overlay called "coords" and position it ten pixels from the right and top of the map window. Add this as a new layer to the map. This layer will then remain at the same position relative to the map window as the map is scrolled underneath.*/
2. screenOverlay = new OpenSpace.Layer.ScreenOverlay("coords");
3. screenOverlay.setPosition(new OpenLayers.Pixel(240, 10));
4. osMap.addLayer(screenOverlay);
5. //we create an object to handle the coordinate transformation.
6. gridProjection = new OpenSpace.GridProjection();
7. //register what to do when the mouse moves over the map
8. osMap.events.register("mousemove", osMap, createCursorPos);
9. //function that is called as a result
10. function createCursorPos(e)
11.  {
12. /*the mouse position (e) is converted into a map position via the OpenLayers function getLonLatFromViewportPx(). This returns a point in the coordinate system of the map base layer, in our case this is British National Grid. We can then transform that point back into longitude/latitude by calling our previously defined convertor function. Finally the details are displayed in the screen overlay
13. by setting the HTML contents. */
14.   pt = osMap.getLonLatFromViewPortPx(e.xy);
15.   lonlat = gridProjection.getLonLatFromMapPoint(pt);
16.   screenOverlay.setHTML("<DIV style=\"width: 150px; height=75px; color: white; background-color: #222; font-size: 20px\">" +
17.   "E: " + pt.lon + "<BR>" + "N: " + pt.lat + "<BR>" + "LON: " + (lonlat.lon).toFixed(4) + "<BR>" + " LAT: " + (lonlat.lat).toFixed(4) + " </DIV>");
18.   osMap.setCenter(osMap.getCenter);
19.  }

Display an administrative boundary:

Code snippet:

1. /*here we set-up the our variable called 'boundaryLayer' with the strategies that we require.
2. In this case, it is its ID and type i.e. Westminster constituency */
3. boundaryLayer = new OpenSpace.Layer.Boundary("Boundaries", {
4. strategies: [new OpenSpace.Strategy.BBOX()],
5. admin_unit_ids: ["24703"],
6. area_code: ["WMC"]
7.    });
8. //then we add the bounadry to the map
9. osMap.addLayer(boundaryLayer);
10. //this effectively refreshes the map, so that the boundary is visible
11. osMap.setCenter(osMap.getCenter());

Change the colour of the administrative boundary:

Data derived from the Boundary-Line&trade product can be styled to create for example thematic maps:

1. Code snippet: //set-up default symboliser
2. var symbolizer = OpenLayers.Util.applyDefaults(
3.       { }, OpenLayers.Feature.Vector.style["default"]);
4. //and a new style map
5. var styleMap = new OpenLayers.StyleMap(symbolizer);
6. //this is our custom styling
7. lookup = {
8.            "WMC":
9.            {fillColor: "red",
10.             fillOpacity: 0.6,
11.             strokeColor: "white",
12.             strokeWidth: 3,
13.             strokeOpacity: 0.7}
14.            };
15. //add rules to the style map
16. styleMap.addUniqueValueRules("default", "AREA_CODE", lookup);
17. //create a new boundary using the above styling and a specific boundary
18. boundaryLayer = new OpenSpace.Layer.Boundary("Boundaries", {
19.      strategies: [new OpenSpace.Strategy.BBOX()],
20.      admin_unit_ids: ["24703"],
21.      area_code: ["WMC"],
22.      styleMap: styleMap });
23. //add boundary to the map and refresh to make visible
24. osMap.addLayer(boundaryLayer);
25. boundaryLayer.refresh();

Show ward boundaries:

Using area codes it is possible to display the boundaries that you require. In this case it is district and metropolitan wards. The style map is optional. Notice how the resolution of the boundaries changes, as you zoom in and out.

Code snippet:

1. //set -up style for the boundaries that we require
2.  var symbolizer = OpenLayers.Util.applyDefaults(
3.       { }, OpenLayers.Feature.Vector.style["default"]);
4.  var styleMap = new OpenLayers.StyleMap(symbolizer);
5.  lookup = {
6.                 "MTW": {fillColor: "green",
7.                  fillOpacity: 0.3,
8.                  strokeColor: "white",
9.                  strokeWidth: 3,
10.                  strokeOpacity: 0.7},
12.       "DIW": {fillColor: "blue",
13.                  fillOpacity: 0.3,
14.                  strokeColor: "white",
15.                  strokeWidth: 3,
16.                  strokeOpacity: 0.7}
18.                };
19. //add rules to our syle map
20. styleMap.addUniqueValueRules("default", "AREA_CODE", lookup);
21. /*request boundaries and add to map - we just want the type of wards that are
22. found in our area of interest */
23. boundaryLayer = new OpenSpace.Layer.Boundary("Boundaries", {
24.      strategies: [new OpenSpace.Strategy.BBOX()],
25.      area_code: ["MTW", "DIW"],
26.      styleMap: styleMap
27.   });
28. osMap.addLayer(boundaryLayer);
29. boundaryLayer.refresh();

• Displaying a marker on the map - pinpoint the surveyor's office.
• Displaying a marker on the map via coordinate translation - pinpoint the surveyor's location by converting latitude and longitude coordinates to British National Grid coordinates.
• Adding HTML to the marker info window - displaying HTML in the marker info window.
• Displaying a line overlay - the route between the surveyor's office and job.
• Displaying a polygon overlay - the surveyor's patch.
• Changing the marker icon - displaying a custom marker icon on the map.
• Displaying the position of the cursor - getting the coordinates of the cursor's position on the map.
• Displaying the map pan zoom control in a different position - putting the pan zoom control on the top right.
• Displaying the small map pan zoom control - putting the small pan zoom control at the top left.
• Using different map options - restricting layers and map area.
• Postcode search - centering a postcode on a map.
• Adding a boundary layer - displaying boundary attributes.
• Selecting boundaries with a hover control - displaying OS OpenSpace boundary attribution.

• What is OpenLayers?
• What version of OpenLayers is used?
• OS OpenSpace API versioning
• How to include the new API version 0.8.0?
• How to include the OS OpenSpace API
• JavaScript namespaces
• How to report a bug
• Debugging
• How can I find the location of a place?
• Can I find the location of a postcode?
• Gazetteer search
• Can I use National Grid References?
• Creating markers and InfoWindow popup custom size
• How to detect daily tile quota exceeded
• How to turn off map centring when markers are clicked
• Downloading custom user data
• Introduction to Ordnance Survey data derived from the Boundary-Line™ product
• What is a boundary feature?
• Which Ordnance Survey data derived from the Boundary-Line™ product is available?
• Are there high level administration relationships in the Ordnance Survey data derived from the Boundary-Line™ products?
• Is there a lookup table of all the boundary features?
• What is the meaning of Ordnance Survey data derived from the Boundary-Line™ product RESOLUTION?
• Is the technology used to build OS OpenSpace available for me to host my own application?
• What is OSGB Web Map tools?
• Are there any restrictions using OSGB Web Map Tools?

OS OpenSpace version 0.7.2

API Fixes:

• Fixed Info window text appearing blurred in Internet Explorer.
• Controls now move when map is resized.
• Fix vector layer to flicker less when panning
• Fix gazetteer search to return farms after towns and villages.
• Fix Screen Overlay to do relative positioning correctly.
• Fix to stop sending the wrong event when the map is being dragged.
• Fix CSS for copyright layer.

OS OpenSpace version 0.6

API Changes:

• There is a new method OpenSpace.SupportService.getTileCount() that an OS OpenSpace developer can call to get information on the number of map tiles downloaded and the tile limit.

API Fixes:

• Added methods to use or return OpenSpace.MapPoint objects from functions:
  • OpenSpace.Layer.WMS.getMapPointFromViewPortPx()
  • OpenSpace.Map.getCenter()
  • OpenSpace.Map.setCenter()
  • OpenSpace.Map.getMapPointFromViewPortPx()
  • OpenSpace.Map.getViewPortPxFromMapPoint()
  • OpenSpace.Map.getMapPointFromPixel()
  • OpenSpace.Map.getPixelFromMapPoint()
  • OpenSpace.Map.getMapPointFromLayerPx()
  • OpenSpace.Map.getLayerPxFromMapPoint()
• Added missing OpenSpace.Icon.clone() method.
• Added missing SRS to OpenSpace.MapPoint.clone() method.