Funciones json de búsqueda y zoom en Leaflet

Question

¿Cómo puedo añadir una caja de búsqueda a un mapa que permita a los usuarios buscar>zoom a un nombre de polígono?

Así, si hay 100 polígonos, el usuario podría escribir el nombre del polígono (por ejemplo, Symantec), y luego el mapa haría zoom hasta el condado correspondiente.

Answer 1

Hay varias soluciones para esto (si no quieres un zoom exacto sino un centrado). Puede utilizar la lista de Página de plugins del folleto :

• Búsqueda de folletos
• Fusesearch

También puede echar un vistazo a la Proyecto Bootleaf Una plantilla Leaflet basada en Bootstrap que utiliza typehead.js (un cuadro de búsqueda autocompletado).

Todos los proyectos mencionados anteriormente tienen demos disponibles para que puedas comprobar si es la solución esperada para ti.

Answer 2

Los dos enlaces que ha puesto ThomasG77 están muy bien, sobre todo el de Fusesearch, pero no he conseguido que funcione. Instalé Fuse, pero aún así no pude hacerlo funcionar. Así que me conformé con Leaflet Search. Los ejemplos dados no son tan informativos, así que aquí hay un buen ejemplo que encontré que funciona muy bien. Espero que esto ayude.

En el ejemplo sustituir LayerNameJSON con el nombre de su capa geojson y LayerFieldName con el nombre del campo que debe buscarse.

    var searchControl = new L.Control.Search({layer: LayerNameJSON , propertyName: 'LayerFieldName', circleLocation:false});
searchControl.on('search_locationfound', function(e) {
    e.layer.setStyle({fillColor: 'white', color: 'white', fillOpacity: 0.5});
    //map.fitBounds(e.layer.getBounds());
    if(e.layer._popup)
        e.layer.openPopup();
}).on('search_collapsed', function(e) {
    LayerNameJSON.eachLayer(function(layer) {
        LayerNameJSON.resetStyle(layer);
    });
});
map.addControl( searchControl );  //inizialize search control