0

For reference: I use L.Control.Search to search for my Marker.

It's this Plugin: https://github.com/stefanocudini/leaflet-search/blob/master/examples/multiple-layers.html

And this is the working search function: https://labs.easyblog.it/maps/leaflet-search/examples/multiple-layers.html

My problem: Now, I want the popup of the marker I searched for to open automatically without me clicking. I butchered the code from a polygon layer, but can I make it work for only markers? I don't get any errors but don't get a popup either.

       var searchControl = new L.Control.Search({
            layer: myLayer,
            propertyName: 'name',
            collapsed: false,
            container: 'findbox',
            textPlaceholder: 'Search',
            marker: false,
            initial: false,
            buildTip: function (text, val) {
                var type = val.layer.feature.properties.iconcategory;
                return '<a href="#" class="' + type + '">' + text + '<b>' + type + '</b></a>';
            },

          moveToLocation: function (latlng, title, map, feature) {
                var zoom = 16;
                map.setView(latlng, zoom);
            }, 
        });

        searchControl.on('search:locationfound', function(e, feature) {

    if(e.layer._popup)
        e.layer.openPopup("test");

}).on('search:collapsed', function(e) {

    filterLayer.eachLayer(function(layer) { 
        filterLayer.resetStyle(layer);
    }); 
});

        map.addControl(searchControl);

This is a glimpse of the code I used for the popups.

onEachFeature: function forEachFeature(feature, layer) {

            var popups = "Name <b>" +
                feature.properties.name + "</b>;

            if (feature.properties && feature.properties.popups) {
                popups += feature.properties.popups;
            } layer.bindPopup(popups);

        },
2
  • Code above looks OK (except missing ending quote in feature.properties.name + "</b>;, but you should get error for that), so it's impossible to say what's wrong without possibility to test complete code. What do you see if you inspect e.layer._popup in the browser debugger? – TomazicM Jun 2 '20 at 19:01
  • There was a link to your full code in your comment that now dissappeared? Do you still need/expect help? – TomazicM Jun 3 '20 at 15:19
0

One simple thing that's wrong can be found in code above. Popup that is attached to layer can be opened only with .openPopup() or .openPopup(latLng) calls (see https://leafletjs.com/reference-1.6.0.html#popup). Both calls open existing popup content , so e.layer.openPopup("test") call does not work.

To change content of the layer popup on the fly when popup already exists, .setPopupContent() method has to be used, for example:

layer.setPopupContent(feature.properties.someProperty);
layer.openPopup();

Finding the other thing that is preventing popup display was quite tricky and possible only because the full code was available. In the full code there is a part that allows for different parts of GeoJSON layers to be filtered through dynamic select by clicking on checkboxes:

function updatecheckboxen() {
  checkboxen = {
    lines: [],
    escalators: [],
    wheelchairs: [],
    elevators: [],
    linien: [],
    aufzuge: [],
    rollstuhle: [],
    rolltreppen: [],
    untere30: [],
    uebere30: []
  }

  for (let input of document.querySelectorAll('input')) {
    if (input.checked) {
      switch (input.className) {
        case 'line': checkboxen.lines.push(input.value); break
        case 'escalator': checkboxen.escalators.push(input.value); break
        case 'wheelchair': checkboxen.wheelchairs.push(input.value); break
        case 'elevator': checkboxen.elevators.push(input.value); break

        case 'linie': checkboxen.linien.push(input.value); break
        case 'aufzug': checkboxen.aufzuge.push(input.value); break
        case 'rollstuhl': checkboxen.rollstuhle.push(input.value); break
        case 'rolltreppe': checkboxen.rolltreppen.push(input.value); break
        case 'unter30': checkboxen.untere30.push(input.value); break
        case 'ueber30': checkboxen.uebere30.push(input.value); break
      }
    }
  }
}

for (let input of document.querySelectorAll('input')) {
  input.onchange = (e) => {
    filterLayer.clearLayers()
    updatecheckboxen()
    filterLayer.addData([ubahn, tram])
  }
}

This code by itself is OK, the only problem is query selector .querySelectorAll('input'), which besides checkbox inputs selects also search condition input field. As a result, when search condition is entered, it triggers input.onchange processing function. Event is triggered after location is found and popup displayed, and as a consequence overlay is loaded again and as a consequence popup is closed. This happens so quickly that it appears popup was not opened at all.

Solution is to use different query selector that select only checkbox input fields:

document.querySelectorAll('[type = checkbox]')
8
  • Oh, thank you. I tried layer.setContent(feature.properties.name); layer.openPopup(); but it can't read the setContent(). Cannot read property 'setContent' of undefined. I tried e.layer.bindPopup('test').openPopup() console.log(e.latlng) and at least it's opening a popup. But as soon as I wanna use the setContent() it's not working anymore. – Isabella Jun 4 '20 at 20:07
  • Ups, my mistake, it should be layer.setPopupContent(…). Answer edited and corrected. – TomazicM Jun 5 '20 at 6:12
  • No, setContent() is right. leafletjs.com/reference-1.6.0.html#popup-setcontent (And even with setPopupContent, I get the same error.) – Isabella Jun 5 '20 at 8:00
  • Method .setContent() is for popup object, .setPopupContent() is for layer object. In your case you are setting popup content of a layer. If you want to use .setContent, then it should be layer.getPopup().setContent(…) – TomazicM Jun 5 '20 at 8:05
  • Tried ` layer.getPopup().setContent('test') layer.openPopup();` and layer.setPopupContent('test') layer.openPopup();. In both cases I get Cannot read property 'getPopup' of undefined and Cannot read property 'setPopupContent' of undefined. When I use e.layer.getPopup().setContent('test'); e.layer.openPopup(); it's opening the Popup, but feature.properties.name in setContent() (and the other case with setPopupContent()) isn't working. – Isabella Jun 5 '20 at 8:22

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.