Display geometry using place details with MapLibre

Estimated reading time: 1 minute

This example uses JawgPlaces.MapLibre to initialize a Jawg Places MapLibre Plugin on a webpage with a MapLibre or Mapbox map. It will allow you to perform Place Details requests and get the original geometry (Polygon or Point).

When you are requesting geometries, you can search only one location.

Checkout all options available on Jawg Places JS for MapLibre GL JS on our type documentation.

💡 Don't forget to call either map.addControl(jawgPlaces) or jawgPlaces.attachMap(map) to initialize and connect the input to the map.

You can try with these examples:

openstreetmap:island:relation/966358 (Corfu, II, Greece)
whosonfirst:locality:102031307 (Tokyo, Chiyoda, Japan)
osm:venue:node/4616798278 (Jawg Maps, Bagneux, France)

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>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/maplibre-gl.min.js"></script>
  </head>
  <body>
    <div id="my-map" style="height: 100%; min-height: 500px"></div>
    <script>
      const map = new maplibregl.Map({
        container: 'my-map',
        style: `https://api.jawg.io/styles/jawg-sunny.json?access-token=<YOUR_ACCESS_TOKEN>`,
        center: [0, 0],
        zoom: 1,
      });
      map.addControl(new maplibregl.NavigationControl());
      map.addControl(
        new JawgPlaces.MapLibre({
          searchOnTyping: true,
          place: {
            enabled: true,
            // Geometries as a string
            geometries: 'source',
            // Geometries as a function, can be changed dynamically
            // geometries: () => 'source',
            fillColor: 'rgba(172,59,246, 0.1)',
            outlineColor: 'rgb(172,59,246)',
          },
        }),
      );
    </script>
  </body>
</html>