Side by side layout with Leaflet

Estimated reading time: 2 minutes

This example uses JawgPlaces.Leaflet to initialize the Jawg Places Leaflet Plugin on a webpage with a Leaflet map. It will allow you to add a search bar outside the map. This is the typical example of attachMap.

Checkout all options available on Jawg Places JS for Leaflet 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.

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/leaflet.css" />
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.js"></script>
  </head>
  <body>
    <div style="width: 100%; height: 100%; display: flex; flex-direction: row">
      <div
        style="
          max-width: 50%;
          align-items: top;
          display: flex;
          flex: 0 0 50%;
          border-right: #444 solid 2px;
          overflow: auto;
          width: 100%;
        "
      >
        <input id="my-input" type="text" placeholder="Search" />
      </div>
      <div style="min-width: 50%; flex: 0 0 50%">
        <div id="my-map" style="height: 100%; min-height: 500px"></div>
      </div>
    </div>

    <script>
      const map = new L.Map('my-map').setView([0, 0], 2);
      L.tileLayer(`https://tile.jawg.io/jawg-sunny/{z}/{x}/{y}.png?access-token=<YOUR_ACCESS_TOKEN>`, {
        attribution:
          '<a href="http://jawg.io" title="Tiles Courtesy of Jawg Maps" target="_blank" class="jawg-attrib">&copy; <b>Jawg</b>Maps</a> | <a href="https://www.openstreetmap.org/copyright" title="OpenStreetMap is open data licensed under ODbL" target="_blank" class="osm-attrib">&copy; OSM contributors</a>',
        maxZoom: 22,
      }).addTo(map);
      new JawgPlaces.Leaflet({
        input: '#my-input',
        searchOnTyping: true,
        transition: {
          type: 'hybrid',
        },
        L: L,
      }).attachMap(map);
    </script>
  </body>
</html>