Upload
drago
View
71
Download
2
Tags:
Embed Size (px)
DESCRIPTION
Geolocation. Wherever you go, there you are. What is Geolocation ?. Built-in browser functionality that lets you make a web application location-aware Geographic latitude/longitude Supported by all modern browsers Geolocation services are part of the HTML5/W3C JavaScript API. - PowerPoint PPT Presentation
Citation preview
SE-2840 Dr. Mark L. Hornick 1
GeolocationWherever you go, there you are
What is Geolocation? Built-in browser functionality that lets you
make a web application location-aware Geographic latitude/longitude
Supported by all modern browsers Geolocation services are part of the
HTML5/W3C JavaScript API
SE-2840 Dr. Mark L. Hornick 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…
SE-2840 Dr. Mark L. Hornick 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 of your location
SE-2840 Dr. Mark L. Hornick 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
SE-2840 Dr. Mark L. Hornick 5
Wifi-based geolocation Google (and others) have an extensive
database of wifi networks that were collected as part of the Google Maps project
If multiple wifi hotspots are available, triangulation based on signal strength can be used to determine location to ~100 ft
Relies on accuracy of the databaseSE-2840 Dr. Mark L. Hornick 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
SE-2840 Dr. Mark L. Hornick 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
SE-2840 Dr. Mark L. Hornick 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.
SE-2840 Dr. Mark L. Hornick 9
SE-2840 Dr. Mark L. Hornick 10
BOM implementation: Geolocation services are part of the navigator child object of the window object
SE-2840Dr. Mark L. Hornick
11
The geolocation API methods are implemented in the navigator object.
If geolocation is not supported, the navigator object will not have a geolocation child object.
geolocation
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 foundfunction displayLoc( position ) {
var lat = position.coords.latitude;var long = position.coords.longitude;// TODO: display the position somewhere on the page
}SE-2840
Dr. Mark L. Hornick12
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} SE-2840
Dr. Mark L. Hornick13
Geolocation JavaScript APIwatching 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 watchfunction stopWatch() {
if( wID ) { // make sure wID is not nullnavigator.geolocation.clearWatch( wID );wID = null;
}}
SE-2840 Dr. Mark L. Hornick
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 speedtimeout: Infinity, // ms to wait for pos valuemaximumAge: 0 // ms age of cached pos; 0=get new
pos}
SE-2840 Dr. Mark L. Hornick
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);
}
SE-2840 Dr. Mark L. Hornick 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); }
SE-2840 Dr. Mark L. Hornick 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); }); }
SE-2840 Dr. Mark L. Hornick 18