
# OpenLayers: Autocomplete Geosearch Tutorial

## OpenCage Geosearch OpenLayers: Autocomplete Tutorial

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

## Adding a Geosearch control to an OpenLayers map

[OpenLayers](https://openlayers.org/) 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 [OpenLayers quick tutorial](https://openlayers.org/doc/quickstart.html) and [reference](https://openlayers.org/doc/) 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/ol@10.9.0/ol.css" />
        <link rel="stylesheet" href="https://unpkg.com/@opencage/ol-opencage-geosearch@0.2.0/ol-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/ol@10.9.0/dist/ol.js"></script>
        <script src="https://unpkg.com/@opencage/geosearch-bundle@0.2.0/dist/js/opencage-geosearch-bundle.js"></script>
        <script src="https://unpkg.com/@opencage/ol-opencage-geosearch@0.2.0/dist/ol-opencage-geosearch.js"></script>
        <script>
          // wait until everything is loaded
          document.addEventListener('DOMContentLoaded', () => {
    
            // create and initialize openlayers map object
            var map = new ol.Map({
              target: 'map1',
              layers: [
                new ol.layer.Tile({
                  source: new ol.source.OSM()
                })
              ],
              view: new ol.View({
                center: ol.proj.fromLonLat([0, 40]),
                zoom: 0
              })
            });
    
            // geosearch options
            var options = {
              key: 'YOUR-GEOSEARCH-KEY',
              // you will need to become a customer to get a geosearch key
              // language: 'fr',
              // onSelect: (params) => { console.log('hello from onSelect', params) },
              position: 'topright'
            };
    
            // add geosearch to the map
            var controlGeosearch = new OpenCageGeosearchControl(options);
            map.addControl(controlGeosearch);
          });
        </script>
      </body>
    </html>

## OpenLayers map with an OpenCage Geosearch control

## Other Geosearch options

We also have [a Leaflet tutorial](https://opencagedata.com/tutorials/leaflet-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)

