Search code examples
leafletopenstreetmap

Places autocompletion with Leaflet: customize design?

There is a plugin for Leaflet maps that adds a button leading to a search bar featuring places auto-completion (link). How do I get the autocomplete functionality out of the plugin and use my own custom search bar instead?

Solution

  • Leaflet.GeoSearch is perfect for what you need. You can use it separately from Leaflet (check demo) or as in the Leaflet itself. It supports following data providers (but can easily be extended):

    • Esri

    • OpenStreetMap

    • Google

    • Bing

    • LocationIQ

    • OpenCage

    GitHub: https://github.com/smeijer/leaflet-geosearch

    Demo: https://smeijer.github.io/leaflet-geosearch

    NOTE: I am not connected to the creator in any way, just a happy user and considering adding HERE as a provider.

    There are other Geocoding solutions you can use on Leaflet's plugin page: https://leafletjs.com/plugins.html#geocoding

    On the other hand if you want to roll your own you only need to create a marker in Leaflet and center the map to it: https://leafletjs.com/examples/quick-start/