Leaflet: Autocomplete Geosearch Tutorial

  1. Tutorials
  2. Geosearch
  3. Leaflet: Autocomplete

Adding a Geosearch control to a Leaflet map

Leafletjs is a powerful open source library to add maps to a website. Below is an example HTML page and map that includes an OpenCage Geosearch control to allow users to search for locations (cities, states, villages, etc) and then re-center the map on a selected location.

For details on how to control the map (set position, zoom, listen to events, add map markers, or set a different style) see the Leaflet quick tutorial and reference documentation.

For details on how to configure the Geosearch control (number of results, language, or country filters) see the geosearch documentation. Changing the layout (fonts, colors) is explained on the algolia autocomplete theming reference guide. 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- CSS files need to be in the head section -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@opencage/leaflet-opencage-geosearch/leaflet-opencage-geosearch.css" />
  </head>
  <body>

    <!-- add a map element anywhere on the map -->
    <div id="map1" style="width:750px; height:500px;"></div>

    <!-- script can be either in the head section or anywhere below the map -->
    <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
    <script src="https://cdn.jsdelivr.net/npm/@opencage/geosearch-bundle"></script>
    <script src="https://cdn.jsdelivr.net/npm/@opencage/leaflet-opencage-geosearch"></script>
    <script>
      // wait until everything is loaded
      document.addEventListener('DOMContentLoaded', () => {

        // create and initialize leaflet map object
        var map = L.map('map1').setView([40, 0], 5);

        // load map tiles
        L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
          attribution: 'Data <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, '
          + 'Map tiles &copy; <a href="https://carto.com/attribution">CARTO</a>'
        }).addTo(map);

        // geosearch options

        var options = {
          key: 'YOUR-GEOSEARCH-KEY',
          // you will need to become a customer to get a geosearch key

          position: 'topright',
          // see possible values: https://leafletjs.com/reference.html#control-position, default is 'topright'

          // placeholder: 'Type here to search for places', default is 'Search for places'

          // defaultZoomLevel: 10, // zoom level, default is 13

          // customMarkerOptions: {}, // Optional Leaflet Marker Options https://leafletjs.com/reference.html#marker-option

        };

        // add geosearch to the map
        var geosearchControl = L.Control.openCageGeosearch(options).addTo(map);
      });
    </script>
  </body>
</html>

Example leaflet map with an OpenCage Geosearch control

Other Geosearch options

We also have an OpenLayers tutorial, and a codepen example showing how to add geosearch to a MapLibre map.