Sort results by proximity

Estimated reading time: 1 minute

This example uses JawgPlaces.Input to initialize a Jawg Places Input inside an HTML element on a webpage. It will allow you to set a focus point to your search using focus.point parameter from Jawg Places API.

Results will be sorted in part by their proximity to the given coordinate. Coordinates can be static or dynamic via a function.

You can try with Bagneux, without focus point, the first result is Bagneux, Hauts-de-Seine, France. With a focus point near Indre region, the result is Bagneux, Indre, France

Checkout all common options available on Jawg Places JS: JawgPlaces.JawgPlacesInputOptions.

The value <YOUR_ACCESS_TOKEN> in the <script> tag must be replaced by your own access token from the Jawg Lab.

View on GitHub

<html>
  <head>
    <script src="https://api.jawg.io/libraries/jawg-places@latest/jawg-places.js?access-token=<YOUR_ACCESS_TOKEN>"></script>
  </head>
  <body>
    <input id="my-input" type="text" placeholder="Search" />
    <script>
      new JawgPlaces.Input({
        input: '#my-input',
        searchOnTyping: true,
        focus: {
          // Point as an object
          point: {
            lat: 47.1685,
            lon: 1.7567,
          },
          // Point as a function, can be changed dynamically
          // point: () => {
          //   return {
          //     lat: 47.1685,
          //     lon: 1.7567,
          //   };
          // },
        },
      });
    </script>
  </body>
</html>