Save9 » Maps 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 Ordnance Survey releases maps to developers http://www.save9.com/2010/01/ordnance-survey-releases-maps-to-developers/ http://www.save9.com/2010/01/ordnance-survey-releases-maps-to-developers/#comments Tue, 05 Jan 2010 14:47:29 +0000 Richard Askew http://www.save9.com/2010/01/ordnance-survey-releases-maps-to-developers/ An API service that gives developers access to Ordnance Survey maps has just been made available. Released just in time for 2010, the OS OpenSpace beta service allows developers to use the maps on their websites and applications. You can do postcode searches, plot routes, add widgets and even add your own content to the maps. The data within the maps themselves can be manipulated so that administrative borders can be highlighted as the developer requires.

As with all APIs the only real barrier is the developers imagination. I think many people will find these maps useful, especially those who find that the maps provided by Google don’t have enough information. I can see many public sector sites making use of the service, but to get you thinking below are a few sites that have already used the service:

  • Wheresthepath – A very simple idea that shows the OS maps at the side of a Google Map
  • Lake District Tour – An application that allows the user to explore the Lake District
  • Sky Cam – A good example of an idea that would have usually used the Google Maps API

I will be taking a look at the service in the near future so I will let you know how we get on.

]]> http://www.save9.com/2010/01/ordnance-survey-releases-maps-to-developers/feed/ 0