Your SlideShare is downloading. ×
Geolocation and Mapping
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Geolocation and Mapping


Published on

Mobile applications Development - Lecture 16 …

Mobile applications Development - Lecture 16

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

Published in: Education, Technology, Business

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Geolocation & Mapping Ivano Malavolta ivano.malavolta@univaq.it
  • 2. Roadmap• Introduction• 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. GeolocationGeolocation is the identification of the real-world geographic location of an object, like• mobile phone• Internet-connected computer terminalGeolocation may refer to the practice of assessing the location, or to the actual assessed location
  • 4. MappingMapping usually refers to map-making and often used instead of cartography
  • 5. Geolocation VS MappingGeolocation refers to geospatialdata collection and manipulationex. LatLon calculations, geocoding, etc.Mapping refers to the activity ofcreating a map through somecartographic worksex. maps, layers, markers, routes, etc.
  • 6. Roadmap• Introduction• 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.geolocationProvides access for capturing location information for the device, like:• latitude• longitude• Speed
  • 8. GeolocationThe API itself is agnostic of the underlying location information sourcesCommon sources of location information include• Global Positioning System (GPS)• location info from IP address, RFID, WiFi,GSM cell IDs, etc.No guarantee is given that the API returns the devices actual location
  • 9. Geolocation MethodsThe geolocation object provides 3 methods:• geolocation.getCurrentPosition• geolocation.watchPosition• geolocation.clearWatch
  • 10. getCurrentPositionIt returns the devices current positiongetCurrentPosition(win, [fail], [options]);win callback function with a Position parameterfail error callbackoptions geolocation options
  • 11. watchPositionIt gets the devices position when a change in position has been detectedvar id = watchPosition(win, [fail], [options]);win callback function with a Position parameterfail error callbackoptions geolocation options
  • 12. clearWatchStop watching the Geolocation referenced by the watch ID parameterclearWatch(watchID);watchID ID returned by geolocation.watchPosition
  • 13. Options• frequency (Number) – How often to retrieve the position in milliseconds• enableHighAccuracy (Boolean) – Receive the best possible results• timeout (Number) – The maximum length of time (msec) that is allowed to pass from the call until the corresponding callback is invoked• maximumAge (Number) – Accept a cached position whose age is no greater than the specified time in milliseconds
  • 14. The Position objectContains the data created by the geolocation APIIt is passed as argument to the success callbacks of getCurrentPosition and watchPositionProperties:coords:coords: A set of geographic Coordinates seconds in iOStimestamp: Creation timestamp in milliseconds
  • 15. The Coordinates objectA set of properties that describe the geographic coordinates of a positionThe Coordinates object is created and populated by Cordova, and attached to the Position object
  • 16. The Coordinates object Properties: • latitude (Number) – Latitude in decimal degrees • longitude (Number) – Longitude in decimal degrees • accuracy (Number) – Accuracy level of the latitude and longitude coordinates in meters
  • 17. The Coordinates object null in Android • altitude (Number) – Height of the position in meters above the ellipsoid • altitudeAccuracy (Number) – Accuracy level of the altitude coordinate in meters
  • 18. The Coordinates object • heading* (Number) – Direction of travel, specified in degrees counting clockwise relative to the true north • speed (Number) – Current ground speed of the device, specified in meters per second The Compass API in Cordova is exclusively dedicated to the heading property
  • 19. Position ErrorEncapsulates the error code resulting from a failed position capture operationIt contains a pre-defined error code pre- PositionError.PERMISSION_DENIED PositionError.POSITION_UNAVAILABLE PositionError.TIMEOUT
  • 20. Examplevar 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• 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 The latest version (v3) of this API is especially designed to be faster and more applicable to mobile devices
  • 23. Goole Maps APIThe API provides a number of utilities for manipulating maps and adding content to the map through a variety of servicesYou can see it like a way to programmatically manage maps on
  • 24. GMaps Basics google.maps.MapThis object represents a GMaps mapit will contain the maps along with all the other elements, like markers, polygons, etc.
  • 25. GMaps BasicsHere is its constructor: google.maps.Map(htmlElement, options);• htmlElement – a reference to a HTML element where you want the map to be inserted • for example <div id=“map”></div>• options – an object literal containing a set of properties
  • 26. GMaps BasicsThe options parameter may have these properties:• center (google.maps.LatLng) – the center of the map• zoom (Number) – the initial zoom-level of the map• 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 (boolean) – if false, prevents the map from being dragged• minZoom (Number) – the minimum zoom level which will be displayed on the map• maxZoom (Number) – the maximum zoom level which will be displayed on the map• zoomControl (boolean) – if false, hides the control to zoom in the map• etc...
  • 28. The LatLng objectIt is a point in geographical coordinates:• latitude• longitudeex. new google.maps.LatLng(57.8, 14.0);
  • 29. The LatLngBounds objectIt represents a rectangle in geographical coordinates• south-west• north-eastex. 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 TypesYou must specifically set an initial map type at this time as wellmapTypeId: google.maps.MapTypeId.ROADMAPSupported types:• ROADMAP• SATELLITE• HYBRID• TERRAIN
  • 31. Example// in your JS filevar 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);// somewhere in your HTML templates<div id=“map”></div>
  • 32. GMaps EventsThere are 2 types of events:• User events – are propagated from the DOM to the Google Maps API – for example click• 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 maps zoom level changes
  • 33. Map Event ListenersYou register for event notifications using the addListener() event handlergoogle.maps.event.addListener(obj, eventname, callback)• obj the object on which the event can occur obj: – ex. the whole map, a marker, etc.• eventname an event to listen for eventname: – ex. “click”, “center_changed”, “zoom_changed”, etc. – every objects can respond to different types of events• callback function to call when the specified event callback: occurs
  • 34. DOM Object EventsIt allows you to capture events occurred on elements within the DOMaddDOMListener(obj, eventname, callback)It is similar to addListener, but here obj can be any element within the DOM
  • 35. Examplevar 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.setCenter(marker.getPosition()); });
  • 36. GMaps Overlays Overlays are objects that you “add” on the map like map, • points, • lines, • areas, • collection of other objects They are tied to latitude/longitude coordinates so they move when you drag or zoom the map
  • 37. Types of Overlays in GMaps • Marker – represent single locations on the map – can be represented also by an icon • Polyline – an ordered sequence of locations – represent lines on the map In this lecture we will focus on markers & polylines only
  • 38. Types of Overlays in GMaps • Polygon – an ordered sequence of locations – define a region on the map • Map Types – represent map layers – can replace base map tiles – can be displayed on top of base map tiles
  • 39. Types of Overlays in GMaps • Info Window – displays content within a popup balloon on top of a map – linked to a specific location • Custom Overlay – any DOM element that be positioned on the map
  • 40. MarkersMarkers identify locations on the mapMarkers are designed to be interactive you can attach event listeners to themex.marker = new google.maps.Marker({ // options });google.maps.event.addListener(marker, click, callback);
  • 41. Marker OptionsThe google.maps.Marker constructor takes a single object literal specifying the initial properties of the marker• position – LatLng identifying the initial location of the marker• 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 – 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 – makes the marker draggable on the map• 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. PolylinesA Polyline object consists of an array of LatLngsIt creates a series of line segments that connect those locations in an ordered sequenceSimilarly to Marker, the constructor of Polyline takes an object literal containing the optionsAlso Polyline can react to user events
  • 44. Polylines Options• path[] – 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 – the weight of the lines stroke in pixels• editable – boolean, specifies whether users can modify it or not
  • 45. Examplevar map; // the map object, initialization omitted herevar 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({ path: coords, strokeColor: "#00FF00", strokeOpacity: 1.0, strokeWeight: 1});flightPath.setMap(map);
  • 46. GMaps Services3 are the main services provided by GMaps:• Directions• Distance Matrix• Geocoding
  • 47. DirectionsYou can calculate directions (using a variety of methods of transportation) by using the object google.maps.DirectionsServiceThis object communicates with Google Maps which receives direction requests and returns computed resultsYou can1. manage these directions results directly2. use the DirectionsRenderer object to render them
  • 48. Direction Requests1. create an object of type DirectionsService2. create a DirectionsRequest object literal containing the input terms3. call DirectionsService.route() to initiate a request to the Directions service4. manage the results via a callback function manageRoutevar dirService = new google.maps.DirectionsService();var request = { origin: ”…”, destination: “…”, travelMode: google.maps.TravelMode.DRIVING};dirService.route(request, manageRoute);
  • 49. Directions Request Properties
  • 50. Directions ResultsWhen sending a directions request to the DirectionsService, you receive a response consisting of1. a DirectionsResult object – contains an array of DirectionsRoute object, each of them representing a route from the origin to destination2. a status code – OK, NOT_FOUND, ZERO_RESULTS, INVALID_REQUEST, etc.
  • 51. Example of Route destination waypoints origin steps legs
  • 52. RoutesIt is an object literal with the following fields:• legs array of DirectionsLeg objects legs[]:• waypoint_order indicates the order of waypoints waypoint_order[]:• overview_path[]: array of LatLngs approximating the overview_path path of the resulting directions• bounds LatLngBounds containing the route bounds:• copyrights: text copyrights• warnings text warnings:
  • 53. LegsIt is an object literal with the following fields:• steps[]: steps array of DirectionsStep objects• distance: distance total distance covered by this leg• duration: duration total duration of the leg• start_location: start_location the origin of the leg as LatLng• end_location: end_location the destination of the leg as LatLng• start_address: start_address the origin of the leg as text• end_address: the destination of the leg as text end_address
  • 54. StepsIt is an object literal with the following fields:• instructions: instructions instructions for this step within as text• distance: distance total distance covered by this step• duration: duration total duration of the step• start_location: start_location the origin of the leg as LatLng• end_location: end_location the destination of the leg as LatLng
  • 55. Example
  • 56. Distance MatrixIt is a service to compute1. travel distance2. journey durationbetween multiple origins and destinationsThis service does not return detailed route information you need the Directions Service for these
  • 57. Distance Requestsgoogle.maps.DistanceMatrixService .getDistanceMatrix(options, callback)where• options – object literals containing origin, destination, travel modes, ...• callback – the function executed upon response
  • 58. Distance Request Options• origins – array containing one or more address strings and/or LatLng• destinations – array containing one or more address strings and/or LatLng• travelMode – google.maps.TravelMode.DRIVING – google.maps.TravelMode.WALKING – google.maps.TravelMode.BICYCLING• unitSystem – google.maps.UnitSystem.METRIC – google.maps.UnitSystem.IMPERIAL• avoidHighways (boolean)• avoidTolls (boolean)
  • 59. Distance ResponsesA successful call to the Distance Matrix service returns:• a DistanceMatrixResponse object• a DistanceMatrixStatus objectThese are passed to the callback function you specified in the request
  • 60. DistanceMatrixResponseIt is an object containing the following properties:• originAddresses – array containing the locations passed in the origins field• destinationAddresses – array containing the locations passed in the destinations field• rows – array of DistanceMatrixResponseRow objects, with each row corresponding to an origin• elements – are children of rows, and correspond to a pairing of the rows origin with each destination – They contain status, distance, and duration information for each origin/destination pair
  • 61. Examplevar 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);function callback(response, status) { if (status == google.maps.DistanceMatrixStatus.OK) { var t = response.rows[0].elements[0].distance.text; alert(t); }}
  • 62. GeocodingIt is the process of converting addresses into geographical coordinatesex. “via Vetoio 1, L’Aquila” 42.362319,13.368514A geocoder may return more than a resultYou can also perform the inverse conversion reverse geocoding
  • 63. Geocoding Requestsvar geocoder = google.maps.Geocoder();geocoder.geocode(options, callback);where• options (object literal) – address (String) geocoding – latLng (LatLng) reverse geocoding – bounds (LatLngBounds) – region (String) • see• callback – the function executed upon response
  • 64. Geocoding ResponsesThey are passed to the callback function as a GeocoderResults object
  • 65. Examplegeocoder = 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 – UI elements to allow user interaction with the map – zoom, Street View, scale, map type• Layers – GeoRSS, KML, Fusion Tables, etc.• Map Types & Styles (see – custom styles, image overlays, etc.• StreetView Services• Drawing Library – drawing tools, geometry, etc.
  • 67. References