Geocoding with Leaflet

Adding an autocomplete search box to your Leaflet powered map is easy with Geocode Earth.

<!DOCTYPE html>
<html lang="en">
  <head>
      <title>Geocode Earth Leaflet autocomplete demo</title>
      <meta charset='utf-8'>
      <meta name="viewport" content="width=device-width, initial-scale=1">

      <link rel="stylesheet" href="https://unpkg.com/leaflet@latest/dist/leaflet.css" />
      <script src="https://unpkg.com/leaflet@latest/dist/leaflet-src.js"></script>

      <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
      <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>

      <script src="https://unpkg.com/protomaps-leaflet@4.0.1/dist/protomaps-leaflet.js"></script>
  </head>
  <body>
      <div id="map"></div>
      <script>
          // configuration
          const API_KEY = '<YOUR API KEY>';
          const PROTOMAPS_KEY = '<YOUR PROTOMAPS KEY>';

          // create basic Leaflet map
          var map = L.map('map', {
            center:[0, 0],
            zoom: 2,
            minZoom: 2,
            maxZoom: 19,
            scrollWheelZoom: false,
            zoomControl: false
          });

          // Replace with your Geocode Earth API key
          const geocoder = new L.Control.Geocoder.GeocodeEarth({ apiKey: API_KEY });

          const control = L.Control.geocoder({
            placeholder: "Search a city or address",
            collapsed: false,
            geocoder
          });

          control.addTo(map);

          protomapsL.leafletLayer({
            url: 'https://api.protomaps.com/tiles/v3/{z}/{x}/{y}.mvt?key=' + PROTOMAPS_KEY,
            theme: 'light',
            lang: 'en'
          }).addTo(map);
      </script>
  </body>
</html>

Be sure to replace <YOUR API KEY> with your Geocode Earth API key.

Customizing #

The geocoder plugin can be customized, see the documentation on GitHub for more details.