
# Leaflet: Autocomplete Geosearch Tutorial

## OpenCage Geosearch Leaflet: Autocomplete Tutorial

Tutorial for implementing Leaflet: Autocomplete with the OpenCage Geosearch service - Worldwide location autosuggest based on open data.

## Adding a Geosearch control to a Leaflet map

[Leafletjs](https://leafletjs.com/) 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](https://opencagedata.com/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](https://leafletjs.com/examples/quick-start/) and [reference](https://leafletjs.com/reference.html) documentation.

For details on how to configure the Geosearch control (number of results, language, or country filters) see the [geosearch](https://github.com/OpenCageData/geosearch/#readme) documentation. Changing the layout (fonts, colors) is explained on the [algolia autocomplete theming](https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-theme-classic/#css-variables) 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](https://opencagedata.com/tutorials/openlayers-location-search), and a codepen example showing [how to add geosearch to a MapLibre map](https://codepen.io/opencage/pen/JjaepyE).

### Further Reading

- [OpenCage geocoding API Reference](https://opencagedata.com/api)
- [Comparing geocoding services](https://opencagedata.com/guides/how-to-compare-and-test-geocoding-services)
- [Cleaning / formatting your forward geocoding query](https://opencagedata.com/guides/how-to-format-your-geocoding-query)
- [Geocoding more quickly](https://opencagedata.com/guides/how-to-geocode-more-quickly)
- [Geocoding large datasets](https://opencagedata.com/guides/how-to-geocode-large-datasets)
- [Geocoding and preserving privacy](https://opencagedata.com/guides/how-to-preserve-privacy-by-showing-only-an-imprecise-location)
- [Sample address and coordinate lists for testing](https://opencagedata.com/tools/address-lists)

