Scribd
Upload
13 views

GeolocationAPI AdvancedWebDevelopment

This document discusses the HTML Geolocation API. It describes what geolocation is, supported browsers, how to implement it using JavaScript, examples of getting and handling errors, returning data from the API, and a demo. Other methods like watchPosition and clearWatch are also mentioned.

Uploaded by

Suman Garai (Raja)
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
13 views

GeolocationAPI AdvancedWebDevelopment

This document discusses the HTML Geolocation API. It describes what geolocation is, supported browsers, how to implement it using JavaScript, examples of getting and handling errors, returning data from the API, and a demo. Other methods like watchPosition and clearWatch are also mentioned.

Uploaded by

Suman Garai (Raja)
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 13

HTML Geolocation

API
AWT Activity 1

Presented By:
A Vaibhav Jain, Suman Garai, Arvind Kumar, Subharanjan
Agenda
What is Geolocation
Supported Browsers
HTML Geolocation Implementation
Example Code
Error Handling
Example Code
Demo
Other interesting methods

03/23/2023 2
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.

03/23/2023 3
Supported Browsers

Above table shows the supported


browsers that supports geolocation API.
HTML Geolocation Implementation
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()

03/23/2023 5
Example Code
<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>
03/23/2023 6
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

03/23/2023 7
Example Code
<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>

03/23/2023 8
Return Data - getCurrentPosition() Method
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)

03/23/2023 9
Demo

Click here to see the demo

03/23/2023 10
Screenshot of the program

03/23/2023 11
Other Interesting Methods
watchPosition() clearWatch()
Returns the current position of Stops the watchPosition() method.
the user and continues to return
Syntax:
updated position as the user
moves. navigator.geolocation.clearWacth();
Syntax :
navigator.geolocation.watchPosi
tion(showPosition);

03/23/2023 PRESENTATION TITLE 12


Thank you

You might also like