Leaflet control search clash with map.on zoomend function

Question

I would like to know how to solve the clash between Leaflet control plugin and map.on zoomend function

The problem is related to this query:

Displaying selected layers depending on zoom in Leaflet

and as it has been solved, there is still one issue to fix.

I discovered, that once the leaflet search plugin is attached to the map:

  L.control.search({
    layer: L.layerGroup([job2]),
    initial: false,
    propertyName: 'myKey',
    zoom: 18,
    position: 'topleft'
    }).addTo(map);

the map.on('zoomend', function() { doesn't work at the very initial stage (when open or refresh the map to default link).

The problem is shown in the image below:

Under the zoom level 7 all dots are still visible, whereas I set zoomend for zoom 9. When I start zooming in/out on the map, it starts work correctly as perr below:

My code looks as follow:

   L.control.search({
    layer: L.layerGroup([job2]),
    initial: false,
    propertyName: 'myKey',
    zoom: 18,
    position: 'topleft'
    }).addTo(map);

   map.on('zoomend', function() {
   if (map.getZoom() < 9){
if (map.hasLayer(job2)) map.removeLayer(job2);
   }
    else {
     if (document.querySelector("input[name=vm]").checked && 
 !map.hasLayer(job2)) map.addLayer(job2);
   }
  });

When enter the leaflet-search.js plugin, I see the section, which I believe is responsible for this affliction:

   showLocation: function(latlng, title) {  //set location on map from _recordsCache
    var self = this;
    /*
    self._map.once('moveend zoomend', function(e) {

        if(self._markerSearch) {
            self._markerSearch.addTo(self._map).setLatLng(latlng);
        }

    });
    */
    self._moveToLocation(latlng, title, self._map);
    //FIXME autoCollapse option hide self._markerSearch before visualized!!
    if(self.options.autoCollapse)
        self.collapse();

          return self;
      }

Regarding to this I switched off part of the code with: self._map.once('moveend zoomend', function(e) { but the problem remains the same.

Could somebody advice how to remove this issue and make the layers hidden at the initial stage (after refreshing the map)?

Link to my map is here:

https://mariusz-krukar.mkrgeo.pl/en/workshop/media/MDU_demo.html#55.21022,-1.57385,6z

Once open, you will see the dots still visible, whereas zoom level is 6. When yoyu turn into zoom 7 and back to zoom 6 they will be gone until refresh the map.

Answer 1

I ran into the same or at least a very similar problem.

I load a geojson file and then split it up in different layer groups (meaning I add the markers to those layer groups, but of course they are still present in the geojson object). I display these layer groups at different zoom levels with pretty much the same if else clause as you do.

And in the end, I do

map.addControl( new L.Control.Search({
    position:'topleft',                                 //where the search bar is shown
    layer: geojsonFile,                                 //the geojson layer with the markers
    propertyName:'title',                               //the property field of the feature that will be searched for
    moveToLocation: function(latlng, title, map) {      
        map.setView(latlng, 7);                         // pan & zoom to the marker 
    },
    hideMarkerOnCollapse: true                          //once search is completed and the search bar collapsed, make the circle that highlights the search result vanish
    })
);
map.removeLayer(jsonCommunities);

Notice that I search the geojson layer and not the layer groups that only exist at varies zoomlevels. And most importantly, I remove the layer I search from the map immediatly after I added the control.

Not sure if this is the most elegant solution to this problem, especially as I create a marker redunancy by having them in the geojson and in zoom level specific layer groups, but at least it works.