Session V HTML5 APIs - HTML5 Geolocation http://www.profburnett.com HTML Level II Session V HTML5 APIs - HTML5 Geolocation http://www.profburnett.com
Outline Location Techniques Detecting the Location Maps/Navigation App Integration Showing a Map 11/28/2018 Copyright © Carl M. Burnett
Location Techniques Accuracy Indoor Location Client Techniques GPS A-GPS Cell information WiFi Positioning System Server Techniques IETF DHCP Coordinate LCI IP address Conversion Carrier connection Language Asking the User 11/28/2018 Copyright © Carl M. Burnett
Detecting the Location The W3C Geolocation API - Getting the position navigator.geolocation.getCurrentPosition(userLocated, locationError); function userLocated(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; var timeOfLocation = position.timestamp; } function locationError(error) { alert(error.code); 11/28/2018 Copyright © Carl M. Burnett
W3C Geolocation API Properties Property Description latitude in decimal degrees longitude accuracy in meters altitude (optional) in meters above the ellipsoid altitudeAccuracy (optional) in meters heading (optional) in degrees clockwise related to true north speed (optional) in meters per second 11/28/2018 Copyright © Carl M. Burnett
Getting a Geolocation HTML for Geolocation Javascript for Geolocation <input type="button" value="Get Location“ onClick=“getLocation()"> Javascript for Geolocation <script> var x = document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = "Geolocation is not supported by this browser."; } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; </script> In Firefox Example W3C Exercise 11/28/2018 Copyright © Carl M. Burnett
Showing a Map jQuery The JavaScript that gets the map and uses jQuery to place it function initGeolocation() { navigator.geolocation.getCurrentPosition(getLocation); } function getLocation(position) { var url = "http://maps.google.com/maps/api/staticmap?sensor=false¢er=" + position.coords.latitude + "," + position.coords.longitude + "&zoom=14&size=300x400&markers=color:red|" + position.coords.latitude + "," + position.coords.longitude; $("#map").attr("src", url); The HTML that starts the JavaScript and receives the map <body onLoad="initGeolocation()"> <p>Your current location is:</p> <img src="" id="map"> </body> 11/28/2018 Copyright © Carl M. Burnett
Showing a Map Google API function showPosition(position) { var latlon = position.coords.latitude+","+position.coords.longitude; var img_url = "http://maps.googleapis.com/maps/api/staticmap?center=" +latlon+"&zoom=14&size=400x300&sensor=false"; document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>"; } In Firefox Example W3C Exercise 11/28/2018 Copyright © Carl M. Burnett
Handling Error Messages Error constant Description PERMISSION_DENIED The user has denied permission to the API to get the position. POSITION_UNAVAILABLE The user’s position couldn’t be determined due to location provider. TIMEOUT The user’s position couldn’t be determined before the timeout function initGeolocation() { navigator.geolocation.getCurrentPosition( getLocation, errorHandling); } function initGeolocation() { navigator.geolocation.getCurrentPosition( getLocation, errorHandling); } function errorHandling(error) { switch(error.code) { case error.PERMISSION_DENIED: alert( "Not sharing your location."); break; case error.POSITION_UNAVAILABLE: alert( "Cannot detect position."); case error.TIMEOUT: alert( "Position retrieval timed out."); default: alert("Unknown error."); In Firefox W3C Exercise 11/28/2018 Copyright © Carl M. Burnett
Tracking the location // Global variable to store the watch ID var watchId = false; // This function may be called by an HTML element function trackingButtonClick() { if (watchId==false) { // Tracking is off, turn it on var watchId = navigator.geolocation.watchPosition(userLocated, locationError); } else { // Tracking is on, turn it off navigator.geolocation.clearWatch(watchId); watchId = false; } 11/28/2018 Copyright © Carl M. Burnett
Defining Optional Attributes Property Type Default value enableHighAccuracy Boolean false timeout Long (in milliseconds) Infinity maximumAge navigator.geolocation.getCurrentPosition(userLocated, locationError, {timeout:10000, maximumAge: 30000, enableHighAccuracy:false}); 11/28/2018 Copyright © Carl M. Burnett
Detecting the Location Carrier Network Geolocation APIs GSMA OneAPI IETF DHCP Coordinate LCI IP Geolocation Conversion Google’s ClientLocation object 11/28/2018 Copyright © Carl M. Burnett
Carrier Geolocation API Availability Platform Carriers URL Verizon Network API Verizon (US) developer.verizon.com BlueVia Movistar (Latin America, Spain), O2 (UK, Germany), Telenor (Asia, Scandinavia, Eastern Europe) bluevia.com AT&T Location API AT&T (US) developer.att.com/developer LBS Sprint API Sprint (US) developer.sprint.com 11/28/2018 Copyright © Carl M. Burnett
GSMA OneAPI https://developer.aepona.com/TerminalLocationService/Proxy/REST/<key>? address=tel:<tel>&accuracy=coarse Where: <key> = the key assigned to our developer account <tel> = the international number of the phone we want to geolocate. <response timestamp="2010-06-06T12:31:07.014Z" longitude="10.22244" latitude="54.601505" altitude="10.0" accuracy="200"/> 11/28/2018 Copyright © Carl M. Burnett
IETF DHCP Coordinate LCI Internet Engineering Task Force (IETF) Dynamic Host Control Protocol (DHCP) Option for Coordinate Location Configuration Information (C-LCI) Protocol Specifies Dynamic Host Configuration Protocol options (DHCPv4 and DHCPv6) For Coordinate-based Geographic Location of a client. Location Configuration Information (LCI) includes: Latitude Longitude Altitude Resolution or Uncertainty Separate parameters for Geographic Datum 11/28/2018 Copyright © Carl M. Burnett
IP Geolocation Conversion Once we have the IP address Use a web service to get the country/city details, MaxMind's GeoIP - Enable identification of: Location (Geographic Coordinates) Organization Connection speed User type 11/28/2018 Copyright © Carl M. Burnett
Google’s ClientLocation Object <script src="https://www.google.com/jsapi"></script> To use the client location feature, we must then load an API. For example: <script type="text/javascript"> google.load("search", "1"); </script> Once we’ve loaded the API, the google.loader.ClientLocation object will be populated with properties like the following: latitude longitude address.city address.country address.country_code address.region 11/28/2018 Copyright © Carl M. Burnett
Maps/Navigation App Integration Google Maps for Android iOS Maps Bing Maps 11/28/2018 Copyright © Carl M. Burnett
Google Maps for Android http://maps.google.com/? <attributes>. Possible attributes include: q - Query parameter; this can be a comma-separated coordinate preceded by a loc: prefix (loc: lat,long), or any search string, such as starbucks near - Applies a location definition for a query, as in q=starbucks;near=san+mateo+ca ll - A comma-separated latitude and longitude for the map center t - The type of map (m: map, k: satellite, h: hybrid, p: terrain) z - The zoom level, from 1 (the whole world) to 23 (buildings, not available in all areas) 11/28/2018 Copyright © Carl M. Burnett
Google Maps – Street View google.streetview: protocol. The parameters are: cbll - The latitude and longitude, comma-separated (mandatory) cbp - A series of optional parameters, such as yaw (center of panorama view in degrees clockwise from north), pitch (center of panorama view in degrees from −90 to 90), and the panorama zoom mz - The map zoom associated with this panorama 11/28/2018 Copyright © Carl M. Burnett
iOS Maps We now need to use: <a href="http://maps.google.com/?q=eiffel+tower+paris"> See the Eiffel Tower on a map </a> We now need to use: <a href="http://maps.apple.com/?q=eiffel+tower+paris"> See the Eiffel Tower on a map 11/28/2018 Copyright © Carl M. Burnett
Bing Map APIs Bing Maps API bingmaps: protocol, which accepts the following parameters (a partial list): cp - The center point—a latitude and longitude, separated by a tilde ~ character lvl - The zoom level (1–20) where - A search query on places, locations, or landmarks q - A search query on a local business sty - The map style (a: aerial, r: roadmap) trfc - Whether or not traffic information should be included (0: no, 1: yes) rtp - The route definition, with the source and destination addresses separated by a tilde ~ character; if either the source or the destination is undefined it will make a route from/to the current location 11/28/2018 Copyright © Carl M. Burnett
Showing a Map 11/28/2018 Copyright © Carl M. Burnett <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> <script type="text/javascript"> function init() { var useragent = navigator.userAgent; var divMap = document.getElementById("map"); if (useragent.indexOf('iPhone') != −1 || useragent.indexOf('Android') != −1 || useragent.indexOf('iPod') != −1 ) { divMap.style.width = '100%'; divMap.style.height = '100%'; position = getPosition(); // This needs to be implemented var latlng = new google.maps.LatLng(position.latitude,position.longitude); var options = { zoom: 7, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("divMap"), options); } else { // Google Maps not compatible with this mobile device } </script> </head> <body onload="init()"> <div id="divMap"></div> </body> </html> 11/28/2018 Copyright © Carl M. Burnett