In this article, we will learn how to get the city name of the user using reverse geocoding. We will be using a 3rd party API service provider(Location IQ) to help us to convert the latitude and longitude we receive into an address.
- Get user coordinates.
- Get city name.
Note: A LocationIQ account needs to get an API token.
index.html Getting user coordinates.
- The Geolocation interface allows us to obtain the position of the user’s device.
- Geolocation.getCurrentPosition() helps us to determine the user’s location and gives back a Geoposition object with the required data.
- getCoordinates() Function:
- The Geolocation interface allows us to obtain the position of the users device.
- Geolocation.getCurrentPosition() helps us to determine user’s location and gives back a Geoposition object with required data.
- Refer this link for complete info on Geolocation using JS.
- getCity() Function:
- We need a LocationIQ token to proceed.
- XMLHttpRequest (XHR) is an API object whose methods lets us transfer data between a web browser and a web server.
- Despite the name, it can be used along with HTTP and other protocols as well. And the data to be retrieved can be not just XML but also JSON, HTML or plain text.
- xhr.readyState == 4 && xhr.status == 200 indicates that the data is received and loaded properly.
- Since the data we receive is a JSON object, we can use dot notation to get the value of the attributes.
- HTML | Geolocation
- HTML | DOM Geolocation position Property
- HTML | Navigator geolocation Property
- HTML | DOM Geolocation coordinates Property
- Difference between Microsoft OneDrive and Google Drive
- Difference between Register and Memory
- Simple POST request using the fetch API
- Fabric.js | Triangle scaleX Property
- Fabric.js | Triangle backgroundColor Property
- Use of blockquote, q and cite tags in HTML
- Fabric.js | Triangle borderScaleFactor Property
- Fabric.js | Triangle cornerStrokeColor Property
- Fabric.js | Rect strokeWidth Property
- Fabric.js | Rect lockMovementX Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.