Leaflet Control Search: open Popup for search result

Question

I'm using the wonderful plugin Leaflet.Control.Search in order to search for markers (from a geoJson marker group) on my map – which works great.

I only have one simple question now: how can I open a popup for the search result marker? I'm using custom marker icons with popups (which open on click) already bound to them – but I would like to open the respective popup automatically once it has been found via the search.

My code looks like this:

var searchControl = new L.Control.Search({layer: markers2, propertyName: 'Name', circleLocation:true});

    searchControl.on('search_locationfound', function(e) {

            e.layer.bindPopup(feature.properties.Name).openPopup();

    }).on('search_collapsed', function(e) {
            markers2.resetStyle(layer);
    });

    map.addControl( searchControl );  //inizialize search control

and thought it might work with that line:

e.layer.bindPopup(feature.properties.Name).openPopup();

but unfortunately it doesn't.. ;)

–

Oh, and a second question: at the moment I'm searching only in 1 geoJson layer ("markers2") – does anyone know whether it's possible to search in multiple layers at once?

Any suggestions? I'd be grateful for any help, thanks in advance!

Answer 1

got it: it works like this: e.layer.openPopup().openOn(map);

Answer 2

event.layer is set only for preloaded layer, if you search marker by ajax,jsonp or callData.. event.layer is undefined.

var geojsonLayer = new L.GeoJSON(data, {
        onEachFeature: function(feature, marker) {
            marker.bindPopup(feature.properties.name);
        }
    });

map.addLayer(geojsonLayer);

var controlSearch = new L.Control.Search({layer: geojsonLayer, initial: false});

controlSearch.on('search_locationfound', function(event) {
    event.layer.openPopup();
});

Look at GeoJSON demo: https://opengeo.tech/maps/leaflet-search/examples/geojson-layer.html

Answer 3

Recently, I was looking for an answer, and here is my solution for it

searchControl.on("search:locationfound", function (e) {
    if (e.layer._popup) e.layer.openPopup();
  });