Use Boundary Rectangle

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 rectangle area using boundary.rect 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 rectangle below.

Let's try locations within the rectangle:

Vienna (Austria)
Monaco
Bern (Switzerland)

Now you can also try locations outside the rectangle:

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 rectangle 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: {
          // Rectangle as an object
          rectangle: {
            min: { lat: 43.032582, lon: 5.097656 },
            max: { lat: 49.006466, lon: 26.762695 },
          },
          // Rectangle as a function, can be changed dynamically
          // rectangle: () => {
          //   return {
          //     min: { lat: 43.032582, lon: 5.097656 },
          //     max: { lat: 49.006466, lon: 26.762695 },
          //   };
          // },
        },
      });
    </script>
  </body>
</html>