From OS OpenData developer wiki

Contents 1 How to contribute examples? 2 Basic Map Examples 2.1 Basic Map 2.2 Basic place name search 2.3 Basic Map - with Vector Map District 3 Markers 3.1 Add a marker 3.2 Add a custom marker 3.3 Add text, links and images to marker 3.4 Add two markers etc 3.5 Add lots of markers from file 3.6 Add lots of markers from a file with a cluster control 3.7 Create a polyline 3.8 Create a polygon 4 Boundaries 4.1 Display an administrative boundary 4.2 Display two or more boundaries 4.3 Creating Thematic Boundaries 4.4 Creating a boundary layer with hover control 4.5 Create a boundary layer that shows name of boundary 4.6 Postcode search for Westminster Constituency boundaries 5 Overlays 5.1 Coordinate overlay 5.2 Add a.gpx (GPS route) file 5.3 Add overview window to map 5.4 Basic Map Overlay 6 OS OpenSpace team examples 6.1 Lookups using Census Codes 6.2 Boundary details and property 6.3 Create GPX Mark-up from a simple Route 7 OS OpenSpace User's Contributions 7.1 BigMentor 7.1.1 Showing an Animated Route line 7.1.2 Maps can lie 7.2 BillChadwick 7.2.1 Grid Reference from Eastings & Northings 7.2.2 Eastings & Northings from Grid Reference 7.2.3 Terrain Profiles 7.3 Stijn 7.3.1 Html context menu on map click

How to contribute examples?

If you would like us to launch your OpenSpace examples, send the javascript code in a text file to us at OpenSpace Examples.

• osmap <div> should be max width: 600px; height: 400px.
• Add a description of the example in your email.
• Associated files i.e. csv, png, jpg, gpx, xml can be provided.
• No external links in examples please.
• If you want to add a link to your website, please use the Application Gallery section on the OpenSpace forum.

Basic Map Examples

Basic Map

Basic place name search

Basic Map - with Vector Map District

Markers

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.

Add a custom marker

new Add your own marker style.

Add text, links and images to marker

Add your own content to markers.

Add two markers etc

Adding more markers. In this case two markers.

Add lots of markers from file

Add lots of markers to a map from a .txt file. An example text file is attached. Use eastings, northings, pop up window text.

Add lots of markers from a file with a cluster control

Same as above but manages the markers by clustering them.

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.

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.

Boundaries

Display an administrative boundary

This allows you to display a single boundary or many boundaries.

Display two or more boundaries

new This example show three District Ward Boundaries. By changing the AREA_TYPE in the code and inserting the ADMIN_UNIT_ID of the area type, you can select multiple boundaries of the same type. To get the admin unit id's you will need to look in the lookup table.

Creating Thematic Boundaries

A very useful application of boundary data is to use them to create thematic maps, based upon some external data for example income per ward. Although, this example uses some simple fictictious values, the principles can be applied to real data. The data needs to be held in .csv format and uses a primary key (ADMIN_UNIT_ID) to link to the boundaries.

Creating a boundary layer with hover control

Create a boundary layer that shows name of boundary

Postcode search for Westminster Constituency boundaries

Overlays

Coordinate overlay

Overlay the coordinates of the cursor on the map.

Add a.gpx (GPS route) file

new Overlay a .gpx file. In this example the file is called gpxroute.gpx, so just replace it with your own route file.

Add overview window to map

Allows you to add an overview window on the map. Users can drag around the hashed box in the window to pan the map over larger distances.

Basic Map Overlay

Overlay the map with an image file tied to the map.

OS OpenSpace team examples

Select example to get code. Help yourself!

Lookups using Census Codes

Boundary details and property

I’ve been likurng around here for awhile and just wanted to say I enjoy this site. Keep it up.

Create GPX Mark-up from a simple Route

Please note that this example does use up a lot of CPU

The GML file in this code is called gb_outline.gml

OS OpenSpace User's Contributions

BigMentor

Showing an Animated Route line

Shows data collected from GPX Data Loggers and Route Finders

Maps can lie

Shows how maps can be adulterated - SO BEWARE !!!

BillChadwick

Grid Reference from Eastings & Northings

Use the code snippet linked to by this title to make an OS grid reference. Use getEasting and getNorthing on a MapPoint to get the values to pass in to this, return is a string.

Eastings & Northings from Grid Reference

Use the routine linked to by this title to make an OpenSpace MapPoint from a grid reference string (1-5 digits). Return is null if the grid reference is not valid.

Terrain Profiles

There are two sources of free Digital Terrain Matrix data for the UK. The SRTM (google for it) 3 arc second or 90m data and the new OS OpenData 50m DTM.

I have loaded both these data sets on to a Google App Engine service. See the page at [1] for a demo of the SRTM service, the identical OS OpenData service is at http://openukterrain.appspot.com rather than http://ukterrain.appspot.com. If any OpenSpace users wan't to use these, or their server side source code, please get in touch. I'm not quite sure yet which is the better data set for estimating hike/bike ascent and descent. The OS data will give slightly higher totals than the SRTM.

Google now offer a similar terrain profile service as part of the Google Maps API though you can only use this if you also use the Google Maps API. I believe Google use SRTM data.

See also this demo [2] which uses SRTM data.

Stijn

Html context menu on map click

Combining handling of mouse events and overlays, we display a fancy html context menu that appears when the user clicks on the map. The possibilities to use this in interactive applications are endless.