Geolocation Jay Urbain, PhD Credits: http://www.w3schools.com - - PowerPoint PPT Presentation

1

Geolocation

Jay Urbain, PhD

Credits:

• http://www.w3schools.com
• Jpassion.com
• Dr. Mark Hornick

What is Geolocation?

Built-in browser functionality that lets you make a web

application location-aware

Geographic latitude/longitude (north-south/east-west) Supported by all modern browsers Internet Explorer 9+, Firefox, Chrome, Safari and Opera

Geolocation services are part of the HTML5/W3C JavaScript API

2

What can you do with Geolocation?

Show user’s position on a map Indicate proximity to hospitals, coffee shops, public

transit…

Provide directions to a known point of interest Alert users to friends in the area Notify users of events, traffic, local weather… Provide auto-assist for zip code, area code, shipping

costs…

3

How does the browser know your location?

First, the browser must obtain your consent to use your location

This security mechanism is built-in and cannot be disabled (part of HTML5 specification).

Next, the browser gathers information from your computer

Collected info is sent to the default location service provider (Google Location Services) to get an estimate

• f your location.

4

Location on stationary “desktop” computers

Location information generally available to the browser is limited to the IP address supplied by your ISP

Universally available on any computer Often resolves to your ISP’s office location, so

accurate only to a neighborhood or city

Limits what you can do with the information Local weather forecast Default language to present to user

5

Wifi-based geolocation

Google (and others) have an extensive database of Wi-Fi

networks that were collected as part of the Google Maps project.

If multiple Wi-Fi hotspots are available, triangulation based

• n signal strength can be used to determine location to

~100 ft.

Relies on accuracy of the database.

6

Cellphone-based geolocation

Cell towers report their geographical location to the

device using the tower

When multiple cell towers are available, triangulation

based on signal strength can be used to determine location

Fairly accurate (~100ft) Works indoors and outdoors In (rural) areas with few cell towers, accuracy is poor

7

GPS-based geolocation

Device hosting the browser contains hardware that

receives signals from multiple GPS satellites in geosynchronous orbit

Can be highly accurate (~3ft) Available everywhere Works outdoors only – view of sky required Accuracy decreases in areas with tall buildings,

forests, cloudy skies, sunspot activity.

8

How do you select which method your browser will use?

You don’t – the browser will decide internally how it is

going to determine your location.

However, you can specify how accurate you want the

answer to be:

The browser may communicate with your device to

prompt you to enable GPS (if you have it) to get you a more accurate estimate of your location.

9

DOM implementation: Geolocation services are part of the navigator child object of the window

• bject

10

Geolocation JavaScript API: getting your location

One-time position request:

if( navigator.geolocation ) {// check for geolocation support navigator.geolocation.getCurrentPosition( displayLoc ); } else { // no geolocation object in BOM navigator alert(“No geolocation support!”); } ... // This function is called when the location is found function displayLoc( position ) { var lat = position.coords.latitude; var long = position.coords.longitude; // TODO: display the position somewhere on the page }

11

!" #$

The getCurrentPosition() Method

• Return Data

12

getCurrentPosition() details – handling errors

getCurrentPosition takes 1, 2, or 3 arguments:

getCurrentPosition( successHandler, /* optional */ errorHandler, /* optional */ positionOptions); // This function is called when an error occurs: function errorHandler( error ) { // error.code is a value from 0 – 3: // 0: unknown error // 1: Permission denied by user // 2: position not available // 3: request timed out // if the error code is 0 or 2, error.message may // contain a more specific reason for the failure }

13

Geolocation JavaScript API watching your location change

Periodic update position request:

if( navigator.geolocation ) {// check for geolocation support wID = navigator.geolocation.watchPosition( displayLoc ); } else { // no geolocation object in BOM navigator alert(“No geolocation support!”); } // Call this function to cancel the watch function stopWatch() { if( wID ) { // make sure wID is not null navigator.geolocation.clearWatch( wID ); wID = null; } }

14

positionOptions details – changing how often your location is updated

Both getCurrentPosition and watchPosition take an optional 3rd PositionOptions argument.

getCurrentPosition( successHandler, /* optional */ errorHandler, /* optional */ positionOptions); // The positionOptions argument is a map: var positionOptions { enableHighAccuracy: true, // favor accuracy over speed timeout: Infinity, // default; other values in ms maximumAge: 0 // default; other values in ms }

15

Integration with Google Maps: displaying a map using acquired coordinates

<script src="http://maps.google.com/maps/api/js?sensor=true"> </script> function displayMap(position) { // display a Google Map var googlePosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var mapOptions = { zoom: 10, // range 0 to 21 center: googlePosition, // location of center of map mapTypeId: google.maps.MapTypeId.ROADMAP // ROADMAP, SATELLITE, or HYBRID }; var mapDiv = $("#map").get(0); // get the DOM <div> element var map = new google.maps.Map(mapDiv, mapOptions); }

16

!" #$ $

Integration with Google Maps: displaying marker (push-pin) on the map

function addMarker(map, position, title, content) { var markerOptions = { position: position, // position of the push-pin map: map,// the map to put the pin into title: title, // title of the pin clickable: true // enable info window pop-up }; var marker = new google.maps.Marker(markerOptions); }

17

Integration with Google Maps: displaying location information in a pop-up

function addMarker(map, position, title, content) { … var marker = new google.maps.Marker(markerOptions); var infoWindowOptions = { content: content, // description in pop-up position: position // where to put it }; var infoWindow = new google.maps.InfoWindow(infoWindowOptions); google.maps.event.addListener(marker, "click", function() { infoWindow.open(map); }); }

18