We love Open Source but still use Google Maps for our mapping needs

Talk for Cologne.rb (www.colognerb.de) about using the OSM database to grap neccessary GeoData for your app and use the Leaflet.js (cloudmade.leaflet.com) API to display it on your page

Transcript

1. We — OpenSource ...but still use Google Maps for our mapping needs
2. We — OpenSource ...but still use Google Maps for our mapping needs that sucks!
5. http://www.flickr.com/photos/mnemonic/56371107/ refueling - gas station
6. 1st idea? $  curl  https://maps.googleapis.com/maps/api/place/search/json? types=gas_station&location=50.937531,6.960279&radius=1000 {        "results":  [                {                        "name":  "Total",                        "geometry":  {                                "location":  {  "lng":  6.962109,  "lat":  50.931382  }                        },                        "id":  "715ab63f7babd311a1df1fe15d7641e4ecd103fc",                        "vicinity":  "Holzmarkt  49,  Cologne"                },                {                        "name":  "Cäcilienstraße",                        "geometry":  {                                "location":  {  "lng":  6.951002,  "lat":  50.935464  }                        },                        "id":  "3179f8caadae916de2eea33b64a13de1d00ece47",                        "vicinity":  "Cäcilienstraße  32,  Cologne"                },                    ...        ] } ✓
7. Problem? https://developers.google.com/maps/terms 10.1.3 Restrictions against Data Export or Copying. (b) No Pre-Fetching, Caching, or Storage of Content. You must not pre- fetch, cache, or store any Content, except that you may store: (i) limited amounts of Content for the purpose of improving the performance of your Maps API Implementation if you do so temporarily, securely, and in a manner that does not permit use of the Content outside of the Service; and (ii) any content identifier or key that the Maps APIs Documentation specifically permits you to store. For example, you must not use the Content to create an independent database of "places" or other local listings information.
8. Also... https://developers.google.com/maps/faq#usage_pricing
9. 2nd idea? $  curl  https://api.foursquare.com/v2/search? ll=50.937531,6.960279&radius=1000& intent=browse&categoryId=4bf58dd8d48988d113951735 {   venues:  [   {     id:  "4d99f57f97d06ea8c4ae550b",     name:  "Total  Tankstelle",     location:  {        lat:  50.9312361,  lng:  6.96271096,  country:  "Germany",     }   },   {     id:  "4f527021e4b0195da3d1a97e",     name:  "bonjour",     location:  {                lat:  50.931198,  lng:  6.962518,  country:  "Germany"     }   }] }
10. 3rd idea? - copy & distribute - adapt the work - COMMERCIAL USE - Attribute - Share under the same license
11. $  brew  install  osmosis $  wget  http://download.geofabrik.de/osm/europe/germany.osm.bz2  ... $  osmosis  -­‐-­‐read-­‐xml  file="germany.osm"                    -­‐-­‐node-­‐key-­‐value  keyValueList="amenity.fuel"                    -­‐-­‐write-­‐xml  file="german-­‐gas.osm" Grab data... <osm  version="0.6"  generator="Osmosis  0.39">    <node  id="510647"  version="5"  timestamp="2012-­‐01-­‐12T18:55:29Z"  uid="26139"                user="dieterdreist"  changeset="10372112"  lat="51.6080382"  lon="12.186828">        <tag  k="amenity"  v="fuel"/>        <tag  k="name"  v="Total"/>        <tag  k="operator"  v="Total"/>    </node>    <node  id="510830"  version="5"  timestamp="2011-­‐03-­‐15T16:25:22Z"  uid="7010"                          user="GarryX3D"  changeset="7567686"  lat="51.0367136"  lon="9.4877935">        <tag  k="amenity"  v="fuel"/>        <tag  k="ele"  v="327.466186523"/>        <tag  k="name"  v="Aral"/>    </node> </osm>
12. giving back
13. 13640 gas stations ~ 9867 without city ~ 11071 without address ~ 8960 without operator ~ 11356 without hours ROOM for improvement
14. twice user has been at a gas station we ask two take two minutes and add the information that can be found on the receipt, anyways! verify by us or other users ➙ Contribute back to OSM * I lost an extra ,w‘ somewhere on the page ...
15. go further...
16. map? I‘m not using their data why should I use their
17. Started to look around + =—
18. Awesome API! var center = new L.LatLng(50.941252, 6.958283); var map = new L.Map('map', { center: center, zoom: 13 }); var cloudmade = new L.TileLayer('http://{s}. tile.cloudmade.com/.../997/256/{z}/{x}/ {y}.png'); map.addLayer(cloudmade); var marker = new L.Marker(center); map.addLayer(marker); marker.bindPopup('Dom').openPopup();
19. Awesome API! var center = new L.LatLng(50.941252, 6.958283); var map = new L.Map('map', { center: center, zoom: 13 }); var cloudmade = new L.TileLayer('http://{s}. tile.cloudmade.com/.../997/256/{z}/{x}/ {y}.png'); map.addLayer(cloudmade); var polygonPoints = [ new L.LatLng(50.974265,7.028418), new L.LatLng(50.953777,7.03760), new L.LatLng(50.964211,7.071762), new L.LatLng(50.974102,7.059317), new L.LatLng(50.985234,7.049274) ]; var polygon = new L.Polygon(polygonPoints); map.addLayer(polygon);
20. Awesome API! var center = new L.LatLng(50.941252, 6.958283); var map = new L.Map('map', { center: center, zoom: 13 }); var cloudmade = new L.TileLayer('http://{s}. tile.cloudmade.com/.../997/256/{z}/{x}/ {y}.png'); map.addLayer(cloudmade); map.on('click', mapClickEvent); function mapClickEvent(e) { var marker = new L.Marker(e.latlng); map.addLayer(marker); }
21. Awesome API! var center = new L.LatLng(50.941252, 6.958283); var map = new L.Map('map', { center: center, zoom: 13 }); var opencycle = new L.TileLayer('http:// {s}.tile.opencyclemap.org/cycle/{z}/{x}/ {y}.png'); map.addLayer(opencycle); var marker = new L.Marker(center); map.addLayer(marker); marker.bindPopup('Dom').openPopup();
22. Awesome API! <script src="https://raw.github.com/gist/ 2197042/2b90c41b39b7d5b3a851d8f256de2ebd3fe1f b74/leaflet-google.js"></script> ... var center = new L.LatLng(50.941252, 6.958283); var map = new L.Map('map', { center: center, zoom: 13 }); var gmaps = new L.Google('ROADMAP'); //var gmaps = new L.Google('SATELLITE'); map.addLayer(gmaps); var marker = new L.Marker(center); map.addLayer(marker); marker.bindPopup('Dom').openPopup();
23. Awesome API! ... var gmaps_s = new L.Google('SATELLITE'); var gmaps_r = new L.Google('ROADMAP'); var cloudmade = new L.TileLayer('http:// {s}.tile.cloudmade.com/.../997/256/{z}/{x}/ {y}.png'); var opencycle = new L.TileLayer('http:// {s}.tile.opencyclemap.org/cycle/{z}/{x}/ {y}.png', ); map.addLayer(cloudmade) // all the layers! var maps = { "Cloudmade": cloudmade, "Google Maps - Roadmap": gmaps_r, "Google Maps - Satellite": gmaps_s, "OpenCycleMap": opencycle }; var layersControl = new L.Control.Layers(maps); map.addControl(layersControl); ...
24. Awesome API! ... var gmaps_s = new L.Google('SATELLITE'); var gmaps_r = new L.Google('ROADMAP'); var cloudmade = new L.TileLayer('http:// {s}.tile.cloudmade.com/.../997/256/{z}/{x}/ {y}.png'); var opencycle = new L.TileLayer('http:// {s}.tile.opencyclemap.org/cycle/{z}/{x}/ {y}.png', ); map.addLayer(cloudmade) // all the layers! var maps = { "Cloudmade": cloudmade, "Google Maps - Roadmap": gmaps_r, "Google Maps - Satellite": gmaps_s, "OpenCycleMap": opencycle }; var layersControl = new L.Control.Layers(maps); map.addControl(layersControl); ...
25. Awesome API! ... var gmaps_s = new L.Google('SATELLITE'); var gmaps_r = new L.Google('ROADMAP'); var cloudmade = new L.TileLayer('http:// {s}.tile.cloudmade.com/.../997/256/{z}/{x}/ {y}.png'); var opencycle = new L.TileLayer('http:// {s}.tile.opencyclemap.org/cycle/{z}/{x}/ {y}.png', ); map.addLayer(cloudmade) // all the layers! var maps = { "Cloudmade": cloudmade, "Google Maps - Roadmap": gmaps_r, "Google Maps - Satellite": gmaps_s, "OpenCycleMap": opencycle }; var layersControl = new L.Control.Layers(maps); map.addControl(layersControl); ...
26. catch? Is there a
27. using alexreisner/geocoder? Configure it to not use: - Google - Yahoo - Bing
28. Klaus Zanders @klaustopher www.klauszanders.de