Search code examples
leafletzoomingbackground-color

Change Map background color on Zoom -Leaflet


I want to change the background color on zoom.my current background color of the map is blue which I have assigned in the CSS file. on my map I have some markers .when I click on marker it zooms to a specific location on raster tiles. when my map zooms to raster tiles I want to change the map background color to white. How can I change map background color after a certain zoom level


Solution

  • Listen on the zoom event and then add the css class for the zoom.

    L.DomUtil.addClass(map.getContainer(),'blue-bg');
    
    map.on('zoom',(e)=>{
      var zoom = map.getZoom();
      
      if(zoom > 13){
        L.DomUtil.addClass(map.getContainer(),'white-bg');
        L.DomUtil.removeClass(map.getContainer(),'blue-bg');
      }else{
        L.DomUtil.removeClass(map.getContainer(),'white-bg');
        L.DomUtil.addClass(map.getContainer(),'blue-bg');
      }
    });
    

    https://jsfiddle.net/falkedesign/4ob7vtnz/