Save9 » Demo http://www.save9.com Web Design, IT Support, Accounts, CRM and Communications Tue, 13 Dec 2011 14:15:22 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Ordnance Survey OpenSpace Demo http://www.save9.com/2010/01/ordnance-survey-openspace-demo/ http://www.save9.com/2010/01/ordnance-survey-openspace-demo/#comments Fri, 15 Jan 2010 10:12:52 +0000 Richard Askew http://www.save9.com/?p=3040 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.

]]> http://www.save9.com/2010/01/ordnance-survey-openspace-demo/feed/ 0