Change the search bar layout with MapLibre

Estimated reading time: 1 minute

This example uses JawgPlaces.MapLibre to initialize the Jawg Places MapLibre Plugin on a webpage with a MapLibre or Mapbox map. It will help you to completely change the display of the search bar. You must set values for input, container andresultContainer`.

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.

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

This example is fully compatible with Mapbox, you can use JawgPlaces.Mapbox and load mapbox scripts.

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>
    <style>
      .input-container {
        display: flex;
        flex-direction: row;
        width: 100%;
      }
    </style>
    <div id="my-container" class="mapboxgl-ctrl maplibregl-ctrl">
      <div class="input-container">
        <input id="my-input" style="width: 100%" type="text" placeholder="Search" />
        <button type="button">OK</button>
      </div>
      <div id="my-result-container" class="jawg-places-results"></div>
    </div>
    <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({
          container: '#my-container',
          input: '#my-input',
          resultContainer: '#my-result-container',
          searchOnTyping: true,
        }),
      );
    </script>
  </body>
</html>