How to implement autocomplet place search box with Leaflet API

Question

I would like to ask you how to implement just search box function from leaflet-search plugin and just for two countries. I want to make input field for location inserting with function of autocomplete.

I tried to implement search box with map first, but I can see just map and no search box.

Can you advice me where to start? I am new in it and I do not know way to go.

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© OpenStreetMap'
}).addTo(map);


var searchLayer = L.geoJson().addTo(map);
//... adding data in searchLayer ...
L.map('map', { searchControl: {layer: searchLayer} });

score 3 · Accepted Answer · answered Sep 22 '22 at 11:46

3

Check out the L.Control.Geocoder plugin for Leaflet. This plugin allows you to search for locations using a number of different services like Open Street Maps.

To limit the search results to a some countries, you have to configure the geocoding service that you use. I have created a quick example using OSM/Nominatim that limits the search results to the UK and US:

var map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '© OpenStreetMap'
}).addTo(map);

let geoCoderOptions = {
  collapsed: false,
  geocoder: L.Control.Geocoder.nominatim({
        geocodingQueryParams: {
          // List the country codes here
          countrycodes: 'gb,us'
        }
    })
}

L.Control.geocoder(geoCoderOptions).addTo(map);

See working example on codepen. If you search for a location (input in the top-right corner), you should only get results that are in the UK or the US. Hope this helps!

answered Sep 22 '22 at 11:46

strfx

81
3

1

Thank you for answer it is working well. And is it possible to make just autocomplete for input field of form without map by this plugin? Then I need to save latitude and longitude of this place to db. Bcz I want to calculate distance btw two places. – Dump Sep 23 '22 at 08:57
1

Depends on the use case: Do your users insert coordinates directly or are they searching by location, and what results do you expect from the auto-completion? To calculate the distance between two coordinates, you can use Leaflet's [map#distance()](https://leafletjs.com/reference.html#map-distance) function. – strfx Sep 23 '22 at 10:25
1

I want to have input where user should write location where he/she lives. If user type for ex. "Tre" I want to offer him possible cities, for example "Trencin, Slovakia", "Trencianske Stankovce, Slovakia", ... Then I want to give user possibility to show advertisement just from some locality in exact distance from his/her city. – Dump Sep 23 '22 at 10:40
Yes, you can achieve exactly that using [L.Control.Geocoder](https://github.com/perliedman/leaflet-control-geocoder). Type in "Tre", press Enter and it will suggest locations starting with "Tre". Just adjust the country codes in the codepen above. Back to your question: You could do that without the plugin, but it means (re-)implementing a lot of the functionality already included in the plugin. – strfx Oct 04 '22 at 07:37

How to implement autocomplet place search box with Leaflet API

1 Answers1