Show/hide/edit layers depending of current zoom

[Hiboo]

Hi everyone,

I'm pretty new with leaflet and I started to search how to add a sort of filter to hide/show or edit a layer depending on the actual zoom.
For example i would :

-Hide layers containing name of cities for exemple when the zoom is under a certain level
OR
-Change style or whatever of these name to reduce their size, to adapt to the map (To avoid having in big on the map the name of cities when you un-zoomed enough to see the whole world).

I already done some research and i didn't find anything which help to do this.

[Paulo Vieira]

I never had the need to do what you want to do, but I guess the L.Map methods "For getting map state" will be useful for that. See "getZoom()", for instance.

--
 
 
 

[Bryan McBride]

You could try something like this:

map.on('moveend', function () {

    if (map.getZoom() >= 12 && map.hasLayer(cities)) {

       map.removeLayer(cities);

    }

})

[Hiboo]

Thx for your answers !
I will try your solution asap Bryan !

To answer to you Paulo, actually my project is to develop a sort of "map editor", to allow historian to create their own historical map (choose countries to show, add interactive events and so on). In this case, we will not use a server-based solution to display the map because they are too detailed for what we want to do. So, we will draw maps using only geoJSON or something like this. As a consequence if the user of the map created by an historian, un-zoom the map, i want to hide some information (name of cities for example) or to zoom-out them (to avoid having huge cities name when the current view of the map is the whole world).

Anyway, i will try Bryan solution and i will investigate a bit more the library possibilities during the next month.

;)

[Todd Albert]

Don't forget to turn the layer on, too. I modified the code to read:

    map.on('moveend', function () {

   if (map.getZoom() >= 12 && map.hasLayer(cities)) {

      map.removeLayer(cities);

   }

   if (map.getZoom() < 12 && map.hasLayer(cities)==false) {

      map.addLayer(cities);

   }

    });