Use Boundary Circle

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 search within a selected circle area using boundary.circle parameter from Jawg Places API.

Checkout all boundary options available on Jawg Places JS: JawgPlaces.BoudaryOptions.

The following example will return responses only in the circle below.

Let's try locations within the circle:

Paris (France)
Bruxelles (Belgium)
Luxembourg (Luxembourg)
Berne (Switzerland)

Now you can also try locations outside the circle:

New York (this one will return New Yorker shops instead of New York, USA)
London (this one will return venues with London in the name instead of London, UK)
Wikimedia (only offices within the circle are returned)

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,
        boundary: {
          // Circle as an object
          circle: {
            lat: 46.842269,
            lon: 2.39985,
            radius: 500,
          },
          // Circle as a function, can be changed dynamically
          // circle: () => {
          //   return {
          //     lat: 46.842269,
          //     lon: 2.39985,
          //     radius: 500
          //   }
          // }
        },
      });
    </script>
  </body>
</html>