Geolocation Geolocation & Mapping Ivano Malavolta Ivano Malavolta [email protected] http://www.di.univaq.it/malavolta 

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 

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 

Mapping Mapping Mapping Mapping Mapping usually refers to map-making and often used instead of cartography 

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. 

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 

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 

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 

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 

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 

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 

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 

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 

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 

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 

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 

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 

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 

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 

Example var options = { maximumAge: 3000, timeout: 5000, enableHighAccuracy: true }; navigator.geolocation.watchPosition(win, fail, options); function win(pos) { var el = ‘'); el += ‘'); el += ‘'); $(‘#block’).html(el); } function fail(err) { console.log(err.code); } 

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 

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 

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 

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. 

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 • options options options options – an object literal containing a set of properties 

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 

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

The LatLng object It is a point in geographical coordinates: • latitude • latitude • longitude ex. new google.maps.LatLng(57.8, 14.0); 

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. 

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 

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 

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 

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 

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 

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()); } ); 

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 

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 

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/ 

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 

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); 

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 

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 

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 

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 

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); 

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 

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 

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); 

Directions Request Properties 

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. 

Example of Route destination origin waypoints steps http://goo.gl/maps/ZK4H legs 

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 

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 

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 

Example http://bit.ly/KtJrUM 

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 

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 

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) 

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 

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 

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); } } 

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 

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 

Geocoding Responses They are passed to the callback function as a GeocoderResults object 

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); } } 

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. 

References https://developers.google.com/maps/documentation/javascript/