Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML5 Geolocation 11/12/2018 Copyright © Carl M. Burnett.

Published byCurtis Barrett Modified over 6 years ago

Similar presentations

Presentation on theme: "HTML5 Geolocation 11/12/2018 Copyright © Carl M. Burnett."— Presentation transcript:

1 HTML5 Geolocation 11/12/2018 Copyright © Carl M. Burnett

2 Outline Location Techniques Detecting the Location
Maps/Navigation App Integration Showing a Map 11/12/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/12/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/12/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/12/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/12/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/12/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/12/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/12/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/12/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/12/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/12/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/12/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/12/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/12/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/12/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/12/2018 Copyright © Carl M. Burnett

18 Maps/Navigation App Integration
Google Maps for Android iOS Maps Bing Maps 11/12/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/12/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/12/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/12/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/12/2018 Copyright © Carl M. Burnett

23 Showing a Map 11/12/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/12/2018 Copyright © Carl M. Burnett

Download ppt "HTML5 Geolocation 11/12/2018 Copyright © Carl M. Burnett."

Similar presentations

The Web Warrior Guide to Web Design Technologies

The Web Warrior Guide to Web Design Technologies
HTML 5 – GeoLocation and Maps. Geolocation API What is a ”geolocation”…? A geographical location, defined in terms of – Latitude (north/south) – Longitude.

HTML 5 – GeoLocation and Maps. Geolocation API What is a ”geolocation”…? A geographical location, defined in terms of – Latitude (north/south) – Longitude.
Sensors. Point your phone at the sky, and Google Sky Map tells you which stars you’re looking at. Tilt your phone, and you can control the game you’re.

Sensors. Point your phone at the sky, and Google Sky Map tells you which stars you’re looking at. Tilt your phone, and you can control the game you’re.
HTML5 Demo ISYS 350. HTML 5 validation/#.UdytIOLn_zc validation/#.UdytIOLn_zc.

HTML5 Demo ISYS 350. HTML 5 validation/#.UdytIOLn_zc validation/#.UdytIOLn_zc.
Geo Using a device’s location as an input. Why Because the user might not know where they are Because typing is the worst on small devices.

Geo Using a device’s location as an input. Why Because the user might not know where they are Because typing is the worst on small devices.
CHAPTER 26 CREATING LOCATION-AWARE WEBPAGES USING GEOLOCATION.

CHAPTER 26 CREATING LOCATION-AWARE WEBPAGES USING GEOLOCATION.
CHAPTER 31 BROWSER IDENTIFICATION. LEARNING OBJECTIVES What a “hack” is and why Web developers try to avoid them How to determine a browser’s user-agent.

CHAPTER 31 BROWSER IDENTIFICATION. LEARNING OBJECTIVES What a “hack” is and why Web developers try to avoid them How to determine a browser’s user-agent.
Mark Branom, Continuing Studies.  HTML5 overview – what’s new?  New HTML5 elements  New HTML5 features  Guided Demonstrations  Forms  Video  Geolocation.

Mark Branom, Continuing Studies.  HTML5 overview – what’s new?  New HTML5 elements  New HTML5 features  Guided Demonstrations  Forms  Video  Geolocation.
CHAP 4. GEOLOCATION API.  You can request users to share their location and, if they agree, you can provide them with instructions on how to get to a.

CHAP 4. GEOLOCATION API.  You can request users to share their location and, if they agree, you can provide them with instructions on how to get to a.
UNIT 10 LINKS AND GEOLOCATION. OBJECTIVES  CO1 Describe various components of the Open Web Platform.  CO2 Create a website using HTML5.  CO3 Create.

UNIT 10 LINKS AND GEOLOCATION. OBJECTIVES  CO1 Describe various components of the Open Web Platform.  CO2 Create a website using HTML5.  CO3 Create.
Enabling Advanced Net8 Features. Configuring Advanced Network Address and Connect Data Information.

Enabling Advanced Net8 Features. Configuring Advanced Network Address and Connect Data Information.
Location-Based API 1. 2 Location-Based Services or LBS allow software to obtain the phone's current location. This includes location obtained from the.

Location-Based API 1. 2 Location-Based Services or LBS allow software to obtain the phone's current location. This includes location obtained from the.
Comp2513 Forms and CGI Server Applications Daniel L. Silver, Ph.D.

Comp2513 Forms and CGI Server Applications Daniel L. Silver, Ph.D.
Mobile App Support Jacob Poirier Geri Hengesbach Andrea Menke Erin Rossell.

Mobile App Support Jacob Poirier Geri Hengesbach Andrea Menke Erin Rossell.
Programming Games Recap on Google Maps. Creating elements. Dynamic creation of elements (multiple video elements). Geolocation. Classwork/Homework: Catch-up.

Programming Games Recap on Google Maps. Creating elements. Dynamic creation of elements (multiple video elements). Geolocation. Classwork/Homework: Catch-up.
Programming games Examples: Audio example. Google Maps api. Classwork: show more complex video. Classwork/Homework: Find place (lat and long) for basic.

Programming games Examples: Audio example. Google Maps api. Classwork: show more complex video. Classwork/Homework: Find place (lat and long) for basic.
Google Maps API. Static Maps send an HTTP GET request receive an image (PNG, GIF, JPEG) no javascript needed encode params in URL example:

Google Maps API. Static Maps send an HTTP GET request receive an image (PNG, GIF, JPEG) no javascript needed encode params in URL example:
INTRODUCTION TO HTML5 Geolocation. Display a Specific Location with Google Maps  You can use the Google Maps API to display a custom map on your own.

INTRODUCTION TO HTML5 Geolocation. Display a Specific Location with Google Maps  You can use the Google Maps API to display a custom map on your own.
Execution Environment for JavaScript Java Script Window object represents the window in which the browser displays documents. The Window object provides.

Execution Environment for JavaScript " Java Script Window object represents the window in which the browser displays documents. " The Window object provides.
CISC474 - JavaScript 03/02/2011. Some Background… Great JavaScript Guides: – https://developer.mozilla.org/en/JavaScript/Guide https://developer.mozilla.org/en/JavaScript/Guide.

CISC474 - JavaScript 03/02/2011. Some Background… Great JavaScript Guides: –

Similar presentations

Ads by Google