Show result marker with Leaflet

Estimated reading time: 1 minute

This example uses JawgPlaces.Leaflet to initialize the Jawg Places Leaflet Plugin on a webpage with a Leaflet map. It will allow you to display a marker for your selected result on the map.

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 id="my-map" style="height: 100%; min-height: 500px"></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);
      map.addControl(
        new JawgPlaces.Leaflet({
          searchOnTyping: true,
          marker: {
            show: true,
          },
          L: L,
        }),
      );
    </script>
  </body>
</html>