5

How can I add a search box to a map that allows users to search>zoom to a polygon name?

So, if there are 100 polygons, the user would be able to type the name of the polygon (i.e., Symantec), then the map would zoom to the matching county.

5

There are various solutions for this (if you don't want exact zoom but centering). You can use using the list from Leaflet plugins page:

You can also take a look on the Bootleaf project, a Bootstrap based Leaflet template using typehead.js (an autocomplete search box).

All the mentioned projects above have demos available so you can check if it's the expected solution for you.

5

The two links ThomasG77 posted are great, especially Fusesearch, but I could not get it to work. I installed Fuse but still could not get it running. So I settled for Leaflet Search. The examples given is not that informative so here is a nice example that I found that works great. Hope this helps.

In the example replace LayerNameJSON with your geojson layer name and LayerFieldName with the field name that should be searched.

    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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.