moveToLocation and open Marker-Popup automatically

Question

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);

        },

Answer 1

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]')