[Fixed] Switching programmatically between layers in Leaflet on Angular

Issue

I have to display layers which do not support all zoom-levels in Leaflet on Angular. These are WMTS-Layers loaded from external servers.

See example below:

Zoom-Level 12

Zoom-Level 13

How can i switch programmatically to a Layer which supports the corresponding zoom-layer to keep a usage-flow?
It’s not very easy for users to understand clearly that the layers are supportet not in every zoom-level.

The layer is use is configured as followed:

var baseMap = new L.TileLayer(
   'https://wmts.url.tld/{z}/{x}/{y}.png',
   {
      maxZoom: 15,
      attribution: '© source',
});

Solution

Listen on the zoomend event and add / remove the layer if zoom is greater / lower.

var MIN_LAYER_ZOOM_LEVEL = 14; // Zoom level until layer is visible

map.on('zoomend',(e)=>{
   var currentZoom = map.getZoom();
   if(currentZoom >= MIN_LAYER_ZOOM_LEVEL){
      baseMap.addTo(map)
   }else{
       baseMap.removeFrom(map) 
   }
});