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).
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
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
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.
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
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
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
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
parameter watch ID parameter clearWatch(watchID); watchID watchID watchID watchID ID returned by geolocation.watchPosition ID returned by geolocation.watchPosition
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
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
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
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
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
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
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
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
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
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
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
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
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...
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>
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
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
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
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
– 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
– 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/
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
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);
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
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
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
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
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);
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
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);
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.
• 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
• 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
• 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
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
returns: returns: • a DistanceMatrixResponse object • a DistanceMatrixStatus object These are passed to the callback function you specified in the request
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
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
iivanoo
nagisa53
arkw
kazzpapa3
ryokotmng
raspython3
moznion
nihonbuson
nwiizo
hryushm
ry0y4n
yunosukey
slsops
morganepeng
addyosmani
reverentgeek
tammyeverts
holman
aleyda
akosma
mraible
orderedlist
jacobian
malarkey
stephaniewalter
![Geolocation Geolocation & Mapping Ivano Malavolta Ivano Malavolta [email protected] http://www.di.univaq.it/malavolta](https://files.speakerdeck.com/presentations/4fd0be2b3bb27c001f01f2fc/slide_0.jpg){kind=link}
![getCurrentPosition It returns the device's current position getCurrentPosition(win, [fail], [options]);](https://files.speakerdeck.com/presentations/4fd0be2b3bb27c001f01f2fc/slide_9.jpg){kind=link}
![Polylines Options • path[] – array of LatLng, one for](https://files.speakerdeck.com/presentations/4fd0be2b3bb27c001f01f2fc/slide_43.jpg){kind=link}
