Adicionando uma caixa de pesquisa a um exemplo do Leaflet.js

12

Considere o exemplo no link a seguir para o Folium : Visualização de empregos nos EUA por município .

O resultado é semelhante ao que você vê abaixo:

    insira a descrição da imagem aqui

Gostaria de adicionar uma caixa de pesquisa para poder pesquisar por cidade e ter a visualização ampliada e / ou centralizada em torno dela. Como posso adicionar essa caixa de pesquisa a ela? Posso adicionar essa funcionalidade talvez no arquivo HTML?

leaflet search Amelio Vazquez-Reina
fonte
1
o que você deseja fazer quando encontrar uma cidade (por exemplo, faça zoom no mapa para esse município, retorne estatísticas etc.?). De um modo geral, você precisará adicionar html, mas também javascript.
toms
2
Ajuda se você puder nos dizer o que já tentou, quais foram os resultados e o que esperava que acontecesse.
precisa saber é o seguinte
Existe uma maneira de procurar endereços e restringir a uma determinada região, por exemplo, apenas o oeste da Califórnia?
Elenor Khaganese

Respostas:

18

Você pode usar o controle de pesquisa do folheto . Ele permite que você insira um widget de pesquisa em seu mapa, pesquise por nomes de lugares em todo o mundo (veja o exemplo de Nominatim ) e, uma vez que um local seja selecionado, faça um zoom / centralize seu mapa nesse local.

insira a descrição da imagem aqui

No site do GitHub da pesquisa de folhetos, você encontra exemplos de como adicionar o controle ao seu mapa de folhetos.

Germán Carrillo
fonte
existe outra solução para pesquisar seus dados por campos ?
A.HADDAD
1
Você pode ser mais específico? O que você quer dizer? Pesquise em seus próprios dados. Isso é possível. Um exemplo pode ser encontrado aqui: labs.easyblog.it/maps/leaflet-search/examples/…
Stefan