HTML5 Geolocation with ipdata fallback

An example of how you would use the ipdata API as a fallback for when HTML5 Geolocation fails or if the user blocks geolocation requests from your website.

This example is adapted from the Wikipedia article on W3C Geolocation. Note that it handles every error by making a call to the ipdata API to get the lat/long.
Also note that instead of getting the lat/long (that is when you fall back to our service) and then using another service to geocode the lat/long to a place i.e. city or country. You could simply get the country, city, region, postal code and numerous other attributes from the this.responseText response object in the example below.
const geoFindMe = () => {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success, error, geoOptions);
    } else {
        console.log("Geolocation services are not supported by your web browser.");
    }
}
​
const success = (position) => {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    const altitude = position.coords.altitude;
    const accuracy = position.coords.accuracy;
    console.log(`lat: ${latitude} long: ${longitude}`);
}
​
const error = (error) => {
    var request = new XMLHttpRequest();
    request.open('GET', 'https://api.ipdata.co/?api-key=test');
    request.setRequestHeader('Accept', 'application/json');
    request.onreadystatechange = function () {
      if (this.readyState === 4) {
        data = JSON.parse(this.responseText)
        console.log(`lat: ${data.latitude} long: ${data.longitude}`);
      }
    };
    request.send();
}
​
const geoOptions = {
    enableHighAccuracy: true,
    maximumAge: 30000,
    timeout: 27000
};
​
// call the function
geoFindMe()

Use Cases - Previous

How to get a client's IP address using JavaScript

Next - Use Cases

Get the location from an IP Address in Javascript

Last updated 1 year ago