Mobile 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
Geolocation is the identiﬁcation of the real-world geographic
location of an object, like:
•  mobile phone
•  Internet-connected computer terminal
Geolocation may refer to the practice of assessing the location,
or to the actual assessed location

Mapping
Mapping usually refers to map-making and often used instead
of cartography
In Cordova you can use any JS library for maps:
GMaps, Leaﬂet, Bing Maps,
Cordova plugins for native maps

Geolocation VS Mapping
Geolocation refers to geospatial
data collection and manipulation
ex. LatLon calculations, geocoding, etc.
Mapping refers to the activity of
creating a map through some
cartographic works
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 location information
sources
Common 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 device's actual
location
This API is based on the W3C Geolocation API Speciﬁcation,
and only executes on devices that don't already provide an
implementation

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

getCurrentPosition
It returns the device's current position
getCurrentPosition(win, [fail], [options]);
win
callback function with a Position parameter
fail
error callback
options
geolocation options

watchPosition
It gets the device's position when a change in position has been
detected
var id = watchPosition(win, [fail], [options]);
win
callback function with a Position parameter
fail
error callback
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 Cordova uses network-based methods
•  timeout (Number)
–  the maximum length of time (msec) that is 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 no greater than the
speciﬁed 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:
•  coords
–  the geographic Coordinates
•  timestamp
–  creation timestamp in 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 altitude coordinate in meters
http://bit.ly/Ln7V3H
not supported in Android

•  heading (Number)
–  Direction of travel, speciﬁed in degrees counting clockwise relative to
the true north
•  speed (Number)
–  Current ground speed of the device, speciﬁed 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
capture operation
It contains a pre-deﬁned error code
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 that the device is pointed
from the top of the device
win
callback function with an Heading parameter
fail
error callback

watchHeading
var
id
=
watchHeading(win,
fail,
[options]);

It gets the device's heading at a regular interval
win
callback function with an Heading parameter
fail
error callback
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 option represents the change in degrees
required to initiate a watchHeading success callback
–  when this value is set, frequency is ignored
iOS only

clearWatch
clearWatch(watchID);

Stop watching the heading of the device by referencing the
watchID parameter
watchID
ID returned by heading.watchHeading

The CompassHeading object
Properties
•  magneticHeading (Number)
–  the heading in degrees from 0-359.99 at a single moment in time
•  trueHeading (Number)
–  The heading relative to the geographic North Pole
•  headingAccuracy (Number)
–  the deviation in degrees between the reported heading and the true
heading
•  timestamp (Number)
–  The time at which this heading was determined in milliseconds

The CompassError object
Encapsulates the error code resulting from a failed heading
capture operation
It contains a pre-deﬁned error code
–  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 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
http://www.cibando.com

Goole Maps API
The API provides a number of utilities for manipulating maps and
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
–  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

GMaps Basics
The 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

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

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 geographical coordinates
•  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 speciﬁcally set an initial map type at this time as well
mapTypeId: google.maps.MapTypeId.ROADMAP
Supported types:
•  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 Google Maps API
–  for example touchend
•  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 notiﬁcations using the addListener()
event handler
google.maps.event.addListener(obj, eventname, callback)
•  obj: the object on which the event can occur
–  ex. the whole map, 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: function to call when the speciﬁed 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
Overlays are objects that you “add” on the map, like
•  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
–  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
–  deﬁne a region on the map
•  Map Types
–  represent map layers
–  can replace base map tiles
–  can be displayed on top of
base map tiles
http://bit.ly/LztFoV
http://www.mapofthedead.com/

•  Info Window
–  displays content within a popup
balloon on top of a map
–  linked to a speciﬁc location
•  Custom Overlay
–  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
à  you can attach event listeners to them
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 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

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 deﬁnes 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
Also Polyline can react to user events

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 line's stroke in pixels
•  editable
–  boolean, speciﬁes 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 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
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 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 literal with the following ﬁelds:
•  legs[]: array of DirectionsLeg objects
•  waypoint_order[]: indicates the order of waypoints
•  overview_path[]: array of LatLngs approximating the path of
the resulting directions
•  bounds: LatLngBounds containing the route
•  copyrights: text
•  warnings: text

Legs
•  steps[]: array of DirectionsStep objects
•  distance: total distance covered by this leg
•  duration: total duration of the leg
•  start_location: the origin 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: instructions for this step within as text
•  distance: total distance covered by this step
•  duration: total duration of the step
•  start_location: the origin 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.  travel distance
2.  journey duration
between multiple origins and destinations
This service does not return detailed route information
à you need the Directions Service for these

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

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)

Distance Responses
A successful call to the Distance Matrix service returns:
•  a DistanceMatrixResponse object
•  a DistanceMatrixStatus object
These are passed to the callback function you speciﬁed in the
request

DistanceMatrixResponse
It is an object containing the following properties:
•  originAddresses
–  array containing the locations passed in the origins ﬁeld
•  destinationAddresses
–  array containing the locations passed in the destinations ﬁeld
•  rows
–  array of DistanceMatrixResponseRow objects, with each row
corresponding to an origin
•  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);
function callback(response, status) {
if (status == google.maps.DistanceMatrixStatus.OK) {
var t = response.rows[0].elements[0].distance.text;
alert(t);
}
}
http://jsﬁddle.net/bryan_weaver/snYJ2/

Geocoding
It is the process of converting addresses into geographical
coordinates
ex.
“via Vetoio 1, L’Aquila” à 42.362319,13.368514
A geocoder may return more than a result
You can also perform the inverse conversion
à reverse geocoding

Geocoding Requests
var geocoder = google.maps.Geocoder();
geocoder.geocode(options, callback);
where
•  options (object literal)
–  address (String) à geocoding
–  latLng (LatLng) à reverse geocoding
–  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 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);
}
}
http://jsﬁddle.net/Shreerang/F4Sd2/1/light/

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 http://bit.ly/JEA6Nu)
–  custom styles, image overlays, etc.
•  StreetView Services
•  Drawing Library
–  drawing tools, geometry, etc.

Open source implementations
Geocoding and reverse geocoding
http://wiki.openstreetmap.org/wiki/Nominatim
Mapping
http://leaﬂetjs.com + Open Street Map tiles
Operations on maps
check Leaﬂet plugins
For a more “native feeling”, 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

Exercises
Extend the previous exercises you developed about Frascati
events so that users can:
1.  see on a map the exact position of a specific event;
2.  put on the same map also a different marker showing the
current position of the user;
3.  see on a map all the “enti”;
4.  draw a polyline linking all the “enti” in the map;
5.  when viewing the list of “enti”, order the “enti” based on
how much close they are to the current position of the
user.
Data:
http://www.ivanomalavolta.com/files/data/frascatiEventi.json
http://www.ivanomalavolta.com/files/data/frascatiEnti.json

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

Mobile geolocation and mapping

More Related Content

Viewers also liked (20)

Similar to Mobile geolocation and mapping (20)

More from Ivano Malavolta (20)

Recently uploaded (20)

Mobile geolocation and mapping