Download presentation
Presentation is loading. Please wait.
1
Session V HTML5 APIs - HTML5 Geolocation http://www.profburnett.com
HTML Level II Session V HTML5 APIs - HTML5 Geolocation
2
Outline Location Techniques Detecting the Location
Maps/Navigation App Integration Showing a Map 11/28/2018 Copyright © Carl M. Burnett
3
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
4
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
5
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
6
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
7
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 = " + 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
8
Showing a Map Google API
function showPosition(position) { var latlon = position.coords.latitude+","+position.coords.longitude; var img_url = " +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
9
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
10
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
11
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
12
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
13
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
14
GSMA OneAPI 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=" T12:31:07.014Z" longitude=" " latitude=" " altitude="10.0" accuracy="200"/> 11/28/2018 Copyright © Carl M. Burnett
15
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
16
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
17
Google’s ClientLocation Object
<script src=" 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
18
Maps/Navigation App Integration
Google Maps for Android iOS Maps Bing Maps 11/28/2018 Copyright © Carl M. Burnett
19
Google Maps for Android
<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
20
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
21
iOS Maps We now need to use:
<a href=" See the Eiffel Tower on a map </a> We now need to use: <a href=" See the Eiffel Tower on a map 11/28/2018 Copyright © Carl M. Burnett
22
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
23
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=" <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
Similar presentations
