L.Control.Search for filtered marker with multiple layer

Question

I have two geojson layer. tram.js and ubahn.js, both with just marker, I use them in a filter and want to search for these filtered marker. But it isn't working and I don't get any errors.

I used this Plugin: https://github.com/stefanocudini/leaflet-search/blob/master/examples/multiple-layers.html

This is it working: https://labs.easyblog.it/maps/leaflet-search/examples/multiple-layers.html

  var ubahn = {"type": "FeatureCollection","features": [{
      "type": "Feature",
      "properties": {
       "geometry": {
        "type": "Point",
        "coordinates": [
          7.000036,
          51.4452814
        ]
      },
        "name": "Planckstraße",
        "iconcategory": "ubahn"
      }
    },

And

var tram = {"type": "FeatureCollection","features": [{
      "type": "Feature",
      "properties": {
        "name": "Dellwig Bahnhof",
        "iconcategory": "tram"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          6.9251056,
          51.4877009
        ]
      }
    },

And this is my code to filter my marker:

    let checkboxstatus

        var geojsonLayer = L.geoJSON(null, {
        filter: (feature) => {
           const isLineChecked = checkboxstatus.lines.includes(feature.properties.line)
        // CODE OF A WORKING FILTER
},


onEachFeature: function forEachFeature (feature, layer) {
                var popupContent = feature.properties.name;
            if(feature.properties && feature.properties.popupContent) {
                popupContent += feature.properties.popupContent;
                } layer.bindPopup(popupContent);
            },

            pointToLayer: function (feature, latlng) {
                return L.marker(latlng, {
                    icon: L.divIcon({
                        className: feature.properties.iconcategory,
                        html: feature.properties.iconcategory[0].toUpperCase(),
                        iconSize: L.point(25, 25),
                    })
                })

                  .bindTooltip(feature.properties.name);
            }
        }).addTo(map);
function updatecheckboxstatus() {
        checkboxstatus = {
        lines: [],
            // MORE CODE
        }

        for (let input of document.querySelectorAll('input')) {
            if (input.checked) {
                switch (input.className) {
                    case 'line': checkboxstatus.lines.push(input.value); break
                    // AND MORE CODE
                }
            }
        }
    }

    for (let input of document.querySelectorAll('input')) {
        //Listen to 'change' event of all inputs

        input.onchange = (e) => {
            geojsonLayer.clearLayers()
            updatecheckboxstatus()
            geojsonLayer.addData([ubahn, tram])
        }
    }


    /****** INIT ******/
    updatecheckboxstatus()
    geojsonLayer.addData([ubahn, tram]);

And now, I thought I could add the search function and use the geojsonLayer

    /*
    var markerSuche = new L.geoJson([
       geojsonLayer, geojsonOpts          
    ]);
    markerSuche.addTo(map); */

    var searchControl = new L.Control.Search({
        layer: geojsonLayer,
        propertyName: 'name',
        container: 'findbox',
        textPlaceholder: 'Suche',
        collapsed: false,
        marker: false,
        moveToLocation: function (latlng) {
            console.coordinates(latlng);
            map.setView(latlng, 12); // set the zoom
        }
    });

    map.addControl(searchControl);

Is it possible, what I had in my head? Did I just miss a ; or ) somewhere? Using the markerSuche layer ( in /* */) isn't working as well. Do I need markerSuche? Where is my mistake? I just want to search for the marker in my filter.

Answer 1

Apart from ubahn GeoJSON properties being a bit mangled and both features missing line property, it's hard to say why above code doesn't work for you.

Code below (ES5 syntax) worked for me:

<div id="map"></div>
<input type="checkbox" class="line" value="Line1"> Line 1<br>
<input type="checkbox" class="line" value="Line2"> Line 2<br>

<script>

var ubahn = {"type": "FeatureCollection","features": [{
  "type": "Feature",
  "properties": {
    "name": "Planckstraße",
    "iconcategory": "ubahn",
    "line": "Line1"
  },
   "geometry": {
    "type": "Point",
    "coordinates": [
      7.000036,
      51.4452814
    ]
  }
}]};

var tram = {"type": "FeatureCollection","features": [{
  "type": "Feature",
  "properties": {
    "name": "Dellwig Bahnhof",
    "iconcategory": "tram",
    "line": "Line2"
  },
  "geometry": {
    "type": "Point",
    "coordinates": [
      6.9251056,
      51.4877009
    ]
  }
}]};

var map = L.map('map', {
        zoom: 10,
        center: new L.latLng(51.4452814, 7.000036),
        layers: L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
    });


var geojsonLayer = L.geoJson(null, {
  filter: function(feature) {
     var isOK = (checkboxstatus.lines.indexOf(feature.properties.line) >= 0);
     return(isOK);
  },  
    pointToLayer: function(feature, latlng) {
        return L.marker(latlng).bindPopup(feature.properties.name);
    }
});

var searchControl = new L.Control.Search({
  layer: geojsonLayer,
  propertyName: 'name',
  textPlaceholder: 'Suche',
  collapsed: false,
  marker: false,
  moveToLocation: function (latlng) {
    map.setView(latlng, 12);
  }
});

map.addControl(searchControl);

var input = document.querySelectorAll('input');

for (var i = 0; i < input.length; i++) {
  input[i].onchange = function(e) {
    geojsonLayer.clearLayers();
    updatecheckboxstatus();
    geojsonLayer.addData([ubahn, tram]);
  }
}

var checkboxstatus;

function updatecheckboxstatus() {
  checkboxstatus = {
  lines: [],
  }
  var input = document.querySelectorAll('input');
  for (var i = 0; i < input.length; i++) {
    if (input[i].checked) {
      switch (input[i].className) {
        case 'line': checkboxstatus.lines.push(input[i].value); break
      }
    }
  }
}
updatecheckboxstatus();

</script>