CODEWITHSUNDEEP
zoomingleafletgeojson
user2932070
user2932070

Reputation: 21

leaflet control geojson layers by zoom level

just looking for a way to control geojson layers by zoomlevel like minZoom , maxZoom for tileLayers, any ideas?

Descrition: geojson points layer, different classes of points, say Nation capitol, Province Capitol, Department, capitol, rest of simple towns. Goal: at zoom level 4 display only Nation capitol (one only piont) at zoom level 6 diplay all of 24 province capitols (you will only see a part of them) at zoom level 8 display 524 departments capitols (you will only see a part of them) at zoom level 10 display rest of towns, same idea.

thanks in advance. JC

Upvotes: 1

Views: 4875

Answers (2)

GrantE
GrantE

Reputation: 159

Check out Map events in the Leaflet Docs.

You can subscribe to the 'zoomend' event as well as 'zoomstart' and a few others

map.on('zoomend', function (e) {
    myZoomHandler();
});

In your zoom handler function, loop over your layers and add or remove layers as needed. 

function myZoomHandler() {
    var currentZoom = map.getZoom();
    switch (currentZoom) {
        case 4:
         //show Capitols
        break;
        case 6:
         //show Provinces
        break;
        default:
         // etc
        break;
    }
}

Upvotes: 2

Dan Inactive
Dan Inactive

Reputation: 10060

Leaflet has a viewereset event that is triggered when the map updates (on load, on zoom). You can do something like:

map.on('viewreset', function() {
   var zoom = this.getZoom();
   // show/hide layers based on zoom level
}, map);

One way to show/hide layers is through L.GeoJSON's setStyle() method (use display or visibility properties).

Upvotes: -1

Related Questions