380 likes | 982 Views
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.
E N D
Geolocation Wherever you go, there you are SE-2840 Dr. Mark L. Hornick
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 theHTML5/W3C JavaScript API SE-2840 Dr. Mark L. Hornick
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
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
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
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 database SE-2840 Dr. Mark L. Hornick
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
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
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
BOM implementation: Geolocation services are part of the navigator child object of the window object • 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 SE-2840Dr. Mark L. Hornick
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 } SE-2840 Dr. Mark L. Hornick
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. Hornick
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 watch function stopWatch() { if( wID ) { // make sure wID is not null navigator.geolocation.clearWatch( wID ); wID = null; } } SE-2840 Dr. Mark L. Hornick
positionOptions details – changing how often your location is updated Both getCurrentPosition and watchPosition take an optional 3rdPositionOptions argument. getCurrentPosition( successHandler, /* optional */ errorHandler, /* optional */ positionOptions); // The positionOptions argument is a map: varpositionOptions { enableHighAccuracy: true, // favor accuracy over speed timeout: Infinity, // ms to wait for pos value maximumAge: 0 // ms age of cached pos; 0=get new pos } SE-2840 Dr. Mark L. Hornick
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 vargooglePosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); varmapOptions = { zoom: 10, // range 0 to 21 center: googlePosition, // location of center of map mapTypeId: google.maps.MapTypeId.ROADMAP// ROADMAP, SATELLITE, or HYBRID }; varmapDiv = $("#map").get(0); // get the DOM <div> element var map = new google.maps.Map(mapDiv, mapOptions); } SE-2840 Dr. Mark L. Hornick
Integration with Google Maps:displaying marker (push-pin) on the map function addMarker(map, position, title, content) { varmarkerOptions = { 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 }; varmarker = new google.maps.Marker(markerOptions); } SE-2840 Dr. Mark L. Hornick
Integration with Google Maps:displaying location information in a pop-up function addMarker(map, position, title, content) { … var marker = new google.maps.Marker(markerOptions); varinfoWindowOptions = { content: content, // description in pop-up position: position // where to put it }; varinfoWindow = new google.maps.InfoWindow(infoWindowOptions); google.maps.event.addListener(marker, "click", function() { infoWindow.open(map); }); } SE-2840 Dr. Mark L. Hornick