I am working on my first project using Leaflet javascript library. After succesfully importing a geoJSON file on the map, I am trying to create a new geoJSON layer (currShownMarkersLayer), populated with only the markers which are currently within the map tile displayed, to use it as input to leaflet control search, so only these markers are searchable by leaflet control search. However, when I type something in leaflet control search box, I get this error:
Uncaught TypeError: this._retrieveData is undefined.
What am I doing wrong? Below I attach my code.
//////////////////////////Return geoJson Layer of visible markers on map///////////////////////
map.on('move', function() {
function getCurrentlyShownMarkers() {
var currShownMarkers = [];
map.eachLayer( function(layer) {
if(layer instanceof L.CircleMarker) {
if(map.getBounds().contains(layer.getLatLng())) {
currShownMarkers.push(layer.feature);
}
}
featuresLayer = new L.GeoJSON(currShownMarkers, {
});
});
return featuresLayer;
}
currShownMarkersLayer = getCurrentlyShownMarkers();
});
////////////////////////////////////////Leaflet-Search/////////////////////////////////////////////
var searchControl = new L.Control.Search({
layer: currShownMarkersLayer,
propertyName: 'name',
marker: false,
});
searchControl.on('search:locationfound', function(e) {
e.layer.openPopup();
});
map.addControl( searchControl );
Thanks for reading!