Session V HTML5 APIs - HTML5 Geolocation

Slides:



Advertisements
Similar presentations
The Web Warrior Guide to Web Design Technologies
Advertisements

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.
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.
CHAPTER 26 CREATING LOCATION-AWARE WEBPAGES USING 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.
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.
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.
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 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:
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.
CISC474 - JavaScript 03/02/2011. Some Background… Great JavaScript Guides: –
Proglan Session 1. .  HTML5 will be the new standard for HTML.  The previous version of HTML, HTML 4.01, came in The web has changed a lot since.
INTRODUCTION TO JAVASCRIPT AND DOM Internet Engineering Spring 2012.
Tutorial 10 Programming with JavaScript
Introduction to JavaScript 41 Introduction to Programming the WWW I CMSC Winter 2004 Lecture 17.
Programming Games Reprise: storage, datatypes. Geolocation/Google API example. Work session Homework: [Catch up. Upload work. Post proposal.] Work on your.
Phonegap Bridge – Compass API CIS 136 Building Mobile Apps 1.
Session: 1. © Aptech Ltd. 2Introduction to the Web / Session 1  Explain the evolution of HTML  Explain the page structure used by HTML  List the drawbacks.
Session: 19. © Aptech Ltd. 2HTML5 Geolocation and APIs / Session 19  Explain geolocation and its use in HTML5  Explain the Google Maps API  Explain.
Phonegap Bridge – Device, Network, Console, Geolocation API’s CIS 136 Building Mobile Apps 1.
JavaScript. JavaScript Introduction JavaScript is the world's most popular programming language. It is the language for HTML and the web, for servers,
RIA Geo Location. Finding Location modern devices can get location coordinates phones and tablets can use GPS desktops and laptops –often cannot use GPS.
Rich Internet Applications 9. HTML 5 and RIAs. HTML 5 Standard currently under development by W3C Aims to improve the language with support for the latest.
Presented By Nanda Kumar(972789) P. Trinesh (982816) Sk. Salma (982824) K. Madhuri (982814) HTML5.
JavaScript, Sixth Edition
What is HTML5? HTML5 will be the new standard for HTML. The previous version of HTML, HTML 4.01, came in The web has changed a lot since then. HTML5.
Phonegap Bridge –Geolocation and Google maps CIS 136 Building Mobile Apps 1.
HTML5 Demo ISYS 350. HTML 5 validation/#.UdytIOLn_zc validation/#.UdytIOLn_zc.
1 Bus Tracker A Google Maps Application. 22 Objectives You will be able to Add an icon to a map created with the Google Maps API. Use Ajax techniques.
Chap 4. Geolocation API.
CGS 3066: Web Programming and Design Spring 2017
Mobile Computing CSE 40814/60814 Spring 2017.
Tutorial 10 Programming with JavaScript
JavaScript is a programming language designed for Web pages.
Data Virtualization Tutorial… CORS and CIS
CHAPTER 9 APIS. CHAPTER 9 APIS WHAT IS AN API?
In this session, you will learn about:
Tracking and Booking Taxi
HTML5 Demo ISYS 350.
AJAX – Asynchronous JavaScript and XML
Introduction Web Environments
Geolocation using Google maps
Mobile Computing CSE 40814/60814 Spring 2018.
Google Maps Tutorials Android Studio. About Google map Google Maps is a web mapping service developed by Google. Google Maps began as a C++ desktop program.
Session V HTML5 APIs - AJAX & JSON
Google Maps: A Short How-to
HTML5 Geolocation 11/12/2018 Copyright © Carl M. Burnett.
JavaScript Introduction
Your 1st Programming Assignment
WEB PROGRAMMING JavaScript.
Geolocation using Google maps
HTML Level II (CyberAdvantage)
HTML5 Demo ISYS 350.
HTML5 Demo ISYS 350.
Making a good thematic map – Extracting or collecting geographic data
HTML5 Demo ISYS 350.
Tutorial 10 Programming with JavaScript
CIS 136 Building Mobile Apps
Tutorial 10: Programming with javascript
JavaScript Basics What is JavaScript?
HTML5 Demo ISYS 350.
HTML5 Demo ISYS 350.
Geolocation using Google maps
Presentation transcript:

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&center=" + 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