20220816-GeolocationAPI-AdvancedWebDevelopment.pptx
0 likes27 views
The document discusses the HTML Geolocation API, which allows web applications to determine the geographical location of a device using JavaScript's 'navigator' class. It details the implementation process, including error handling for potential issues such as permission denial and location unavailability. Additionally, the document provides example code for obtaining and displaying location data, as well as other related methods like watchPosition for continuous tracking.
20220816-GeolocationAPI-AdvancedWebDevelopment.pptx
- 1. HTML Geolocation API AWT Activity 1 Presented By: A Vaibhav Jain, Suman Garai, Arvind Kumar, Subharanjan
- 2. Agenda What is Geolocation Supported Browsers HTML Geolocation Implementation Example Code Error Handling Example Code Demo Other interesting methods 3/24/2023 2
- 3. What is Geolocation? • Geolocation refers to the geographical (latitudinal and longitudinal) location of an Internet-connected device. • Not your location, mind you, but the location of whatever electronic medium is being used to access the Internet. • Geolocation data can be collected on various basis, like, Device based, Server Based, Hybrid. 3/24/2023 3
- 4. Supported Browsers Above table shows the supported browsers that supports geolocation API.
- 5. HTML Geolocation Implementation 3/24/2023 5 In order to implement the API, we must use the ‘navigator’ class of JavaScript, which return the Geolocation object that gives web content access to the location of the device. Logic to implement the API: • Check if Geolocation is supported. • If supported, call the getCurrentPosition() method. Else, display error message. • If the getCurrentPosition(parameter: showPosition) is called successfully, it returns the coordinates object to the function specified in the parameter. • The method showPosition() outputs the Latitude and Longitude. getCurrentPosition() method accepts two parameters, first being, showPosition() and the second is, showError()
- 6. Example Code 3/24/2023 6 <script> 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 + "<br>Accuracy: " + position.coords.accuracy; } </script>
- 7. Error Handling • As the second parameter, the getCurrentPosition() accepts showError() method. • This is used to handle errors. It specifies a function to run if it fails to get the user’s location values. • This method contains a set of possible errors that might occur while accessing a user’s location are given below: • Error.PERMISSION_DENIED • Error.POSITION_UNAVAILABLE • Error.TIMEOUT • Error.UNKNOWN_ERROR 3/24/2023 7
- 8. Example Code 3/24/2023 8 <script> function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML = "User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML = "Location information is unavailable." break; case error.TIMEOUT: x.innerHTML = "The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML = "An unknown error occurred." break; } } <script>
- 9. Return Data - getCurrentPosition() Method 3/24/2023 9 Property Returns coords.latitude The latitude as a decimal number (always returned) coords.longitude The longitude as a decimal number (always returned) coords.accuracy The accuracy of position (always returned) coords.altitude The altitude in meters above the mean sea level (returned if available) coords.altitudeAccuracy The altitude accuracy of position (returned if available) coords.heading The heading as degrees clockwise from North (returned if available) coords.speed The speed in meters per second (returned if available) timestamp The date/time of the response (returned if available)
- 10. Demo Click here to see the demo 3/24/2023 10
- 11. Screenshot of the program 3/24/2023 11
- 12. Other Interesting Methods watchPosition() Returns the current position of the user and continues to return updated position as the user moves. Syntax : navigator.geolocation.watchPosi tion(showPosition); clearWatch() 3/24/2023 PRESENTATION TITLE 12 Stops the watchPosition() method. Syntax: navigator.geolocation.clearWacth();
- 13. Thank you