You are here - OpenStreetMap and Google Maps

1,304 views
1,076 views

Published on

Using interactive maps to find places and routes has become a common task for web and mobile users: online maps have doubtless changed the way people travel. In this livecoding session I will show you how to use the W3C Geolocation API and explore using web map services such as OpenStreetMap and Google Maps to build a geolocator web application.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,304
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

You are here - OpenStreetMap and Google Maps

  1. 1. Francesco Iovine @franciov OpenStreetMap and Google Maps HTML5 CodeShow Roma 26 Mar 2014
  2. 2. Chris Mills Marcos Lin www.francesco.iovine.name f.iovine@gmail.com @franciov Credits:
  3. 3. Web map services Google Maps Yahoo! Maps Bing Maps OpenStreetMap MapQuest Nokia Here Apple Maps http://en.wikipedia.org/wiki/ Comparison_of_web_map_services
  4. 4. https://developers.google.com/maps/documentation/javascript/ Google Maps Javascript API
  5. 5. http://dev.openlayers.org/apidocs Open Layers
  6. 6. https://developer.mozilla.org/en-US/Apps/Build/ gather_and_modify_data/Plotting_yourself_on_the_map Plotting yourself on the map
  7. 7. OpenStreetMap
  8. 8. Google Maps
  9. 9. Hybrid Map
  10. 10. <script src="http://openlayers.org/api/ OpenLayers.js"></script> <script src="https:// maps.googleapis.com/maps/api/js? v=3.exp&sensor=false&libraries=places"> </script> Libraries Gmaps libraries: adsense, drawing, geometry, panoramio, places, visualization, weather
  11. 11. var map = new OpenLayers.Map(id) new OpenLayers.Layer.OSM() new OpenLayers.Layer.Markers(id) var map = new google.maps.Map( mapDiv, mapOptions) Maps
  12. 12. var position = new OpenLayers.LonLat(lon, lat) var position = new google.maps.LatLng(lat, lng) Position
  13. 13. var marker = new OpenLayers.Marker( position, // {OpenLayers.LonLat} icon // {OpenLayers.Icon} ) markers.addMarker(marker) var marker = new google.maps.Marker({ position: ..., // {google.maps.LatLng} map: ..., // {google.maps.Map} icon: ..., // {String} title: ... // {String} }) Markers
  14. 14. var popup = new OpenLayers.Popup.FramedCloud( id, // {String} position, // {OpenLayers.LonLat} size, // {OpenLayers.Size} contentHTML, // {String} anchor, // {OpenLayers.Icon} closeBox, // {Boolean} closeBoxCallback // {Function} ) marker.events.register("click", marker, callback) new google.maps.InfoWindow(infoWindowOptions); google.maps.event.addListener(marker, 'click', callback) Popup
  15. 15. var searchBox = new google.maps.places.SearchBox(searchInput); google.maps.event.addListener(searchBox, 'places_changed', callback) google.maps.event.addListener(map, 'bounds_changed', callback) var places = searchBox.getPlaces(); Google Places
  16. 16. googleMap.mapTypes.set( "OSM", new google.maps.ImageMapType({ getTileUrl: function(coord, zoom) { return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png"; }, tileSize: new google.maps.Size(256, 256), name: "OpenStreetMap", maxZoom: 18 }) ); Hybrid map
  17. 17. http://www.w3.org/TR/geolocation-API/ Geolocation API
  18. 18. navigator.geolocation.getCurrentPosition( successCallback, errorCallback, positionOptions) function successCallback(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; // ... } Geolocation API
  19. 19. var watchID = navigator.geolocation.watchPosition( successCallback, errorCallback, positionOptions) // called every time position data changes function successCallback(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; // ... } navigator.geolocation.clearWatch(watchID); Geolocation API
  20. 20. PositionOptions.enableHighAccuracy PositionOptions.timeout PositionOptions.maximumAge Geolocation API
  21. 21. Geolocation API mini
  22. 22. Geo
  23. 23. Geo
  24. 24. Geo
  25. 25. http://goo.gl/FVhr5L
  26. 26. https://github.com/franciov/geo
  27. 27. https://github.com/franciov/geo • navigator (watchPosition) • route • FxOS installer • better look&feel • add tests • open github issues Contributing
  28. 28. Network Battery Touch Motion Geolocation Proximity Media Capture Media Recording Ambient Contacts Calendar Vibration WebAPI / Device APIs
  29. 29. https://developer.mozilla.org/en-US/docs/WebAPI WebAPI / Device APIs
  30. 30. http://docs.webplatform.org/wiki/apis WebAPI / Device APIs
  31. 31. www.w3.org/2009/dap/ WebAPI / Device APIs www.w3.org/2009/dap/wiki/ImplementationStatus
  32. 32. Chris Mills Marcos Lin www.francesco.iovine.name f.iovine@gmail.com @franciov Credits:
  33. 33. Photos http://www.flickr.com/photos/petereed/3256701422 http://www.flickr.com/photos/vividbreeze/480057824

×