smeijer / leaflet-geosearch

A geocoding/address-lookup library supporting various api providers.
https://smeijer.github.io/leaflet-geosearch/
MIT License
1.03k stars 273 forks source link

Bind custom input #204

Closed FabioDominio closed 4 years ago

FabioDominio commented 4 years ago

Hi all,

I was wondering if it would be possible to bind an existing form input (like in Google Places library) as a search field, rather than adding a search bar on the map.

The idea is to exploit the plugin search feature inside a text input outside the map, displaying the search results and allowing to select the desired one.

Thanks in advance!

smeijer commented 4 years ago

Yes that's possible. As explained in the first code sample in the Readme#Usage

// import 
import { OpenStreetMapProvider } from 'leaflet-geosearch'; 

// setup 
const provider = new OpenStreetMapProvider(); 

// search 
const results = await provider.search({ query: 'Amsterdam' });
FabioDominio commented 4 years ago

Hi,

thanks for the answer.

I actually already evaluated that example before placing the question, but it still needs a lot of side work to make a text input act as the search bar in the map (that is, showing the list of results while typing below the input field).

I was just wondering if the plugin already provides the chance to do bind a text input automatically in order to make it act as the search bar. That is, using a selected container rather than embedding the search bar in the map.

If not, I will find a good way to make a text input mimic the search bar.

Thanks.

smeijer commented 4 years ago

I see. I think that's an edge case, and we don't have a way to help you out.

You can of course find some guidence in the leaflet control and search element in this repo. Check the src directory.