Francesco Iovine
@franciov
OpenStreetMap and Google Maps
HTML5 CodeShow Roma
26 Mar 2014
Chris Mills
Marcos Lin
www.francesco.iovine.name
f.iovine@gmail.com
@franciov
Credits:
Web map services
Google Maps
Yahoo! Maps
Bing Maps
OpenStreetMap
MapQuest
Nokia Here
Apple Maps
http://en.wikipedia.org/wi...
https://developers.google.com/maps/documentation/javascript/
Google Maps Javascript API
http://dev.openlayers.org/apidocs
Open Layers
https://developer.mozilla.org/en-US/Apps/Build/
gather_and_modify_data/Plotting_yourself_on_the_map
Plotting yourself on t...
OpenStreetMap
Google Maps
Hybrid Map
<script src="http://openlayers.org/api/
OpenLayers.js"></script>
<script src="https://
maps.googleapis.com/maps/api/js?
v=...
var map = new OpenLayers.Map(id)
new OpenLayers.Layer.OSM()
new OpenLayers.Layer.Markers(id)
var map = new google.maps.Map...
var position = new
OpenLayers.LonLat(lon, lat)
var position = new
google.maps.LatLng(lat, lng)
Position
var marker = new OpenLayers.Marker(
position, // {OpenLayers.LonLat}
icon // {OpenLayers.Icon}
)
markers.addMarker(marker)...
var popup = new OpenLayers.Popup.FramedCloud(
id, // {String}
position, // {OpenLayers.LonLat}
size, // {OpenLayers.Size}
...
var searchBox = new
google.maps.places.SearchBox(searchInput);
google.maps.event.addListener(searchBox,
'places_changed', ...
googleMap.mapTypes.set(
"OSM",
new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
return "http://tile.open...
http://www.w3.org/TR/geolocation-API/
Geolocation API
navigator.geolocation.getCurrentPosition(
successCallback, errorCallback, positionOptions)
function successCallback(positi...
var watchID = navigator.geolocation.watchPosition(
successCallback, errorCallback, positionOptions)
// called every time p...
PositionOptions.enableHighAccuracy
PositionOptions.timeout
PositionOptions.maximumAge
Geolocation API
Geolocation API
mini
Geo
Geo
Geo
http://goo.gl/FVhr5L
https://github.com/franciov/geo
https://github.com/franciov/geo
• navigator (watchPosition)
• route
• FxOS installer
• better look&feel
• add tests
• open...
Network
Battery
Touch
Motion
Geolocation
Proximity
Media Capture
Media Recording
Ambient
Contacts
Calendar
Vibration
WebAP...
https://developer.mozilla.org/en-US/docs/WebAPI
WebAPI / Device APIs
http://docs.webplatform.org/wiki/apis
WebAPI / Device APIs
www.w3.org/2009/dap/
WebAPI / Device APIs
www.w3.org/2009/dap/wiki/ImplementationStatus
Chris Mills
Marcos Lin
www.francesco.iovine.name
f.iovine@gmail.com
@franciov
Credits:
Photos
http://www.flickr.com/photos/petereed/3256701422
http://www.flickr.com/photos/vividbreeze/480057824
You are here - OpenStreetMap and Google Maps
You are here - OpenStreetMap and Google Maps
You are here - OpenStreetMap and Google Maps
You are here - OpenStreetMap and Google Maps
You are here - OpenStreetMap and Google Maps
You are here - OpenStreetMap and Google Maps
Upcoming SlideShare
Loading in...5
×

You are here - OpenStreetMap and Google Maps

762

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
762
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

Transcript of "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

×