Use custom layers (localities)

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 restrict your results based on layers and sources using layers and sources parameters from Jawg Places API.

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

We use two restrictions, the first one is the layers restriction that will return only results from types localadmin, locality or borough. The second restriction is the sources that will return only results from Who's On First and OpenStreetMap sources, our main administrative source.

You can try any cities such as Paris, New York... This will work perfectly.

However, full address will return nothing, for example 40 Avenue Aristide Briand, Jawg Maps and France will not return the country.

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,
        // layers and sources as arrays
        layers: ['localadmin', 'locality', 'borough'],
        sources: ['wof', 'openstreetmap'],
        // layers and sources as strings
        // layers: 'localadmin,locality,borough',
        // sources: 'wof,openstreetmap',
        // layers and sources as functions, can be changed dynamically
        // layers: () => ['localadmin', 'locality', 'borough'],
        // sources: () => 'wof,openstreetmap',
      });
    </script>
  </body>
</html>