Download presentation
Presentation is loading. Please wait.
Published byPosy Reynolds Modified over 9 years ago
1
CHAP 4. GEOLOCATION API
2
You can request users to share their location and, if they agree, you can provide them with instructions on how to get to a nearby store to pick up a new pair of shoes at a discounted rate. You request a position and, if the user agrees, the browser returns location information. The position is provided to the browser by the underlying device (for example, a laptop or a mobile phone) on which the HTML5 Geolocation–enabled browser is running. IP Address Global Positioning System (GPS) Wi-Fi with MAC addresses from RFID, Wi-Fi, and Bluetooth GSM or CDMA cell phone IDs ABOUT LOCATION INFORMATION
3
ProsCons GPS Very accurate Take a long time, can drain a user’s device’s batteries Does not work well indoors May require additional hardware Wi-Fi Accurate Works indoors Fix quickly & cheaply Not good in rural areas with few wireless access points Cell Phone Fairly accurate Works indoors Fix quickly & cheaply Requires a device with access to a cell phone or cell modem Not good in rural areas with fewer cell phone towers User-Defined May have more accurate location data Allows services for alternate locations User entry might be faster than detection Can also be very inaccurate, especially if the location changes THE PROS AND CONS OF GEOLOCATION DATA
4
The browser intercepts and requests user permission at step 2. ARACHITECTURE & PRIVACY
5
Browser support for HTML5 Geolocation BROWSER SUPPORT BrowserDetails ChromeSupported in Google Chrome version 2 with Gears FirefoxSupported in version 3.5 and greater Internet ExplorerSupported via the Gears plugin OperaPlanned support version 10, experimental support in nightly builds SafariSupported in version 4 for the iPhone
6
if(navigator.geolocation) { document.getElementById("support").innerHTML = "HTML5 Geolocation supported."; } else { document.getElementById("support").innerHTML = "HTML5 Geolocation is not supported in your browser."; } CHECKING FOR BROWSER SUPPORT
7
Theres are two type of position requests One-shot position request Repeated position updates POSITIONS REQUESTS
8
Usage void getCurrentPosition(in PositionCallback successCallback, in optional PositionErrorCallback errorCallback, in optional PositionOptions options); Example navigator.geolocation.getCurrentPosition(updateLocation, handleLocationError, {timeout:10000}); updateLocation is a PositionCallback function will implement later handleLocationError is a PositionErrorCallback function will implement later ONE-SHOT POSITION REQUESTS
9
function updateLocation(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; var accuracy = position.coords.accuracy; document.getElementById("latitude").innerHTML = latitude; document.getElementById("longitude").innerHTML = longitude; document.getElementById(“accuracy”).innerHTML = “This location is accurate within “ +accuracy + “ meters.” } IMPLEMENT POSITION CALLBACK
10
function handleLocationError(error) { switch(error.code) { case 0: updateStatus(“Retrieving location error: " + error.message); break; case 1: updateStatus("The user prevented retrieving location."); break; case 2: updateStatus(“Unable to determine your location: " + error.message); break; case 3: updateStatus(“Retrieving timed."); break; } IMPLEMENT POSITION ERROR CALLBACK
11
Usage long watchPosition(in PositionCallback successCallback, in optional PositionErrorCallback errorCallback, in optional PositionOptions options); Example navigator.geolocation.watchPosition(updateLocation, handleLocationError); updateLocation is a PositionCallback function same as getCurrentPosition implemented above. handleLocationError is a PositionErrorCallback function same as getCurrentPosition implemented above. REPEAT POSITION UPDATES
12
Usage navigator.geolocation.clearWatch(watchId); Example var watchId = navigator.geolocation.watchPosition(updateLocation, handleLocationError); navigator.geolocation.clearWatch(watchId); CANCEL POSITION UPDATES
13
Require Google Map JavaScript API Put Div for Google Map SHOW ME ON A GOOGLE MAP
14
Google Map Example var map; function initialize() { map = new google.maps.Map(document.getElementById('map_canvas'), {zoom: 15, mapTypeId: google.maps.MapTypeId.ROADMAP}); navigator.geolocation.getCurrentPosition(function(position) { var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); var infowindow = new google.maps.InfoWindow({ map: map, position: pos, content: 'Location found using HTML5.‘ }); map.setCenter(pos); }, function(error) { alert('Cannot get Location data: ' + error.code); }); } window.addEventListener("load", initialize, true); SHOW ME ON A GOOGLE MAP (CONT.)
Similar presentations
© 2024 SlidePlayer.com. Inc.
All rights reserved.