<![CDATA[ geolocation - freeCodeCamp.org ]]> https://www.freecodecamp.org/news/ https://cdn.freecodecamp.org/universal/favicons/favicon.png <![CDATA[ geolocation - freeCodeCamp.org ]]> https://www.freecodecamp.org/news/ Eleventy Fri, 26 Jun 2026 22:47:43 +0000 60 <![CDATA[ How to Use the Geolocation API in JavaScript – with Code Examples ]]> https://www.freecodecamp.org/news/how-to-use-the-javascript-geolocation-api/ 66bd915d621c718d60a31067 Mon, 26 Feb 2024 22:34:24 +0000 The Geolocation API is a standard API implemented in browsers to retrieve the location of the people who are interacting with a web application.

This API enable users to send their location to a web application to enable relevant services, such as seeking a restaurant or hotel near the user.

In this article, I'm going to show you how to use the Geolocation API with JavaScript and display a user's current location using a map API.

Let's get started!

How to Access the Geolocation API

Browsers implement the geolocation API in the navigator.geolocation object. You can check if the browser you use supports this API as follows:

if ('geolocation' in navigator) {
  console.log('Geolocation is Available');
} else {
  console.log('Geolocation is NOT Available');
}

If the browser replies with 'Geolocation is Available', then you can use the methods of the geolocation object to get the user data.

The Geolocation API is only available under a secure HTTPS context, but modern browsers like Chrome and Firefox allow access to this API from localhost for development purposes.

There are two methods you can use to get user data:

  • getCurrentPosition(): Returns the current position of the device.
  • watchPosition(): Observes the position of the device continuously until the watcher is stopped.

Both methods above receive 3 arguments as follows:

  • success: a callback function for when the geolocation data is retrieved (required).
  • error: a callback function for when the method encounters an error (optional).
  • options: an object defining extra parameters when running the method (optional).

When the Geolocation API is accessed for the first time, a permission request will pop up near the URL bar as shown below:

Image Requesting Permission to Access User's Location

You might be familiar with the pop up above. When you choose to block the request, then the error callback function will be executed by the API.

Otherwise, the success callback will be executed.

How to Get User's Current Position

To get the user's current position, you can call the getCurrentPosition() from the navigator.geolocation object as shown below:

function success(position) {
  console.log(position);
}

navigator.geolocation.getCurrentPosition(success);

The getCurrentPosition() method will send the position object to the success() function above.

The position object contains the location coordinates and timestamp showing when the location was retrieved.

Below is an example of the position object:

{
  coords: {
    latitude: 1.314,
    longitude: 103.84425
    altitude: null
  },
  timestamp: 1708674456885
}

Using the latitude and longitude information, you can pinpoint the user's location and provide relevant information and services.

For example, let's see how you can send a request to the OpenStreetMap website and pin the user's current location using the data from Geolocation API.

OpenStreetMap is an open source project providing a free geographic map of the whole earth.

You need to create an HTML document with the following body content:

<body>
  <button id="getLocation">Get Location</button>
  <br>
  <a id="locationResult" target="_blank"></a>
</body>

When the user clicks on the Get Location button above, we will access the Geolocation API, retrieve the user location, and provide a link to see the user's location on a map.

Next, create a <script> tag before the closing </body> tag and write the following JavaScript code:

<script>
  const locationResult = document.querySelector('#locationResult');
  document.querySelector('#getLocation').addEventListener('click', () => {
    locationResult.textContent = 'Retrieving User Location...'

    function success(position) {
      let { coords } = position;
      locationResult.textContent = 'See my location on a map';
      locationResult.href = `https://www.openstreetmap.org?mlat=${coords.latitude}&mlon=${coords.longitude}`;
    }

    navigator.geolocation.getCurrentPosition(success);
  });
</script>

When the button is clicked, we'll run the getCurrentPosition() method and set the href attribute of the <a> tag to the OpenStreetMap website, passing along the latitude and longitude data under the mlat and mlong query string.

Visiting the link would show a map of the current location as shown below:

OpenStreetMap Using Geolocation API data The OpenStreetMap Website Pin On the Latitude and Longitude Data

And that's how you get the current location of the user. How to process the location information is up to you.

I've created a website where you can test this functionality at https://nathansebhastian.github.io/js-geolocation-api/

Next, let's learn about the watchPosition() method.

How to Watch User's Position

The watchPosition() method will continue watching the device position when called. It will run the success callback function each time the device location changes.

You can call the method as follows:

function success(position) {
  const { coords } = position;
  console.log('Latitude data: ' + coords.latitude);
  console.log('Longitude data: ' + coords.longitude);
}

navigator.geolocation.watchPosition(success);

The watchPosition() method returns an ID number that tracks the watcher. If you want to stop the watcher from sending location data, you need to call the clearWatch() method and pass the ID number:

function success(position) {
  const { coords } = position;
  console.log('Latitude data: ' + coords.latitude);
  console.log('Longitude data: ' + coords.longitude);
}

// Store the ID number in a variable
const watcherID = navigator.geolocation.watchPosition(success);

// Stop the watcher
navigator.geolocation.clearWatch(watcherID);

And that's all there is to the watchPosition() method.

How to Add the Options Object

Next, let's take a look at the optional options object that you can pass to getCurrentPosition() and watchPosition() methods.

The options object allows you to customize the behavior of the methods. There are three options you can set:

  • enableHighAccuracy: a Boolean value that instructs the method to provide a more accurate position. This will increase power consumption. The default value is false.
  • timeout: a number value representing how long the method waits for a response. The default value is Infinity, which means the method will wait until a location is available.
  • maximumAge: a number value representing how long the Geolocation API can send the previous location data. The default value is 0, so the API always returns the latest location. If set to Infinity, then the API will always return the first location data retrieved.

You can use the options object when calling the geolocation methods.

For example:

const options = {
  enableHighAccuracy: true, // enable high accuracy
  timeout: 300000, // wait for 5 minutes
};

function success(position) {
  console.log(position);
}

function error(error) {
  console.log(error);
}

// Run the getCurrentPosition() method with custom options
navigator.geolocation.getCurrentPosition(
  success,
  error,
  options
);

In the code above, the getCurrentPosition() method will use high accuracy mode, and it will wait for 5 minutes for a response from the device.

Summary

The Geolocation API is a standard JavaScript API that allows a web application to access user location data.

Using the Geolocation data, you can provide services or content relevant to the user's location, such as the nearest public transport or hospital.

If you enjoyed this article and want to learn more from me, I recommend you check out my new book Beginning Modern JavaScript.

Beginning Modern JavaScript

The book is designed to be easy for beginners and accessible to anyone looking to learn JavaScript. It provides a step-by-step gentle guide to help you understand how to use JavaScript to create a dynamic web application.

Here's my promise: You will actually feel like you understand what you're doing with JavaScript.

See you in other articles!

]]> <![CDATA[ How to Set Up Geolocation Search in Your App with Elasticsearch ]]> https://www.freecodecamp.org/news/geolocation-search-elasticsearch/ 66d4608b47a8245f78752a9d Thu, 07 Jan 2021 17:12:37 +0000 By Pramono Winata

Location-based features are pretty common in apps nowadays. These features might seem complicated, but they can actually be implemented quite easily with Elasticsearch.

Elasticsearch is a NoSQL database with a document-based structure. It's often used as a Search Engine. It also provides its own syntax and many tools to help your search be as flexible as possible.

In this article I will show you a simple way to search by geolocation by getting a list of cities by coordinate range.

How to Install Elasticsearch

Image

You can find an easy-to-follow installation guide on Elasticsearch's website. At the time I am writing this article, I am using Elasticsearch version 7.4.2 .

Just keep in mind that Elasticsearch has made a lot of changes in recent versions, one of them being the removal of mapping types. So if you are using another version of Elasticsearch some things here might not fully work.

After finishing your installation, do not forget to run your Elasticsearch service, which they emphasize clearly in their installation guide (for Linux, do this ./bin/elasticsearch ).

Make sure your elasticsearch is running by using a GET request into port 9200 in your local machine, like this: GET http://localhost:9200

How to Make Your Elasticsearch Index

An index is similar to table in a regular database. For this example, let's make an index named cities that will contain our data.

Let's also define a simple model for our data:

  • id : keyword for our identifier
  • name : text for the city name
  • coordinate : geo_point to store our city coordinates (neat, they have this data-type already)

In Elasticsearch, we create the index by making a curl into an API. In our case our request will be like this:

PUT http://localhost:9200/cities

{
    "settings": {
        "number_of_shards": 1,
        "number_of_replicas": 1
    },
    "mappings": {
        "properties": {
            "id": {
                "type": "keyword"
            },
            "name": {
                "type": "text"
            },
            "coordinate": {
                "type": "geo_point"
            }
        }
    }
}

When you used that curl, you should get a response like this to verify that your index has been created:

{
    "acknowledged": true,
    "shards_acknowledged": true,
    "index": "cities"
}

Nicely done! Now your index is ready to be used. Let's go ahead and play around with our newly created index.

How to Populate Elasticsearch Data

We will now fill our Elasticsearch index with documents. If you are not familiar with this term, just know that it is very similar to rows in a SQL database.

In Elasticsearch, it's possible to store data that doesn't match with our predefined schema. But we will not do that here – instead we will insert data that matches our predefined schema.

Since we will be inserting multiple data at once, we will use the bulk API that Elasticsearch provides that allows multiple insertions in one API call.

In the example below, I will be inserting 9 cities into my index. Feel free to add more if you wish.

POST '[http://localhost:9200/cities/_bu](http://localhost:9200/cities/_bu)lk

{ "index":{"_index": "cities" } }
{ "id": 1, "name": "Jakarta", "coordinate": {  "lat": -6.2008, "lon": 106.8456}}
{ "index":{"_index": "cities" } }
{ "id": 2, "name": "Tokyo", "coordinate": {  "lat": 35.6762, "lon": 139.6503} }
{ "index":{"_index": "cities" } }
{ "id": 3, "name": "Hong Kong", "coordinate": {  "lat": 22.3193, "lon": 114.1694} }
{ "index":{"_index": "cities" } }
{ "id": 4, "name": "New York", "coordinate": {  "lat": 40.7128, "lon": -74.0060} }
{ "index":{"_index": "cities" } }
{ "id": 5, "name": "Paris", "coordinate": {  "lat": 48.8566, "lon": 2.3522} }
{ "index":{"_index": "cities" } }
{ "id": 6, "name": "Bali", "coordinate": {  "lat": -8.3405, "lon": 115.0920} }
{ "index":{"_index": "cities" } }
{ "id": 7, "name": "Berlin", "coordinate": {  "lat": 52.5200, "lon": 13.4050} }
{ "index":{"_index": "cities" } }
{ "id": 8, "name": "San Fransisco", "coordinate": {  "lat": 37.7749, "lon": -122.4194} }
{ "index":{"_index": "cities" } }
{ "id": 9, "name": "Beijing", "coordinate": {  "lat": 39.9042, "lon": 166.4074} }

The payload might looks weird since it's in an incorrect JSON format, but don't worry – it's supposedly designed that way.

It should then reply back to you with a response similar to this:

{
    "took": 72,
    "errors": false,
    "items": [
        //will contains item for each data inserted
        ...
    ]
}

How to Query Your Elasticsearch Documents

Image _Photo by [Unsplash](https://unsplash.com/@chrislawton?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit">Chris Lawton / <a href="https://unsplash.com/?utm_source=ghost&utm_medium=referral&utmcampaign=api-credit)

Now comes the interesting part. We are going to do some querying with the documents that we inserted before.

Elasticsearch supports many types of syntax for query searching. It also has geolocation type searching which we will play around with today.

We can simply start searching for our cities with curl like this:

POST '[http://localhost:9200/cities/_sear](http://localhost:9200/cities/_sear)ch

{
  "query": {
    "bool": {
      "filter": {
        "geo_distance": {
          "distance": "10km",
          "coordinate": {
            "lat": 37.76,
            "lon": -122.42
          }
        }
      }
    }
  }
}

That query should give me San Francisco, and the coordinates 37.7749 and -122.4194 should be inside a 10km distance radius from our coordinates (courtesy of Google).

{
    "took": 7,
    "timed_out": false,
    "_shards": {
        "total": 1,
        "successful": 1,
        "skipped": 0,
        "failed": 0
    },
    "hits": {
        "total": {
            "value": 1,
            "relation": "eq"
        },
        "max_score": 0.0,
        "hits": [
            {
                "_index": "cities",
                "_type": "_doc",
                "_id": "eKPspHYBivyIhfWHb2vl",
                "_score": 0.0,
                "_source": {
                    "id": 8,
                    "name": "San Fransisco",
                    "coordinate": {
                        "lat": 37.7749,
                        "lon": -122.4194
                    }
                }
            }
        ]
    }
}

Congratulations! Now you have your own location search engine.
But let's experiment a bit more. Let's say you want to get more cities in that location.

Let's try to expand the distance to 4500km by changing the payload:

{
  "query": {
    "bool": {
      "filter": {
        "geo_distance": {
          "distance": "4500km",
          "coordinate": {
            "lat": 37.76,
            "lon": -122.42
          }
        }
      }
    }
  }
}

And you should get this response:

{
    "took": 8,
    "timed_out": false,
    "_shards": {
        "total": 1,
        "successful": 1,
        "skipped": 0,
        "failed": 0
    },
    "hits": {
        "total": {
            "value": 2,
            "relation": "eq"
        },
        "max_score": 0.0,
        "hits": [
            {
                "_index": "cities",
                "_type": "_doc",
                "_id": "dKPspHYBivyIhfWHb2vl",
                "_score": 0.0,
                "_source": {
                    "id": 4,
                    "name": "New York",
                    "coordinate": {
                        "lat": 40.7128,
                        "lon": -74.0060
                    }
                }
            },
            {
                "_index": "cities",
                "_type": "_doc",
                "_id": "eKPspHYBivyIhfWHb2vl",
                "_score": 0.0,
                "_source": {
                    "id": 8,
                    "name": "San Fransisco",
                    "coordinate": {
                        "lat": 37.7749,
                        "lon": -122.4194
                    }
                }
            }
        ]
    }
}

It gives two results: New York and San Fransisco. The results look correct, but the positioning might be a bit weird. San Fransisco supposedly should come first since it's closer, right?

Well not exactly, since what we are doing is just filtering. Our query is just filtering and it doesn't care about which one is closest to you.

But what if we want to do some calculation to show which locations might be the nearest? Don't worry, Elasticsearch can do that too. We can use a type of query called a function score query.

How to Use a Function Score Query in Elasticsearch

Elasticsearch calculates (scores) what documents it will show to the user. By using function score queries we can modify that score so we can determine which documents should be returned.

Here, we will be using the decay query function. There are three kinds of decay functions: exp, linear, and gauss. Each of them has different behaviors.

Image Image source

The one we will use here is the linear type function. We will also specify the coordinates together with offset and scale.

POST '[http://localhost:9200/cities/_sear](http://localhost:9200/cities/_sear)ch

{
  "query": {
    "function_score": {
      "functions": [
        {
          "linear": {
            "coordinate": {
              "origin": "37, -122",
              "offset": "100km",
              "scale":"2500km"
            }
          }
        }
      ],
       "min_score":"0.1"
    }
  }
}

Now, we should get our results ordered by the highest score.

{
    "took": 32,
    "timed_out": false,
    "_shards": {
        "total": 1,
        "successful": 1,
        "skipped": 0,
        "failed": 0
    },
    "hits": {
        "total": {
            "value": 2,
            "relation": "eq"
        },
        "max_score": 1.0,
        "hits": [
            {
                "_index": "cities",
                "_type": "_doc",
                "_id": "eKPspHYBivyIhfWHb2vl",
                "_score": 1.0,
                "_source": {
                    "id": 8,
                    "name": "San Fransisco",
                    "coordinate": {
                        "lat": 37.7749,
                        "lon": -122.4194
                    }
                }
            },
            {
                "_index": "cities",
                "_type": "_doc",
                "_id": "dKPspHYBivyIhfWHb2vl",
                "_score": 0.19508117,
                "_source": {
                    "id": 4,
                    "name": "New York",
                    "coordinate": {
                        "lat": 40.7128,
                        "lon": -74.0060
                    }
                }
            }
        ]
    }
}

And that wraps it up!

Conclusion

In this article, we've covered how to implement location-based search with Elasticsearch. But this is not the end – what I have shown here is just the surface of what you can do.

I hope you found this article interesting and useful. If so, keep learning more about it and try to experiment with combining function scoring. It will be fun, I promise.

Always be curios and you will learn something new.

]]>