Is it possible to only load Leaflet vector tiles at specific zoom levels?

Question

I am "getting to know" Leaflet + TileStache, and wondering if there is a way to not have GeoJSON tile layers go back to the server on every single zoom level, but rather fetch every, say, 3 zoom levels ... and instead do client-side clipping and zoom-level specific styling (like start rendering labels, etc). of features it already has loaded.

This would save a lot of traffic....

I see a similar question came up a while back:

https://stackoverflow.com/questions/28904160/how-to-use-chunky-coarse-grained-zoom-levels-with-leaflet-maps

but never seems to have been definitively resolved.

Answer 1

If we talk about L.tileLayer, which is raster, you can set it to be displayed only at desired zoom levels by setting minZoom's and maxZoom's, e.g.

L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
  minZoom: 5,
  maxZoom: 12,
}).addTo(map);

L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
  minZoom: 14,
  maxZoom: 18
}).addTo(map);

Example in codepen.io: http://codepen.io/dagmara223/pen/XpyYam

But for GeoJSON layer as far as I know, there are no native LeafletJS methods to set max/min zoom levels for it, at least not specified directly in the docs: http://leafletjs.com/reference-1.0.3.html

Answer 2

i know this question is more than a year old now but...
GeoJSON layers can be loaded specifically by map events,
you could use a value that capture the zoom level using map.getZoom() and update your layers accordingly to every change that is above or below your wanted zoom level.

for example if you want to change the radius of circle markers by zoom levels you could create a function the uses a simple if

map.on('zoom', function() {
    YourLayer.eachLayer(function (layer) { 
    if(map.getZoom() >= 12 & map.getZoom() <= 15){
        layer.setStyle({ radius : 8}) 
             }else{layer.setStyle({ radius : 3}) }
        });
});

hope this still helps someone.