Leaflet Control Search: open Popup for search result

2
votes

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!

2
searchpopupleaflet
Have you tried to do e.layer.bindPopup(feature.properties.Name).addTo(map).openPopup(); I think you have to tell it where to open up. So something like addTo() or openOn() might work. Check the docs here – Ju66ernaut
Hi Chris, thanks for the pointer! Your suggestion sounds about right, but it didn't seem to work that way.. hm, at some point before the search code above i already define the popup contents, so I guess I wouldn't necessarily have to repeat that content for the search popup, i'd just have to tell it to open the popup.. but how?! ; ) – julia
the code for the popups (before the search) is like this: var markers2 = new L.MarkerClusterGroup(); var geoJsonLayer2 = L.geoJson(data, { onEachFeature: function (feature, layer) { layer.bindPopup(feature.properties.Name); } ... – julia
got it: it works like this: e.layer.openPopup().openOn(map); – julia

2 Answers

3
votes

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

1
votes

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: http://labs.easyblog.it/maps/leaflet-search/examples/geojson-layer.html