Close Enough for Government Work: The Committee Rulemaking ...
Open Maps (Or Close Enough?)
-
Upload
pamela-fox -
Category
Technology
-
view
2.783 -
download
5
description
Transcript of Open Maps (Or Close Enough?)
![Page 1: Open Maps (Or Close Enough?)](https://reader035.fdocuments.net/reader035/viewer/2022062418/554925efb4c9059f4c8ba97d/html5/thumbnails/1.jpg)
Open Maps (Or Close Enough?)
![Page 2: Open Maps (Or Close Enough?)](https://reader035.fdocuments.net/reader035/viewer/2022062418/554925efb4c9059f4c8ba97d/html5/thumbnails/2.jpg)
Mapping APIs
These are the top players in the (Interactive) Mapping API world.
Google Yahoo! Microsoft Mapquest
![Page 3: Open Maps (Or Close Enough?)](https://reader035.fdocuments.net/reader035/viewer/2022062418/554925efb4c9059f4c8ba97d/html5/thumbnails/3.jpg)
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
![Page 4: Open Maps (Or Close Enough?)](https://reader035.fdocuments.net/reader035/viewer/2022062418/554925efb4c9059f4c8ba97d/html5/thumbnails/4.jpg)
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
![Page 5: Open Maps (Or Close Enough?)](https://reader035.fdocuments.net/reader035/viewer/2022062418/554925efb4c9059f4c8ba97d/html5/thumbnails/5.jpg)
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
![Page 6: Open Maps (Or Close Enough?)](https://reader035.fdocuments.net/reader035/viewer/2022062418/554925efb4c9059f4c8ba97d/html5/thumbnails/6.jpg)
OpenAerialMap/OpenTopoMap
A repository for satellite and physical map uploads (raster data). Blended together for unified tile output.
underlyingdata
renderedtiles
![Page 7: Open Maps (Or Close Enough?)](https://reader035.fdocuments.net/reader035/viewer/2022062418/554925efb4c9059f4c8ba97d/html5/thumbnails/7.jpg)
Mapnik
Open source C++ software that generates map tiles from geo input formats (SHP/TIFF/PostGIS).
renderedtiles
![Page 8: Open Maps (Or Close Enough?)](https://reader035.fdocuments.net/reader035/viewer/2022062418/554925efb4c9059f4c8ba97d/html5/thumbnails/8.jpg)
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
![Page 9: Open Maps (Or Close Enough?)](https://reader035.fdocuments.net/reader035/viewer/2022062418/554925efb4c9059f4c8ba97d/html5/thumbnails/9.jpg)
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
![Page 10: Open Maps (Or Close Enough?)](https://reader035.fdocuments.net/reader035/viewer/2022062418/554925efb4c9059f4c8ba97d/html5/thumbnails/10.jpg)
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...
![Page 11: Open Maps (Or Close Enough?)](https://reader035.fdocuments.net/reader035/viewer/2022062418/554925efb4c9059f4c8ba97d/html5/thumbnails/11.jpg)
Mapstraction: More Detail
![Page 12: Open Maps (Or Close Enough?)](https://reader035.fdocuments.net/reader035/viewer/2022062418/554925efb4c9059f4c8ba97d/html5/thumbnails/12.jpg)
Mapstraction: The Basics
JS Maps APIs share common features:• zooming/panning• map types• controls• overlays• infowindows• events
Mapstraction abstracts and wraps specific implementation details.
![Page 13: Open Maps (Or Close Enough?)](https://reader035.fdocuments.net/reader035/viewer/2022062418/554925efb4c9059f4c8ba97d/html5/thumbnails/13.jpg)
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>
![Page 14: Open Maps (Or Close Enough?)](https://reader035.fdocuments.net/reader035/viewer/2022062418/554925efb4c9059f4c8ba97d/html5/thumbnails/14.jpg)
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
![Page 15: Open Maps (Or Close Enough?)](https://reader035.fdocuments.net/reader035/viewer/2022062418/554925efb4c9059f4c8ba97d/html5/thumbnails/15.jpg)
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: