Mobile applications Development - Lecture 16

Geolocation
Mapping
GMaps API v3

This presentation has been developed in the context of the Mobile Applications Development course at the Computer Science Department of the University of L’Aquila (Italy).

http://www.di.univaq.it/malavolta

Transcript

1. Geolocation Geolocation & Mapping Ivano Malavolta Ivano Malavolta ivano.malavolta@univaq.it http://www.di.univaq.it/malavolta
2. Roadmap • Introduction • Geolocation • Geolocation • Google Maps Services* * In this lecture we refer to Google Maps Services only because of space limitations. Other services, like Yahoo! Place Finder, can be used as valid alternatives
3. Geolocation Geolocation Geolocation Geolocation Geolocation is the identification of the real-world geographic location of an object, like • mobile phone • Internet-connected computer terminal • Internet-connected computer terminal Geolocation may refer to the practice of assessing the location, or to the actual assessed location
4. Mapping Mapping Mapping Mapping Mapping usually refers to map-making and often used instead of cartography
5. Geolocation VS Mapping Geolocation Geolocation Geolocation Geolocation refers to geospatial data collection and manipulation data collection and manipulation ex. LatLon calculations, geocoding, etc. Mapping Mapping Mapping Mapping refers to the activity of creating a map through some creating a map through some cartographic works ex. maps, layers, markers, routes, etc.
6. Roadmap • Introduction • Geolocation • Geolocation • Google Maps Services* * In this lecture we refer to Google Maps Services only because of their high understandability and stability. Other services, like Yahoo! Place Finder, can be used as valid alternatives
7. Geolocation navigator.geolocation Provides access for capturing location information for the device, like: • latitude latitude latitude latitude • longitude longitude longitude longitude • Speed Speed Speed Speed
8. Geolocation The API itself is agnostic of the underlying location information sources information sources Common sources of location information include • Global Positioning System (GPS) Global Positioning System (GPS) Global Positioning System (GPS) Global Positioning System (GPS) • location info from IP address, RFID, location info from IP address, RFID, location info from IP address, RFID, location info from IP address, RFID, WiFi,GSM WiFi,GSM WiFi,GSM WiFi,GSM cell IDs, etc. cell IDs, etc. cell IDs, etc. cell IDs, etc. cell IDs, etc. cell IDs, etc. cell IDs, etc. cell IDs, etc. No guarantee is given that the API returns the device's actual location
9. Geolocation Methods The geolocation object provides 3 methods: • geolocation.getCurrentPosition geolocation.getCurrentPosition geolocation.getCurrentPosition geolocation.getCurrentPosition • geolocation.watchPosition geolocation.watchPosition geolocation.watchPosition geolocation.watchPosition • geolocation.clearWatch geolocation.clearWatch geolocation.clearWatch geolocation.clearWatch
10. getCurrentPosition It returns the device's current position getCurrentPosition(win, [fail], [options]); win win win win callback function with a Position Position Position Position parameter fail fail fail fail error callback options options options options geolocation options
11. watchPosition It gets the device's position when a change in position has been detected been detected var id = watchPosition(win, [fail], [options]); win win win win callback function with a Position Position Position Position parameter callback function with a Position Position Position Position parameter fail fail fail fail error callback options options options options geolocation options
12. clearWatch Stop watching the Geolocation referenced by the watch ID parameter watch ID parameter clearWatch(watchID); watchID watchID watchID watchID ID returned by geolocation.watchPosition ID returned by geolocation.watchPosition
13. Options • frequency frequency frequency frequency (Number) – How often to retrieve the position in milliseconds – How often to retrieve the position in milliseconds • enableHighAccuracy enableHighAccuracy enableHighAccuracy enableHighAccuracy (Boolean) – Receive the best possible results • timeout timeout timeout timeout (Number) – The maximum length of time (msec) that is allowed to pass from the call until the corresponding callback is invoked from the call until the corresponding callback is invoked • maximumAge maximumAge maximumAge maximumAge (Number) – Accept a cached position whose age is no greater than the specified time in milliseconds
14. The Position object Contains the data created by the geolocation API It is passed as argument to the success callbacks of getCurrentPosition and watchPosition Properties: Properties: Properties: Properties: coords coords coords coords: :: : A set of geographic Coordinates timestamp: timestamp: timestamp: timestamp: Creation timestamp in milliseconds seconds in iOS
15. The Coordinates object A set of properties that describe the geographic A set of properties that describe the geographic coordinates of a position The Coordinates object is created and populated by Cordova, and attached to the Position object
16. The Coordinates object Properties: Properties: Properties: Properties: • latitude latitude latitude latitude (Number) – Latitude in decimal degrees • longitude longitude longitude longitude (Number) – Longitude in decimal degrees • accuracy accuracy accuracy accuracy (Number) – Accuracy level of the latitude and longitude coordinates in meters http://bit.ly/Ln6AtM
17. The Coordinates object • altitude altitude altitude altitude (Number) – Height of the position in meters above the ellipsoid null in Android – Height of the position in meters above the ellipsoid • altitudeAccuracy altitudeAccuracy altitudeAccuracy altitudeAccuracy (Number) – Accuracy level of the altitude coordinate in meters http://bit.ly/Ln7V3H
18. The Coordinates object • heading* heading* heading* heading* (Number) – Direction of travel, specified in degrees counting – Direction of travel, specified in degrees counting clockwise relative to the true north • speed speed speed speed (Number) – Current ground speed of the device, specified in meters per second The Compass API in Cordova is exclusively dedicated to the http://bit.ly/LnanXV exclusively dedicated to the heading property
19. Position Error Encapsulates the error code resulting from a failed position capture operation position capture operation It contains a pre pre pre pre- - - -defined error code defined error code defined error code defined error code PositionError.PERMISSION_DENIED PositionError.POSITION_UNAVAILABLE PositionError.POSITION_UNAVAILABLE PositionError.TIMEOUT
20. Example var options = { maximumAge: 3000, timeout: 5000, enableHighAccuracy: true }; navigator.geolocation.watchPosition(win, fail, options); function win(pos) { var el = ‘<div>Latitude: ‘ + pos.coords.latitude + '</div>'); el += ‘<div>Longitude: ‘ + pos.coords.longitude + '</div>'); el += ‘<div>timestamp: ‘ + pos.timestamp + '</div>'); $(‘#block’).html(el); } function fail(err) { console.log(err.code); }
21. Roadmap • Introduction • Geolocation • Geolocation • Google Maps Services* * In this lecture we refer to Google Maps Services only because of their high understandability and stability. Other services, like Yahoo! Place Finder, can be used as valid alternatives
22. Google Maps API The Google Maps Javascript API lets you embed Google Maps in your app Maps in your app The latest version (v3) of this API is especially designed to be faster faster faster faster and more applicable to mobile mobile mobile mobile devices devices devices devices http://www.cibando.com
23. Goole Maps API The API provides a number of utilities utilities utilities utilities for manipulating maps and adding content adding content adding content adding content to the map through a maps and adding content adding content adding content adding content to the map through a variety of services You can see it like a way to programmatically manage maps on http://maps.google.com
24. GMaps Basics google.maps.Map This object represents a GMaps map it will contain the maps along with all the other elements, like markers, polygons, etc.
25. GMaps Basics Here is its constructor: google.maps.Map(htmlElement, options); • htmlElement htmlElement htmlElement htmlElement – a reference to a HTML element where you want the map to be inserted map to be inserted • for example <div id=“map”></div> • options options options options – an object literal containing a set of properties
26. GMaps Basics The options parameter may have these properties: • center center center center (google.maps.LatLng) – the center of the map • zoom zoom zoom zoom (Number) – the initial zoom-level of the map • mapTypeId mapTypeId mapTypeId mapTypeId (google.maps.MapTypeId) – what kind of map type that would initially be used – The most common type is google.maps.MapTypeId.ROADMAP
27. GMaps Basics • draggable draggable draggable draggable (boolean) – if false, prevents the map from being dragged – if false, prevents the map from being dragged • minZoom minZoom minZoom minZoom (Number) – the minimum zoom level which will be displayed on the map • maxZoom maxZoom maxZoom maxZoom (Number) – the maximum zoom level which will be displayed on the map • zoomControl zoomControl zoomControl zoomControl (boolean) • zoomControl zoomControl zoomControl zoomControl (boolean) – if false, hides the control to zoom in the map • etc...
28. The LatLng object It is a point in geographical coordinates: • latitude • latitude • longitude ex. new google.maps.LatLng(57.8, 14.0);
29. The LatLngBounds object It represents a rectangle in geographical coordinates • south-west • south-west • north-east ex. new google.maps.LatLngBounds( new google.maps.LatLng(57.8, 14.0), new google.maps.LatLng(57.8, 14.0) ); contains(pt), intersect(bounds), getCenter(), union(bounds), etc.
30. Map Types You must specifically set an initial map type at this time as well time as well mapTypeId: google.maps.MapTypeId.ROADMAP Supported types: • • ROADMAP • SATELLITE • HYBRID • TERRAIN
31. Example // in your JS file var options = { var options = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById(“map”), options); options); // somewhere in your HTML templates <div id=“map”></div>
32. GMaps Events There are 2 types of events: • User events – are propagated from the DOM to the Google Maps API – for example click • MVC state change notifications • MVC state change notifications – reflect changes in Maps API objects and are named using a property_changed convention – for example the API will fire a zoom_changed event on a map when the map's zoom level changes
33. Map Event Listeners You register for event notifications using the addListener() event handler addListener() event handler google.maps.event.addListener(obj, eventname, callback) • obj obj obj obj: the object on which the event can occur – ex. the whole map, a marker, etc. • eventname eventname eventname eventname: an event to listen for – ex. “click”, “center_changed”, “zoom_changed”, etc. – every objects can respond to different types of events • callback callback callback callback: function to call when the specified event occurs
34. DOM Object Events It allows you to capture events occurred on elements within the DOM within the DOM addDOMListener(obj, eventname, callback) It is similar to addListener, but here obj can be any element within the DOM element within the DOM
35. Example var map = new google.maps.Map(document.getElementById(“map”), opt); google.maps.event.addListener(map, 'click', function(event) { var marker = new google.maps.Marker({ position: event.latLng, map: map map: map }); map.setCenter(marker.getPosition()); } );
36. GMaps Overlays Overlays are objects that you “add” on the map Overlays are objects that you “add” on the map Overlays are objects that you “add” on the map Overlays are objects that you “add” on the map, like • points, • points, • lines, • areas, • collection of other objects They are tied to latitude/longitude coordinates so they move when you drag or zoom the map http://bit.ly/Lztdac
37. Types of Overlays in GMaps • Marker Marker Marker Marker – represent single locations on the map http://bit.ly/LztJoV – represent single locations on the map – can be represented also by an icon • Polyline Polyline Polyline Polyline – an ordered sequence of locations – represent lines on the map – represent lines on the map In this lecture we will focus on markers & polylines only
38. Types of Overlays in GMaps • Polygon Polygon Polygon Polygon – an ordered sequence of locations – an ordered sequence of locations – define a region on the map • Map Map Map Map Types Types Types Types – represent map layers – can replace base map tiles – can replace base map tiles – can be displayed on top of base map tiles http://bit.ly/LztFoV http://www.mapofthedead.com/
39. Types of Overlays in GMaps • Info Info Info Info Window Window Window Window – displays content within a popup – displays content within a popup balloon on top of a map – linked to a specific location • Custom Custom Custom Custom Overlay Overlay Overlay Overlay – any DOM element that be – any DOM element that be positioned on the map http://bit.ly/LztFoV
40. Markers Markers identify locations on the map Markers are designed to be interactive Markers are designed to be interactive you can attach event listeners to them ex. ex. marker = new google.maps.Marker({ // options }); google.maps.event.addListener(marker, 'click', callback);
41. Marker Options The google.maps.Marker constructor takes a single object literal specifying the initial properties of the object literal specifying the initial properties of the marker • position position position position – LatLng identifying the initial location of the marker • map map map map • map map map map – the Map object on which to place the marker – You can add the marker later by calling setMap() method – You can remove a marker by calling setMap() with null
42. Marker Options • animation animation animation animation – google.maps.Animation.DROP – google.maps.Animation.DROP – google.maps.Animation.BOUNCE You may initiate an animation on an existing marker by calling setAnimation() on the marker object • draggable draggable draggable draggable – makes the marker draggable on the map – makes the marker draggable on the map • icon icon icon icon – used to set a custom icon for the marker – it defines the URL of an image to be used as icon – The Google Maps API will size the icon automatically
43. Polylines A Polyline object consists of an array of LatLngs It creates a series of line segments that connect those locations in an ordered sequence Similarly to Marker, the constructor of Polyline takes an object literal containing the options takes an object literal containing the options Also Polyline can react to user events
44. Polylines Options • path[] – array of LatLng, one for each point of the polyline – array of LatLng, one for each point of the polyline • strokeColor – color of the lines in CSS syntax • strokeOpacity – opacity of the lines as a decimal number between 0 and 1 • strokeWeight • strokeWeight – the weight of the line's stroke in pixels • editable – boolean, specifies whether users can modify it or not
45. Example var map; // the map object, initialization omitted here var coords = [ new google.maps.LatLng(37.772323, -122.214897), new google.maps.LatLng(21.291982, -157.821856), new google.maps.LatLng(-18.142599, 178.431), new google.maps.LatLng(-27.46758, 153.027892) ]; var polyline = new google.maps.Polyline({ var polyline = new google.maps.Polyline({ path: coords, strokeColor: "#00FF00", strokeOpacity: 1.0, strokeWeight: 1 }); flightPath.setMap(map);
46. GMaps Services 3 are the main services provided by GMaps: • Directions Directions Directions Directions • Distance Distance Distance Distance Matrix Matrix Matrix Matrix • Geocoding Geocoding Geocoding Geocoding
47. Directions You can calculate directions (using a variety of methods of transportation) by using the object google.maps.DirectionsService This object communicates with Google Maps which receives direction requests and returns computed results You can 1. manage these directions results directly 2. use the DirectionsRenderer object to render them
48. Direction Requests 1. create an object of type DirectionsService 2. create a DirectionsRequest object literal containing the input terms 2. create a DirectionsRequest object literal containing the input terms 3. call DirectionsService.route() to initiate a request to the Directions service 4. manage the results via a callback function manageRoute var dirService = new google.maps.DirectionsService(); var dirService = new google.maps.DirectionsService(); var request = { origin: ”…”, destination: “…”, travelMode: google.maps.TravelMode.DRIVING }; dirService.route(request, manageRoute);
49. Directions Request Properties
50. Directions Results When sending a directions request to the DirectionsService, you receive a response consisting of you receive a response consisting of 1. a DirectionsResult DirectionsResult DirectionsResult DirectionsResult object – contains an array of DirectionsRoute object, each of them representing a route from the origin to destination 2. a status code status code status code status code 2. a status code status code status code status code – OK, NOT_FOUND, ZERO_RESULTS, INVALID_REQUEST, etc.
51. Example of Route destination origin waypoints steps http://goo.gl/maps/ZK4H legs
52. Routes It is an object literal with the following fields: • legs legs legs legs[]: array of DirectionsLeg objects • waypoint_order waypoint_order waypoint_order waypoint_order[]: indicates the order of waypoints • overview_path overview_path overview_path overview_path[]: array of LatLngs approximating the path of the resulting directions • bounds bounds bounds bounds: LatLngBounds containing the route • bounds bounds bounds bounds: LatLngBounds containing the route • copyrights copyrights copyrights copyrights: text • warnings warnings warnings warnings: text
53. Legs It is an object literal with the following fields: • steps steps steps steps[]: array of DirectionsStep objects • distance distance distance distance: total distance covered by this leg • duration duration duration duration: total duration of the leg • start_location start_location start_location start_location: the origin of the leg as LatLng • end_location end_location end_location end_location: the destination of the leg as LatLng • end_location end_location end_location end_location: the destination of the leg as LatLng • start_address start_address start_address start_address: the origin of the leg as text • end_address end_address end_address end_address: the destination of the leg as text
54. Steps It is an object literal with the following fields: • instructions instructions instructions instructions: instructions for this step within as text • distance distance distance distance: total distance covered by this step • duration duration duration duration: total duration of the step • start_location start_location start_location start_location: the origin of the leg as LatLng • end_location end_location end_location end_location: the destination of the leg as LatLng • end_location end_location end_location end_location: the destination of the leg as LatLng
55. Example http://bit.ly/KtJrUM
56. Distance Matrix It is a service to compute 1. 1. 1. 1. travel distance travel distance travel distance travel distance 1. 1. 1. 1. travel distance travel distance travel distance travel distance 2. 2. 2. 2. journey duration journey duration journey duration journey duration between multiple origins and destinations This service does not return detailed route information This service does not return detailed route information you need the Directions Service for these
57. Distance Requests google.maps.DistanceMatrixService .getDistanceMatrix(options, callback) .getDistanceMatrix(options, callback) where • options options options options – object literals containing origin, destination, travel modes, ... • callback callback callback callback • callback callback callback callback – the function executed upon response
58. Distance Request Options • origins origins origins origins – array containing one or more address strings and/or LatLng • destinations destinations destinations destinations • destinations destinations destinations destinations – array containing one or more address strings and/or LatLng • travelMode travelMode travelMode travelMode – google.maps.TravelMode.DRIVING – google.maps.TravelMode.WALKING – google.maps.TravelMode.BICYCLING • unitSystem unitSystem unitSystem unitSystem – google.maps.UnitSystem.METRIC – google.maps.UnitSystem.IMPERIAL • avoidHighways avoidHighways avoidHighways avoidHighways (boolean) • avoidTolls avoidTolls avoidTolls avoidTolls (boolean)
59. Distance Responses A successful call to the Distance Matrix service returns: returns: • a DistanceMatrixResponse object • a DistanceMatrixStatus object These are passed to the callback function you specified in the request
60. DistanceMatrixResponse It is an object containing the following properties: • originAddresses originAddresses originAddresses originAddresses – array containing the locations passed in the origins field • destinationAddresses destinationAddresses destinationAddresses destinationAddresses – array containing the locations passed in the destinations field • rows rows rows rows – array of DistanceMatrixResponseRow objects, with each row corresponding to an origin corresponding to an origin • elements elements elements elements – are children of rows, and correspond to a pairing of the row's origin with each destination – They contain status, distance, and duration information for each origin/destination pair
61. Example var origin = “L’Aquila, Italy"; var destination = “London, England"; var service = new google.maps.DistanceMatrixService(); service.getDistanceMatrix({ origins: [origin], destinations: [destination], travelMode: google.maps.TravelMode.DRIVING, avoidHighways: false, avoidTolls: false }, callback); }, callback); function callback(response, status) { if (status == google.maps.DistanceMatrixStatus.OK) { var t = response.rows[0].elements[0].distance.text; alert(t); } }
62. Geocoding It is the process of converting converting converting converting addresses into geographical coordinates geographical coordinates ex. “via Vetoio 1, L’Aquila” 42.362319,13.368514 A geocoder may return more than a result A geocoder may return more than a result You can also perform the inverse conversion reverse reverse reverse reverse geocoding geocoding geocoding geocoding
63. Geocoding Requests var geocoder = google.maps.Geocoder(); geocoder.geocode(options, callback); geocoder.geocode(options, callback); where • options options options options (object literal) – address (String) geocoding – latLng (LatLng) reverse geocoding – latLng (LatLng) reverse geocoding – bounds (LatLngBounds) – region (String) • see http://www.iana.org/assignments/language-subtag-registry • callback callback callback callback – the function executed upon response
64. Geocoding Responses They are passed to the callback function as a GeocoderResults object
65. Example geocoder = new google.maps.Geocoder(); var address = “via Vetoio 1, L’Aquila”; geocoder.geocode( { 'address': address}, callback); function callback(results, status) { if (status == google.maps.GeocoderStatus.OK) { for(result in results) { console.log(result.geometry.location); } } else { console.log(status); } }
66. What’s more? • Controls Controls Controls Controls – UI elements to allow user interaction with the map – UI elements to allow user interaction with the map – zoom, Street View, scale, map type • Layers Layers Layers Layers – GeoRSS, KML, Fusion Tables, etc. • Map Map Map Map Types Types Types Types & & & & Styles Styles Styles Styles (see http://bit.ly/JEA6Nu) – custom styles, image overlays, etc. – custom styles, image overlays, etc. • StreetView StreetView StreetView StreetView Services Services Services Services • Drawing Drawing Drawing Drawing Library Library Library Library – drawing tools, geometry, etc.
67. References https://developers.google.com/maps/documentation/javascript/