HTML 5 Geolocation 212022 Copyright Carl M Burnett
HTML 5 Geolocation 2/1/2022 Copyright © Carl M. Burnett 1
Outline �Location Techniques �Detecting the Location �Maps/Navigation App Integration �Showing a Map 2/1/2022 Copyright © Carl M. Burnett 2
Location Techniques �Accuracy �Indoor Location �Client Techniques � GPS �Server Techniques � IETF DHCP Coordinate LCI � IP address Conversion � Carrier connection � Language � A-GPS � Cell information �Asking the User � Wi. Fi Positioning System 2/1/2022 Copyright © Carl M. Burnett 3
Detecting the Location The W 3 C Geolocation API - Getting the position navigator. geolocation. get. Current. Position(user. Located, location. Error); function user. Located(position) { var latitude = position. coords. latitude; var longitude = position. coords. longitude; var time. Of. Location = position. timestamp; } function location. Error(error) { alert(error. code); } 2/1/2022 Copyright © Carl M. Burnett 4
W 3 C Geolocation API Properties Property Description latitude in decimal degrees longitude in decimal degrees accuracy in meters altitude (optional) in meters above the ellipsoid altitude. Accuracy (optional) in meters heading (optional) in degrees clockwise related to true north speed (optional) in meters per second 2/1/2022 Copyright © Carl M. Burnett 5
Getting a Geolocation HTML for Geolocation <input type="button" value="Get Location“ on. Click=“get. Location()"> Javascript for Geolocation <script> var x = document. get. Element. By. Id("demo"); function get. Location() { if (navigator. geolocation) { navigator. geolocation. get. Current. Position(show. Position); } else { x. inner. HTML = "Geolocation is not supported by this browser. "; } } function show. Position(position) { x. inner. HTML="Latitude: " + position. coords. latitude + " Longitude: " + position. coords. longitude; } </script> 2/1/2022 Copyright © Carl M. Burnett In Firefox Example W 3 C Exercise 6
Showing a Map j. Query The HTML that starts the Java. Script and receives the map <body on. Load="init. Geolocation()"> <p>Your current location is: </p> <img src="" id="map"> </body> 2/1/2022 Copyright © Carl M. Burnett The Java. Script that gets the map and uses j. Query to place it function init. Geolocation() { navigator. geolocation. get. Current. Position(get. Lo cation); } function get. Location(position) { var url = "http: //maps. google. com/maps/api/staticmap? sen sor=false¢er=" + position. coords. latitude + ", " + position. coords. longitude + "&zoom=14&size=300 x 400&markers=color: red|" + position. coords. latitude + ", " + position. coords. longitude; $("#map"). attr("src", url); } 7
Showing a Map Google API function show. Position(position) { var latlon = position. coords. latitude+", "+position. coords. longitude; var img_url = "http: //maps. googleapis. com/maps/api/staticmap? center=" +latlon+"&zoom=14&size=400 x 300&sensor=false"; document. get. Element. By. Id("mapholder"). inner. HTML = "<img src='"+img_url+"'>"; } In Firefox Example W 3 C Exercise 2/1/2022 Copyright © Carl M. Burnett 8
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 init. Geolocation() { navigator. geolocation. get. Current. Position( get. Location, error. Handling); } In Firefox W 3 C Exercise 2/1/2022 function init. Geolocation() { navigator. geolocation. get. Current. Position( get. Location, error. Handling); } function error. Handling(error) { switch(error. code) { case error. PERMISSION_DENIED : alert( "Not sharing your location. "); break; case error. POSITION_UNAVAILABLE: alert( "Cannot detect position. "); break; case error. TIMEOUT: alert( "Position retrieval timed out. "); break; default: alert("Unknown error. "); break; } } Copyright © Carl M. Burnett 9
Tracking the location // Global variable to store the watch ID var watch. Id = false; // This function may be called by an HTML element function tracking. Button. Click() { if (watch. Id==false) { // Tracking is off, turn it on var watch. Id = navigator. geolocation. watch. Position(user. Located, location. Error); } else { // Tracking is on, turn it off navigator. geolocation. clear. Watch(watch. Id); watch. Id = false; } } 2/1/2022 Copyright © Carl M. Burnett 10
Defining Optional Attributes Property Type Default value enable. High. Accuracy Boolean false timeout Long (in milliseconds) Infinity maximum. Age Long (in milliseconds) 0 navigator. geolocation. get. Current. Position(user. Located, location. Error, {timeout: 10000, maximum. Age: 30000, enable. High. Accuracy: false}); 2/1/2022 Copyright © Carl M. Burnett 11
Detecting the Location �Carrier Network Geolocation APIs �GSMA One. API �IETF DHCP Coordinate LCI �IP Geolocation Conversion �Google’s Client. Location object 2/1/2022 Copyright © Carl M. Burnett 12
Carrier Geolocation API Availability Platform Carriers URL Verizon Network API Verizon (US) developer. verizon. com Blue. Via Movistar (Latin America, Spain), O 2 (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 2/1/2022 Copyright © Carl M. Burnett 13
GSMA One. API https: //developer. aepona. com/Terminal. Location. Service/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 -06 T 12: 31: 07. 014 Z" longitude="10. 22244" latitude="54. 601505" altitude="10. 0" accuracy="200"/> 2/1/2022 Copyright © Carl M. Burnett 14
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 (DHCPv 4 and DHCPv 6) � For Coordinate-based Geographic Location of a client. � Location Configuration Information (LCI) includes: � Latitude � Longitude � Altitude � Resolution or Uncertainty � Separate parameters for Geographic Datum 2/1/2022 Copyright © Carl M. Burnett 15
IP Geolocation Conversion �Once we have the IP address �Use a web service to get the country/city details, �Max. Mind's Geo. IP - Enable identification of: � Location (Geographic Coordinates) � Organization � Connection speed � User type 2/1/2022 Copyright © Carl M. Burnett 16
Google’s Client. Location 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. Client. Location object will be populated with properties like the following: • • • latitude longitude address. city address. country_code address. region 2/1/2022 Copyright © Carl M. Burnett 17
Maps/Navigation App Integration �Google Maps for Android �i. OS Maps �Bing Maps 2/1/2022 Copyright © Carl M. Burnett 18
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) 2/1/2022 Copyright © Carl M. Burnett 19
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 2/1/2022 Copyright © Carl M. Burnett 20
i. OS Maps <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 </a> 2/1/2022 Copyright © Carl M. Burnett 21
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 2/1/2022 Copyright © Carl M. Burnett 22
Showing a Map <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. user. Agent; var div. Map = document. get. Element. By. Id("map"); if (useragent. index. Of('i. Phone') != − 1 || useragent. index. Of('Android') != − 1 || useragent. index. Of('i. Pod') != − 1 ) { div. Map. style. width = '100%'; div. Map. style. height = '100%'; position = get. Position(); // This needs to be implemented var latlng = new google. maps. Lat. Lng(position. latitude, position. longitude); var options = { zoom: 7, center: latlng, map. Type. Id: google. maps. Map. Type. Id. ROADMAP }; var map = new google. maps. Map(document. get. Element. By. Id("div. Map"), options); } else { // Google Maps not compatible with this mobile device } } </script> </head> <body onload="init()"> <div id="div. Map"></div> </body> </html> 2/1/2022 Copyright © Carl M. Burnett 23
- Slides: 23