This presentation has been developed in the context of the Mobile Applications Development course, DISIM, University of L'Aquila (Italy), Spring 2016. http://www.ivanomalavolta.com

1. Gran Sasso Science Institute
Ivano Malavolta
Geolocation and mapping

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, Open Street Maps, etc. can be used as valid
alternatives

3. Geolocation
Geolocationis the identificationofthe real-worldgeographic
locationof an object, like:
• mobile phone
• Internet-connected computerterminal
Geolocationmay refer to the practiceof assessing the location,
or to the actualassessed location

4. Mapping
Mapping usually refers to map-making and often used instead
of cartography
In Cordovayou can use anyJS libraryfor maps:
GMaps, Leaflet,Bing Maps,
Cordovaplugins for nativemaps

5. Geolocation VS Mapping
Geolocationrefers to geospatial
data collectionand manipulation
ex. LatLon calculations,geocoding, etc.
Mapping refers to the activityof
creatinga map through some
cartographicworks
ex. maps, layers,markers, routes, etc.

6. 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, Open Street Maps, etc. can be used as valid
alternatives

7. Geolocation
navigator.geolocation
Provides access for capturing location information for the
device, like:
• latitude
• longitude
• speed
• …

8. Geolocation
The API itself is agnostic of the underlying locationinformation
sources
Common sources of locationinformationinclude
• Global Positioning System (GPS)
• locationinfo from IP address, RFID, WiFi,GSMcell IDs, etc.
No guarantee is given thatthe API returns the device's actual
location
This API is based on the W3C Geolocation API Specification,
and only executes on devices thatdon't alreadyprovide an
implementation

9. Geolocation Methods
The geolocation object provides 3 methods:
• geolocation.getCurrentPosition
• geolocation.watchPosition
• geolocation.clearWatch

10. getCurrentPosition
It returns the device's currentposition
getCurrentPosition(win, [fail], [options]);
win
callbackfunction witha Position parameter
fail
errorcallback
options
geolocation options

11. watchPosition
It gets the device's position when a change in position has been
detected
var watchID = watchPosition(win, [fail], [options]);
win
callbackfunction witha Position parameter
fail
errorcallback
options
geolocation options

12. clearWatch
Stop watching the Geolocation referenced by the watch ID
parameter
clearWatch(watchID);
watchID
ID returned by geolocation.watchPosition

13. Options
• enableHighAccuracy (Boolean)
– receive the best possible results (e.g., GPS)
– by default Cordovauses network-based methods
• timeout (Number)
– the maximum length of time (msec) thatis allowed to pass from
the call until the corresponding callback is invoked, otherwise the
error callback is called
• maximumAge (Number)
– accept a cached position whose age is not greater thanthe
specified time in milliseconds

14. The Position object
Contains the data createdby the geolocation API
It is passed as argument to the success callbacksof
getCurrentPosition and watchPosition
Properties:
• coords
– the geographic Coordinates
• timestamp
– creation timestampin milliseconds

15. 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
http://bit.ly/Ln6AtM

16. The Coordinates object
• altitude (Number)
– Height of the position in meters above the ellipsoid
• altitudeAccuracy (Number)
– Accuracy level of the altitudecoordinatein meters
http://bit.ly/Ln7V3H
notsupported in Android

17. The Coordinates object
• heading (Number)
– Direction of travel, specified in degrees counting clockwiserelativeto
the true north
• speed (Number)
– Current ground speed of the device, specified in meters per second
http://bit.ly/LnanXV
The Compass API in Cordova is
exclusively dedicated to the heading
property

18. Position Error
Encapsulates the error code resulting from a failed position
captureoperation
It contains a pre-defined errorcode
PositionError.PERMISSION_DENIED
PositionError.POSITION_UNAVAILABLE
PositionError.TIMEOUT

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

20. The compass API
navigator.compass
You can call 3 methods on it:
• getCurrentHeading
• watchHeading
• clearWatch

21. getCurrentHeading
getCurrentHeading(win, fail);
It detects the direction or heading thatthe device is pointed
from the top of the device
win
callbackfunction withan Heading parameter
fail
errorcallback

22. watchHeading
var watchID = watchHeading(win, fail, [options]);
It gets the device's heading at a regular interval
win
callbackfunction withan Heading parameter
fail
errorcallback
options
compass options

23. Options
• frequency (Number)
– How often to retrieve the compass heading in milliseconds
• filter(Number)
– in iOS the success callback of a watchHeading call can also be
called once the sensed heading values are greater than a given
filter
– the filter optionrepresents the change in degrees
required to initiatea watchHeading success callback
– when this value is set, frequency is ignored
iOS only

24. clearWatch
clearWatch(watchID);
Stop watchingthe heading of the device by referencing the
watchID parameter
watchID
ID returnedby heading.watchHeading

25. The CompassHeading object
Properties
• magneticHeading (Number)
– the heading in degrees from 0-359.99 ata singlemoment in time
• trueHeading (Number)
– The headingrelativeto the geographic North Pole
• headingAccuracy (Number)
– the deviation in degrees between the reported headingand the true
heading
• timestamp (Number)
– The time atwhich this headingwas determined in milliseconds

26. The CompassError object
Encapsulates the error code resulting from a failed heading
captureoperation
It contains a pre-defined errorcode
– CompassError.COMPASS_INTERNAL_ERR
– CompassError.COMPASS_NOT_SUPPORTED

27. Compass example
var options = { frequency: 2000 };
navigator.compass.watchHeading(win, fail, options);
function win(compass) {
console.log(compass.magneticHeading);
}
function fail(err) {
console.log(err.code);
}

28. 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, Open Street Maps, etc. can be used as valid
alternatives

29. Google Maps API
The Google Maps JavascriptAPI lets you embed Google Maps in
your app
The latest version (v3) of this API
is especially designed to be faster
and more applicableto mobile
devices
http://www.cibando.com

30. Google Maps API
The API provides a number of utilitiesfor manipulatingmaps
and adding content to the map through a varietyof services
You can see it like a way to programmaticallymanagemaps on
http://maps.google.com

31. GMaps Basics
google.maps.Map
This object represents a GMaps map
it will containthe maps along with allthe other elements, like
markers, polygons, etc.

32. GMaps Basics
Here is its constructor:
google.maps.Map(htmlElement, options);
• htmlElement
– a reference to a HTML element where you wantthe map to be
inserted
• for example <div id=“map”></div>
• options
– an objectliteral containinga set of properties

33. GMaps Basics
The options parametermay 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)
– whatkind of map type that would initially beused
– The mostcommon typeis google.maps.MapTypeId.ROADMAP

34. GMaps Basics
• draggable (boolean)
– if false, prevents the map from beingdragged
• minZoom (Number)
– the minimum zoom level which will be displayed on themap
• 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...

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

36. The LatLngBounds object
It represents a rectangle in geographicalcoordinates
• south-west
• north-east
var pt = 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.

37. Map Types
You must specificallyset an initialmap type atthis time as well
mapTypeId: google.maps.MapTypeId.ROADMAP
Supportedtypes:
• ROADMAP
• SATELLITE
• HYBRID
• TERRAIN

38. Example
// in your JS file
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);
// somewhere in your HTML templates
<div id=“map”></div>

39. GMaps Events
There are 2 types of events:
• User events
– are propagated from the DOM to the GoogleMaps API
– for example touchend
• MVC state change notifications
– reflect changes in Maps API objects and arenamed usinga
property_changedconvention
– for example the API will fire a zoom_changed event on a map when the
map's zoom level changes

40. Map Event Listeners
You register for event notificationsusing the addListener()
event handler
google.maps.event.addListener(obj, eventname, callback)
• obj: the object on which the eventcan occur
– ex. the wholemap, a marker, etc.
• eventname: an event to listen for
– ex. “click”, “center_changed”, “zoom_changed”, etc.
– every objects can respond to different types of events
• callback:functionto call when the specified event occurs

41. Example
var opt = {…};
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.setCenter(marker.getPosition());
}
);

42. GMaps Overlays
Overlaysare objects thatyou “add” on the map, like
• points,
• lines,
• areas,
• collectionof other objects
They are tied to latitude/longitudecoordinates
à so they move when you drag or zoom the map
http://bit.ly/Lztdac

43. 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
http://bit.ly/LztJoV

44. Types of Overlays in GMaps
• Polygon
– an ordered sequence of locations
– define a region on the map
• Map Types
– represent map layers
– can replacebase map tiles
– can be displayed on top of
basemap tiles
http://bit.ly/LztFoV
http://www.mapofthedead.com/

45. Types of Overlays in GMaps
• Info Window
– displays contentwithin a popup
balloon on top of a map
– linked to a specific location
• Custom Overlay
– any DOM element thatbe
positioned on the map
http://bit.ly/LztFoV

46. Markers
Markers identifylocations on the map
Markers are designed to be interactive
à you can attachevent listeners to them
ex.
marker = new google.maps.Marker({
// options
});
google.maps.event.addListener(marker, 'click', callback);

47. Marker Options
The google.maps.Marker constructortakes a single object literal
specifying the initialpropertiesof the marker
• position
– LatLng identifyingthe initial location ofthe marker
• map
– the Map object on which to placethe marker
– You can add the marker later by callingsetMap() method
– You can removea marker by callingsetMap()with null

48. Marker Options
• animation
– google.maps.Animation.DROP
– google.maps.Animation.BOUNCE
You may initiatean 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 URLof an image to be used as icon
– The Google Maps API will size the icon automatically

49. Polylines
A Polyline object consists of an arrayof LatLngs
It creates a series of line segments thatconnect those locations in
an ordered sequence
SimilarlytoMarker, the constructorof Polyline takes an
object literalcontainingthe options
Also Polyline can react to user events

50. Polylines Options
• path[]
– array of LatLng, onefor each pointof 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 line's stroke in pixels
• editable
– boolean, specifies whether users can modify it or not

51. 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({
path: coords,
strokeColor: "#00FF00",
strokeOpacity: 1.0,
strokeWeight: 1
});
polyline.setMap(map);

52. GMaps Services
3 are the main services provided by GMaps:
• Directions
• Distance Matrix
• Geocoding

53. Directions
You can calculatedirections (using a varietyof methods of
transportation)byusing the object
google.maps.DirectionsService
This object communicates with Google Maps which receives
directionrequests and returns computed results
You can
1. manage these directions results directly
2. use the DirectionsRenderer object to render them

54. Direction Requests
1. create an object of type DirectionsService
2. create a DirectionsRequest object literalcontainingthe
input terms
3. call DirectionsService.route()to initiatea request to
the Directions service
4. manage the results via a callbackfunction manageRoute
var dirService = new google.maps.DirectionsService();
var request = {
origin: ”…”,
destination: “…”,
travelMode: google.maps.TravelMode.DRIVING
};
dirService.route(request, manageRoute);

55. Directions Request Properties

56. Directions Results
When sending a directions request to the DirectionsService,
you receive a response consisting of
1. a DirectionsResult object
– contains an array of DirectionsRoute object, each of them
representing a route from the origin to destination
2. a status code
– OK, NOT_FOUND, ZERO_RESULTS, INVALID_REQUEST, etc.

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

58. Routes
It is an object literalwith the following fields:
• legs[]: arrayof DirectionsLeg objects
• waypoint_order[]:indicates the order of waypoints
• overview_path[]:arrayof LatLngs approximatingthe path of
the resulting directions
• bounds: LatLngBounds containingthe route
• copyrights:text
• warnings: text

59. Legs
It is an object literalwith the following fields:
• steps[]: arrayof DirectionsStep objects
• distance: totaldistance covered by this leg
• duration:totalduration of the leg
• start_location:theorigin of the leg as LatLng
• end_location: the destination of the leg as LatLng
• start_address: the origin of the leg as text
• end_address: the destination of the leg as text

60. Steps
It is an object literalwith the following fields:
• instructions:instructionsfor this step withinas text
• distance: totaldistance covered by this step
• duration:totalduration of the step
• start_location:theorigin of the leg as LatLng
• end_location: the destination of the leg as LatLng

61. Example
http://bit.ly/KtJrUM

62. Distance Matrix
It is a service to compute
1. traveldistance
2. journey duration
between multipleorigins and destinations
This service does not returndetailed route information
à you need the Directions Servicefor these

63. Distance Requests
google.maps.DistanceMatrixService
.getDistanceMatrix(options, callback)
where
• options
– object literal containingorigin, destination, travel modes, ...
• callback
– the function executed upon response

64. Distance Request Options
• origins
– array containingone or more address strings and/or LatLng
• destinations
– array containingone 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)

65. Distance Responses
A successful call to the Distance Matrixservice returns:
• a DistanceMatrixResponse object
• a DistanceMatrixStatus object
These are passed to the callbackfunction you specified in the
request

66. DistanceMatrixResponse
It is an object containing the followingproperties:
• originAddresses
– array containingthe locations passed in the origins field
• destinationAddresses
– array containingthe locations passed in the destinations field
• rows
– array of DistanceMatrixResponseRow objects, with each row
correspondingto an origin
• elements
– are children of rows, and correspond to a pairingof the row's origin
with each destination
– They contain status, distance, and duration information for each
origin/destination pair

67. 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);
function callback(response, status) {
if (status == google.maps.DistanceMatrixStatus.OK) {
var t = response.rows[0].elements[0].distance.text;
alert(t);
}
}
http://jsfiddle.net/bryan_weaver/snYJ2/

68. Geocoding
It is the process of convertingaddresses into geographical
coordinates
ex.
“via Vetoio 1, L’Aquila” à 42.362319,13.368514
A geocoder may returnmore thana result
You can also performthe inverse conversion
à reverse geocoding

69. Geocoding Requests
var geocoder = google.maps.Geocoder();
geocoder.geocode(options, callback);
where
• options (object literal)
– address (String) à geocoding
– latLng (LatLng) à reversegeocoding
– bounds (LatLngBounds)
– region (String)
• see http://www.iana.org/assignments/language-subtag-registry
• callback
– the function executed upon response

70. Geocoding Responses
They are passed to the callbackfunction as a
GeocoderResults object

71. 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);
}
}
http://jsfiddle.net/Shreerang/F4Sd2/1/light/

72. What’s more?
• Google services
– directions, distance matrix, geocoding
• 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 http://bit.ly/JEA6Nu)
– custom styles, image overlays, etc.
• StreetViewServices
• Drawing Library
– drawingtools, geometry, etc.

73. Open source implementations
Geocoding and reverse geocoding
http://wiki.openstreetmap.org/wiki/Nominatim
Mapping
http://leafletjs.com + Open Street Map tiles
Operations on maps
check Leaflet plugins
For a more “nativefeeling”, Cordova plugins:
http://plugins.cordova.io/#/package/com.phonegap.plugins.mapkit
http://plugins.cordova.io/#/package/com.risingj.cordova.maplauncher

74. References
https://developers.google.com/maps/documentation/javascript/
http://cordova.apache.org/docs/en/edge

75. LAB
Extend the app of the previous labs so that users can:
1. see on a map the exact position of a specific producer
2. put on the same map also a different marker showing the
current position of the user
3. see on a map all the producers;
4. draw a polyline linking the user to a specific producer, and
show the distance of the user from the producer
5. when viewing the list of products, order it based on how
much close they are to the current position of the user

76. Contact
Ivano Malavolta |
Gran Sasso Science Institute
iivanoo
ivano.malavolta@gssi.infn.it
www.ivanomalavolta.com