Last week I wrote a quick article about the release of OpenSpace. I have had the opportunity to play around with it and below is a little demo to get you started:
- The first step is to sign-up for your API key – once done you will receive an email and you are ready to go.
- When you receive your API key you will need to call the API, I did this by placing the following code inside the header:
<script type="text/javascript" src="http://openspace.ordnancesurvey.co.uk/osmapapi/openspace.js?key=paste_your_API_key_here">
- Once you have done this you are ready to start constructing your javascript.. You can customise this code but I have created a Javascript function as below:
<script type="text/javascript">
//<![CDATA[
var osMap;
function init() {
//Create a new instance of osMap
//The 'os-map' indicates the name of our div and where it will show
osMap = new OpenSpace.Map('os-map');
//I find it easier to work with Lat/Long so create a lonlat var
var lonlat = new OpenLayers.LonLat(-0.4020 , 54.2798);
//In this case we will put a grid on the map
var gridProjection = new OpenSpace.GridProjection();
//As I want to work around a centralised point I will create a variable for it
//I have passed in the longitude and latitude variable from above
var pos = gridProjection.getMapPointFromLonLat(lonlat);
//Now set the center of the map - using the previous variable
osMap.setCenter(pos, 7);
//Finally add a marker - again using longitude and latitude
var markers = new OpenLayers.Layer.Markers("Markers");
osMap.addLayer(markers);
var marker = new OpenLayers.Marker(pos);
markers.addMarker(marker);}
//]]>
</script>
- In order to get the map to display you must do two things. Create a div with the name specified in the above code (os-map):
<div id="os-map" style="height:400px;width:400px;">
- Secondly call your javascript function:
<body onload="init()">
- You should now be left with a finished map:
This implementation will be very familiar to users of Google Maps. The demo above is a quick implementation to give you an idea of the basic principles. You may need to implement it in a different way but follow these basic steps and you should get there. We have shown:
- How to center a grid
- Position a marker
- Add Grid lines
For more information or advice please visit OpenSpace directly where they have a developer community and tutorials.
Tags: API, Demo, Maps, OpenSpace, Ordnance Survey
