Open Maps (Or Close Enough?)

3,334 views

Published on

A look at the various open source/open data options for an open maps stack - OpenStreetMap, OpenLayers, etc. Also goes into a bit more detail on the Mapstraction library.

Published in: Technology, Education
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,334
On SlideShare
0
From Embeds
0
Number of Embeds
17
Actions
Shares
0
Downloads
73
Comments
0
Likes
7
Embeds 0
No embeds

No notes for slide

Open Maps (Or Close Enough?)

  1. 1.    Open Maps (Or Close Enough?)
  2. 2. Mapping APIs These are the top players in the (Interactive) Mapping API world. Google                 Yahoo!               Microsoft          Mapquest
  3. 3. Mapping APIs underlying data javascript UI library rendered tiles Basically each of those APIs have this composition, where most or all of the blocks are not “open.” provided for developer use
  4. 4. Mapping APIs underlying data javascript UI library rendered tiles So, to have an "Open Maps API", we need to make each of these layers open. OpenStreetMap OpenAerialMap OpenTopoMap ..other sources... OSMARender Mapnik Mapstraction OpenLayers
  5. 5. OpenStreetMap/OSMARender Basically a map wiki. Users trace data, upload GPS tracks, import other open data. Primarily for POIs/roads. OSMARender software is used to output tiles of data. Editing:                                             Using: underlying data rendered tiles
  6. 6. OpenAerialMap/OpenTopoMap A repository for satellite and physical map uploads (raster data). Blended together for unified tile output. underlying data rendered tiles
  7. 7. Mapnik Open source C++ software that generates map tiles from geo input formats (SHP/TIFF/PostGIS). rendered tiles
  8. 8. OpenLayers Open-source JS library that creates interactive maps with any tile source and adds overlays. Also designed for easy hook-up with tile generating servers. javascript UI library
  9. 9. Mapstraction Open-source JS library that wraps other maps APIs (Google, MS, Yahoo, OpenLayers, MapQuest, MultiMap, OpenLayers,etc). Developer can avoid vendor lock-in while abiding to ToU. javascript UI library
  10. 10. Possible open stacks OpenStreetMap + OSMARender OpenAerialMap OpenTopoMap OpenLayers Google Maps API OpenLayers Mapquest  API Mapstraction OpenStreetMap + OSMARender OpenAerialMap OpenTopoMap Google Maps API ESRI SHP files + PostGIS DB OpenLayers Mapnik Depending on your needs (licensing/data flexibility/pricing), you can combine the various open components for a custom stack.  Just a few permutations below...
  11. 11.    Mapstraction: More Detail
  12. 12. Mapstraction: The Basics <ul><li>JS Maps APIs share common features: </li></ul><ul><ul><li>zooming/panning </li></ul></ul><ul><ul><li>map types </li></ul></ul><ul><ul><li>controls </li></ul></ul><ul><ul><li>overlays </li></ul></ul><ul><ul><li>infowindows </li></ul></ul><ul><ul><li>events </li></ul></ul><ul><li>Mapstraction abstracts and wraps specific implementation details. </li></ul>
  13. 13. Mapstraction: Adding a map to your page <ul><ul><li>1. Create/size a map DIV </li></ul></ul><ul><ul><li>2. Load the Maps API JS + Mapstraction JS </li></ul></ul><ul><ul><li>3. Create + center the map </li></ul></ul><html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;> <head>     <script src=&quot;http://maps.google.com/maps?file=api&v=2&key=ABQIAA...-OUw&quot; type=&quot;text/javascript&quot;></script>     <script type=&quot;text/javascript&quot; src=&quot;../common/mapstraction.js&quot;></script>    </head>   <body>     <div id=&quot; simplemap &quot; style=&quot;width: 500px; height: 300px&quot;></div>     <script type=&quot;text/javascript&quot;>       var mapstraction = new Mapstraction(' simplemap ','google');        mapstraction.setCenterAndZoom(new LatLonPoint(43,-79), 15);      </script>   </body> </html>
  14. 14. Mapstraction: Adding a marker   var marker = new Marker(new LatLonPoint(43, -79) <ul><ul><li>1. Initialise the marker </li></ul></ul>marker.setInfoBubble(&quot;<b>Googleplex</b> Welcome!&quot;); <ul><ul><li>2. Make a bubble pop up when clicked </li></ul></ul>mapstraction.addMarker(marker); <ul><ul><li>3. Display the marker </li></ul></ul>Javascript Key: CSS HTML
  15. 15. Mapstraction: Looking at the code Mapstraction.prototype.setCenterAndZoom = function(point, zoom) {      var map = this.maps[this.api];      switch (this.api) { case 'google': case 'openstreetmap': map.setCenter(point.toGoogle(), zoom); break; case 'microsoft': map.SetCenterAndZoom(point.toMicrosoft(),zoom); break; case 'openlayers': map.setCenter(point.toOpenLayers(), zoom); break; case 'multimap': map.goToPosition( new MMLatLon( point.lat, point.lng ), zoom ); break; case 'map24': var newSettings = {}; newSettings.Latitude = point.lat*60; newSettings.Longitude = point.lon*60; ..... A snippet from setCenterAndZoom in the JS:

×