[2015/2016] Geolocation and mapping

Gran Sasso Science Institute
Ivano Malavolta
Geolocation and mapping

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

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

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

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.

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

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

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

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

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

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

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

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

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

• 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

• 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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

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>

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

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

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

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

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

• 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/

• 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

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

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

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

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

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

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

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

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

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

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.

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

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

Legs
• 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

Steps
• 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

Example
http://bit.ly/KtJrUM

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

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

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)

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

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

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/

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

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

Geocoding Responses
They are passed to the callbackfunction 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);
}
}
http://jsfiddle.net/Shreerang/F4Sd2/1/light/

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.

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

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

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

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

[2015/2016] Geolocation and mapping

More Related Content

What's hot (12)

Viewers also liked (20)

Similar to [2015/2016] Geolocation and mapping (20)

More from Ivano Malavolta (20)

Recently uploaded (20)

[2015/2016] Geolocation and mapping