open maps (or close enough?)
DESCRIPTION
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.TRANSCRIPT
Open Maps (Or Close Enough?)
Mapping APIs
These are the top players in the (Interactive) Mapping API world.
Google Yahoo! Microsoft Mapquest
Mapping APIs
underlyingdata
javascriptUI library
renderedtiles
Basically each of those APIs have this composition, where most or all of the blocks are not “open.”
providedfor developer use
Mapping APIs
underlyingdata
javascriptUI library
renderedtiles
So, to have an "Open Maps API", we need to make each of these layers open.
OpenStreetMapOpenAerialMapOpenTopoMap..other sources...
OSMARenderMapnik
MapstractionOpenLayers
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:
underlyingdata
renderedtiles
OpenAerialMap/OpenTopoMap
A repository for satellite and physical map uploads (raster data). Blended together for unified tile output.
underlyingdata
renderedtiles
Mapnik
Open source C++ software that generates map tiles from geo input formats (SHP/TIFF/PostGIS).
renderedtiles
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.
javascriptUI library
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.
javascriptUI library
Possible open stacks
OpenStreetMap + OSMARender
OpenAerialMapOpenTopoMap
OpenLayers
Google Maps API
OpenLayers
Mapquest API
Mapstraction
OpenStreetMap + OSMARenderOpenAerialMapOpenTopoMap
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...
Mapstraction: More Detail
Mapstraction: The Basics
JS Maps APIs share common features:• zooming/panning• map types• controls• overlays• infowindows• events
Mapstraction abstracts and wraps specific implementation details.
Mapstraction: Adding a map to your page
1. Create/size a map DIV 2. Load the Maps API JS + Mapstraction JS 3. Create + center the map
<html xmlns="http://www.w3.org/1999/xhtml"><head> <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAA...-OUw" type="text/javascript"></script> <script type="text/javascript" src="../common/mapstraction.js"></script> </head> <body> <div id="simplemap" style="width: 500px; height: 300px"></div> <script type="text/javascript"> var mapstraction = new Mapstraction('simplemap','google'); mapstraction.setCenterAndZoom(new LatLonPoint(43,-79), 15); </script> </body></html>
Mapstraction: Adding a marker
var marker = new Marker(new LatLonPoint(43, -79)
1. Initialise the marker
marker.setInfoBubble("<b>Googleplex</b> Welcome!");
2. Make a bubble pop up when clicked
mapstraction.addMarker(marker);
3. Display the marker
JavascriptKey: CSS HTML
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; .....
Mapstraction: Looking at the code
A snippet from setCenterAndZoom in the JS: