Buscar y hacer zoom en las características json en Leaflet

Question

¿Cómo puedo agregar un cuadro de búsqueda a un mapa que permita a los usuarios buscar/acercarse a un nombre de polígono?

Por lo tanto, si hay 100 polígonos, el usuario podría escribir el nombre del polígono (por ejemplo, Symantec), luego el mapa se acercaría al condado correspondiente.

Answer 1

Existen varias soluciones para esto (si no quieres un zoom exacto pero centrado). Puedes usar la lista de página de plugins de Leaflet:

• Búsqueda de Leaflet
• Fusesearch

También puedes echar un vistazo al proyecto Bootleaf, una plantilla de Leaflet basada en Bootstrap que utiliza typehead.js (un cuadro de búsqueda autocompletar).

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

Answer 2

Los dos enlaces que ThomasG77 publicó son geniales, especialmente Fusesearch, pero no pude hacerlo funcionar. Instalé Fuse pero aún 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, reemplace LayerNameJSON con el nombre de su capa geojson y LayerFieldName con el nombre del campo que se debe buscar.

    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