Map Styling Tools and Interactive maps on the web with OpenLayers - Addy Pope, GoGeo


Published on

Presentation given as part of the DevCSI/JISC GECO Open Mapping Workshop which was held at the Electron Club, CCA, Glasgow on Thursday 25th August 2011. The event was connected to the OpenStreetMap State of the Map Scotland event.

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Map Styling Tools and Interactive maps on the web with OpenLayers - Addy Pope, GoGeo

  1. 1. OSM Workshop- Plan A OSM Workshop 2011 Who Themes Cloudmade QGIS Conclusions 0 60 Panic Openlayers Mapnik
  2. 2. What is EDINA <ul><li>EDINA is a National Data Centre supported by JISC to provide resources to higher and further institutions. </li></ul>OSM Workshop 2011 EDINA has extensive experience in delivering and manipulating spatial data and is an active member of the OSGeo foundation providing persistent test beds for various packages. GECO Geospatial Outreach and Community Outreach, EDINA coordinate this JISC funded project and aim to facilitate the use of geospatial data and tech beyond core user groups
  3. 3. Doing more with GIS/OpenLayers <ul><li>We’ve seen what OSM is and how we can contribute data to it. Now lets look at what we might want to do with it. </li></ul>OSM Workshop 2011
  4. 4. Something to work towards <ul><li> </li></ul>OSM Workshop 2011 This site showcases some of the best examples of OSM data/contributions around the world..... The UK looks a bit bare.
  5. 5. OSM - Pompeii OSM Workshop 2011
  6. 6. OSM - CERN OSM Workshop 2011
  7. 7. OSM - Bern OSM Workshop 2011
  8. 8. Doing more with GIS/OpenLayers <ul><li>But there are some excellent examples of mapping detail from the UK that are not on the map. </li></ul>OSM Workshop 2011
  9. 9. OSM – Edinburgh Zoo OSM Workshop 2011
  10. 10. OSM – Edinburgh Southside OSM Workshop 2011
  11. 11. Cloudmade OSM Workshop 2011 You will have seen the blue plus sign on the right hand side of the map window. This allows you to alter the look of the map. This is called altering the theme. Cloudmade is a company that spun out from OSM and they do consultancy work on and around OSM data. In addition they offer some neat tools for OSM.
  12. 12. Cloudmade OSM Workshop 2011 Cloudmade is a company that spun out from OSM and they do consultancy work on and around OSM data. In addition they offer some neat tools for OSM.
  13. 13. Cloudmade OSM Workshop 2011 Lets have a closer look at some of the themes that Cloudmade offer. To do this, we need to look at
  14. 14. Cloudmade - themes OSM Workshop 2011
  15. 15. Cloudmade - Modify a theme <ul><li>You can create your own theme using cloudmade. </li></ul><ul><li>Navigate to: </li></ul><ul><li>To create your own style: </li></ul><ul><li>Sign up and login (they send you an email) </li></ul><ul><li>Click Edit Map Style </li></ul><ul><li>Browse the styles for one close to what you want and select it by clicking Clone Style (bottom right) </li></ul><ul><li>Then just select features from the Left Menu and alter colours using the pallet control </li></ul><ul><li>PLAY with Cloudmade </li></ul>OSM Workshop 2011
  16. 16. Mapnik - Modify a theme <ul><li>What we have been doing is using a GUI to alter a theme, the GUI then generates the code which renders the xml from the OSM database, a bit like a CSS for a webpage. </li></ul>OSM Workshop 2011
  17. 17. Mapnik- Modify a theme <ul><li>Mapnik allows you to render osm xml files directly. </li></ul>OSM Workshop 2011 <ul><li>You can have a go at this if you fancy it. What you will need to do is: </li></ul><ul><li>Download mapnik – i tend to use the Mapnik bundled in OSGeo4W ( </li></ul><ul><li>Find some examples to copy - </li></ul><ul><li>Hack til you break it, then start again </li></ul>
  18. 18. Openlayers <ul><li>is an open source JavaScript library for displaying map data in web browsers. </li></ul>You will probably interacted and used Openlayers if you have used online mapping tools. In this section we will look at what you can do with Openlayers. OSM Workshop 2011
  19. 19. OpenLayers: Digimap <ul><li>Digimap is a service run by EDINA that supplies maps to education institutes across Britain. </li></ul> OSM Workshop 2011
  20. 20. OpenLayers - Examples <ul><li>The Openlayers website has some excellent examples of the functionality that Openlayers offers. </li></ul><ul><li>You can view the code for each example and integrate it into your own mapping apps. </li></ul>OSM Workshop 2011
  21. 21. OpenLayers - Code <ul><li>Google overlay: </li></ul><ul><li>var map; </li></ul><ul><li>function init() { </li></ul><ul><li>map = new OpenLayers.Map({ </li></ul><ul><li>div: &quot;map&quot;, </li></ul><ul><li>allOverlays: true </li></ul><ul><li>}); </li></ul><ul><li>var osm = new OpenLayers.Layer.OSM(); </li></ul><ul><li>var gmap = new OpenLayers.Layer.Google(&quot;Google Streets&quot;, {visibility: false}); </li></ul><ul><li>// note that first layer must be visible </li></ul><ul><li>map.addLayers([osm, gmap]); </li></ul><ul><li>map.addControl(new OpenLayers.Control.LayerSwitcher()); map.zoomToMaxExtent(); } </li></ul>OSM Workshop 2011
  22. 22. Doing more with GIS/OpenLayers <ul><li>But what if i want to have a map and put some of my own data onto in? </li></ul><ul><li>Not a problem we can use QGIS to do most of the hard stuff. </li></ul><ul><li>QGIS is a free, open source GIS package that runs on Window, Linux and Mac’s. </li></ul><ul><li>It is (relatively) easy and intuitive to use </li></ul><ul><li>There are loads of useful plugins that do neat things </li></ul><ul><li>There is an active user group developing tools </li></ul><ul><li>There are great demos and help pages to get you started </li></ul><ul><li> </li></ul>OSM Workshop 2011
  23. 23. QGIS - Recipe OSM Workshop 2011 Not mine, honest <ul><li>Recipe </li></ul><ul><li>Take some data (kml/shp/GeoJSON) </li></ul><ul><li>Load into QGIS </li></ul><ul><li>Download OGR2Layer plugin </li></ul><ul><li>Run Data thru plugin </li></ul><ul><li>Integrate the code in your website </li></ul><ul><li>Pretend it was much harder than it was </li></ul>
  24. 24. Shameful Plug I OSM Workshop 2011 All the data that i am going to overlay on OSM is available through ShareGeo is a spatial data repository fro open data
  25. 25. QGIS main screen Add vector layer Layer list Map Window IWMW 2011
  26. 26. Plugins IWMW 2011
  27. 27. OGR2Layer Set an output folder Set map size IWMW 2011
  28. 28. Output (OSM) <ul><li>No coded written </li></ul><ul><li>Can add in attributes </li></ul><ul><li>Can apply styles to data in QGIS </li></ul><ul><li>Works in all good browsers (even IE, well, almost.........) </li></ul>IWMW 2011
  29. 29. OpenLayers Code <ul><li><script src=&quot;;></script> </li></ul><ul><li><script type=&quot;text/javascript&quot;> </li></ul><ul><li>var map, selectsControls </li></ul><ul><li>function init(){ </li></ul><ul><li>var option = { </li></ul><ul><li>projection: new OpenLayers.Projection(&quot;EPSG:900913&quot;), </li></ul><ul><li>displayProjection: new OpenLayers.Projection(&quot;EPSG:4326&quot;) </li></ul><ul><li>}; </li></ul><ul><li>map = new OpenLayers.Map('map', option); </li></ul><ul><li>olmapnik = new OpenLayers.Layer.OSM(&quot;OpenStreetMap&quot;, &quot;${z}/${x}/${y}.png&quot;); </li></ul><ul><li>map.addLayer(olmapnik); </li></ul><ul><li>map.setBaseLayer(olmapnik); </li></ul><ul><li>var ls= new OpenLayers.Control.LayerSwitcher(); </li></ul><ul><li>map.addControl(ls); </li></ul><ul><li>ls.maximizeControl(); </li></ul><ul><li>map.addControl(new OpenLayers.Control.Scale()); </li></ul><ul><li>var OGRGeoJSON_style = new OpenLayers.Style( </li></ul><ul><li>OpenLayers.Util.applyDefaults({ </li></ul><ul><li>strokeColor: &quot;${getStrokeColor}&quot;, </li></ul><ul><li>strokeOpacity: 1, </li></ul><ul><li>strokeWidth: &quot;${getLineWidth}&quot;, </li></ul><ul><li>fillColor: &quot;${getFillColor}&quot;, </li></ul><ul><li>fillOpacity: 1 </li></ul><ul><li>} </li></ul>//START QUERY OGRGeoJSON function onPopupCloseOGRGeoJSON(evt) { selectControl.unselect(selectedFeature); } function onFeatureSelectOGRGeoJSON(feature){ selectedFeature = feature; tableOGRGeoJSON=&quot;<html><meta http-equiv='Content-Type' content='text/html; charset=UTF-8'><body><table><tr><td><b>alignment:</b></td><td><i>&quot;+feature.attributes.alignment+&quot;</i></td></tr><tr><td><b>fcode:</b></td><td><i>&quot;+feature.attributes.fcode+&quot;</i></td></tr><tr><td><b>fillColor:</b></td><td><i>&quot;+feature.attributes.fillColor+&quot;</i></td></tr><tr><td><b>fillOpacity:</b></td><td><i>&quot;+feature.attributes.fillOpacity+&quot;</i></td></tr><tr><td><b>fontColor:</b></td><td><i>&quot;+feature.attributes.fontColor+&quot;</i></td></tr><tr><td><b>fontFamily:</b></td><td><i>&quot;+feature.attributes.fontFamily+&quot;</i></td></tr><tr><td><b>fontSize:</b></td><td><i>&quot;+feature.attributes.fontSize+&quot;</i></td></tr><tr><td><b>fontWeight:</b></td><td><i>&quot;+feature.attributes.fontWeight+&quot;</i></td></tr><tr><td><b>internal:</b></td><td><i>&quot;+feature.attributes.internal+&quot;</i></td></tr><tr><td><..........></td></tr></table></body></html>&quot;; popup = new OpenLayers.Popup.FramedCloud(&quot;chicken&quot;, feature.geometry.getBounds().getCenterLonLat(), new OpenLayers.Size(1000,500), tableOGRGeoJSON, null, true, onPopupCloseOGRGeoJSON ); feature.popup = popup; map.addPopup(popup); } function onFeatureUnselectOGRGeoJSON(feature) { map.removePopup(feature.popup); feature.popup.destroy(); feature.popup = null; } //STOP QUERY OGRGeoJSON IWMW 2011
  30. 30. QGIS Demo <ul><li>QGIS demo of OGR2Layer </li></ul><ul><li> </li></ul>OSM Workshop 2011
  31. 31. QGIS Demo <ul><li>Quick maps that reveal worrying things.... </li></ul>OSM Workshop 2011
  32. 32. QGIS Demo <ul><li>This time we add queryable attributes to less worrying data. </li></ul>OSM Workshop 2011
  33. 33. Shameful plug II <ul><li>You may wishto use OS Opendata, in which case you can access DigimapOpenstream </li></ul><ul><li>Grab the example code from OpenStream site </li></ul><ul><li>Copy the variables to the beginning of the script </li></ul><ul><li>Add a new to the index.html </li></ul><ul><li>Discover the projections dont match </li></ul><ul><li>Panic! </li></ul><ul><li>Find someone clever </li></ul><ul><li>Copy their code (function proj2.js) </li></ul>IWMW 2011
  34. 34. Shameful plug II IWMW 2011
  35. 35. Useful Links <ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul>IWMW 2011
  36. 36. Campus Maps - Plan A IWMW 2011 Who Digimap ROAM Questions Conclusions 0 90 Confession Next Steps Practical
  37. 37. Practical <ul><li>Onto the practical exercise </li></ul><ul><li>Familiarising yourself with Digimap ROAM </li></ul><ul><li>This should take around 30 minutes </li></ul><ul><li>Then we will look at what we can do with the output. </li></ul>IWMW 2011
  38. 38. After the magic button? <ul><li>Well, this is the bit has still to be decided and we want your help. </li></ul>IWMW 2011
  39. 39. Theoretical process 1 Magic button may appear here.... IWMW 2011 <ul><li>Do some digitising – I would recommend that you theme your polygons. The colours are retained in the output so it makes it easier to re-interpret. </li></ul><ul><li>When you are happy with it, press the magic button </li></ul><ul><li>Get the code and load it into a GIS or load it into a web page through an API such as openlayers/google </li></ul>
  40. 40. What to do next? <ul><li>Now we have digitised the buildings and grabbed the GeoJSON through the “magic button” what options are there? </li></ul><ul><li>Here we will outline 3 options: </li></ul><ul><ul><li>Google Earth </li></ul></ul><ul><ul><li>Image files as output (for print or Google Earth) </li></ul></ul><ul><ul><li>OpenLayers dynamic map </li></ul></ul><ul><li>There may be other options/needs. If you have any thoughts, we would like to hear them. </li></ul>IWMW 2011
  41. 41. Google Earth <ul><li>To get the annotations into Google Earth it is pretty easy. We need to convert the GeoJSON to KML </li></ul><ul><li>Using the ogr2ogr libraries: </li></ul><ul><li>ogr2ogr –f “KML” campusmap.kml input.geoJSON </li></ul>IWMW 2011 OGR2OGR libraries available through FWTools
  42. 42. Google Earth IWMW 2011
  43. 43. Case study <ul><li>Campus maps for Edinburgh University </li></ul><ul><li>Requirements: </li></ul><ul><ul><li>Make map that can be integrated into MobileCampus App </li></ul></ul><ul><ul><li>Define all university buildings as polygons </li></ul></ul><ul><ul><li>Link to attributes </li></ul></ul><ul><ul><li>Make maps which show uni building </li></ul></ul><ul><ul><ul><li>Maps must be “lite” enough to deploy on mobile </li></ul></ul></ul>IWMW 2011
  44. 44. Recipe – part 1 <ul><ul><ul><li>1 x IS intern </li></ul></ul></ul><ul><ul><ul><li>30 minute intro to Digimap ROAM </li></ul></ul></ul><ul><ul><ul><li>1 x copy of current campus map </li></ul></ul></ul><ul><ul><ul><li>1 x access to Google Streetview </li></ul></ul></ul><ul><ul><ul><li>2 x lunch time walks </li></ul></ul></ul><ul><ul><ul><li>1 – 2 days of digitising </li></ul></ul></ul> Not mine, honest <ul><ul><ul><li>Take intern and train on how to digitise, set intern loose and copy existing map, checking it is correct with google streetmap, Openstreetmap and ground truthing (lunchtime walks). </li></ul></ul></ul>IWMW 2011
  45. 45. Recipe Part 2 <ul><li>Once you have the JSON, convert to shapefile format: </li></ul><ul><ul><li>Ogr2ogr –f “ESRI SHAPE FILE” campusmap.shp input.geoJSON </li></ul></ul><ul><li>Import into GIS and theme </li></ul><ul><li>Add basemap </li></ul><ul><li>Export to desired file format (png in this case) </li></ul><ul><li>Re-project png from OSGB to WGS84 for use in google maps. </li></ul>IWMW 2011
  46. 46. Edinburgh Central Campus IWMW 2011
  47. 47. Kings Buildings IWMW 2011
  48. 48. Western General Hospital IWMW 2011
  49. 49. Easter Bush Issue with the buildings here, they are new and don’t appear on OS maps yet. IWMW 2011