Ajout d'un champ de recherche à un exemple Leaflet.js

12

Prenons l'exemple du lien suivant pour Folium : Visualisation de l'emploi aux États - Unis par comté .

Le résultat ressemble à ce que vous voyez ci-dessous:

    entrez la description de l'image ici

Je voudrais y ajouter un champ de recherche pour pouvoir effectuer une recherche par ville et avoir la visualisation zoomer et / ou centrer autour d'elle. Comment puis-je y ajouter un tel champ de recherche? Puis-je ajouter cette fonctionnalité peut-être dans le fichier HTML?

leaflet search Amelio Vazquez-Reina
la source
1
que voulez-vous faire lorsque vous trouvez une ville (par exemple, agrandir la carte de ce comté, renvoyer des statistiques, etc.?). De manière générale, vous devrez ajouter du html mais aussi du javascript.
toms
2
Cela peut être utile si vous pouvez nous dire ce que vous avez déjà essayé, quels ont été les résultats et ce que vous attendiez à la place.
BradHards
Existe-t-il un moyen de rechercher des adresses et de se limiter à une certaine région, par exemple, l'ouest de la Californie uniquement?
Elenor Khaganese

Réponses:

19

Vous pouvez utiliser le contrôle de recherche Leaflet . Il vous permet d'insérer un widget de recherche sur votre carte, d'effectuer une recherche par noms de lieux dans le monde entier (voir l' exemple Nominatim ), et une fois qu'un lieu est sélectionné, zoomez / centrez votre carte sur cet emplacement.

entrez la description de l'image ici

Sur le site Web GitHub de la recherche de dépliants, vous trouverez des exemples sur la façon d'ajouter le contrôle à votre carte de dépliants.

Germán Carrillo
la source
existe-t-il une autre solution pour rechercher vos données par champs ?
A.HADDAD
1
Peux-tu être plus précis? Que voulez-vous dire? Recherchez dans vos propres données. C'est possible. Un exemple peut être trouvé ici: labs.easyblog.it/maps/leaflet-search/examples/…
Stefan