3

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.

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

  • not sure this is what I would want; I still want to zoom between various levels, i.e. 12-15, but I only want Leaflet to actually try to fetch at 12, and then just zoom through 13 and 14 with the vectors it collected at 12. So minZoom would be 12 and max would be 15, but currently it would still attempt to fetch new stuff when it crossed 13 and 14... I think – Chris Nicholas Feb 11 '17 at 3:09
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.