Is it possible to have intermediate (2.5, 3.5, 4.5, etc.) zoom levels on a Leaflet map that is using Stamen Toner-lite tiles? This is the code I have so far that calculates the zoom level:

leafletmap.on('zoomstart', function (d){
    targetZoom = leafletmap.getZoom(); //Grabs whatever current zoom level is
    targetZoom = targetZoom +.5; //Adds .5
    leafletmap.setZoom(targetZoom); //Sets new value to zoom level
    console.log(targetZoom); //Consoles out new value
});

I tried just adding .5 to the code, but I get a too much recursion error, so I'm guessing it's not that simple. Any help or direction is greatly appreciated!

Is it possible to have intermediate (2.5, 3.5, 4.5, etc.) zoom levels on a Leaflet map that is using Stamen Toner-lite tiles? This is the code I have so far that calculates the zoom level:

leafletmap.on('zoomstart', function (d){
    targetZoom = leafletmap.getZoom(); //Grabs whatever current zoom level is
    targetZoom = targetZoom +.5; //Adds .5
    leafletmap.setZoom(targetZoom); //Sets new value to zoom level
    console.log(targetZoom); //Consoles out new value
});

I tried just adding .5 to the code, but I get a too much recursion error, so I'm guessing it's not that simple. Any help or direction is greatly appreciated!

• javascript
• maps
• leaflet

2 Answers 2

In version 1.0.0, Leaflet introduced fractional zooming:

https://leafletjs./examples/zoom-levels/#fractional-zoom

Before this, the zoom level of the map could be only an integer number (0, 1, 2, and so on); but now you can use fractional numbers like 1.5 or 1.25.

...

If you set the value of zoomSnap to 0.5, the valid zoom levels of the map will be 0, 0.5, 1, 1.5, 2, and so on.

If you set a value of 0.1, the valid zoom levels of the map will be 0, 0.1, 0.2, 0.3, 0.4, and so on.

The following example uses a zoomSnap value of 0.25:

var map = L.map('map', {
  zoomSnap: 0.25 
});

As you can see, Leaflet will only load the tiles for zoom levels 0 or 1, and will scale them as needed.

Leaflet will snap the zoom level to the closest valid one. For example, if you have zoomSnap: 0.25 and you try to do map.setZoom(0.8), the zoom will snap back to 0.75. The same happens with map.fitBounds(bounds), or when ending a pinch-zoom gesture on a touchscreen.

To be straight to the point: This is not possible. You would need to render your own tile-images, run them of your own server and create your own coordinate reference system (CRS) extension for Leaflet. If you look at how regular tilesets are made you'll understand why.

The URL for requesting tiles for stamen:

http://{s}.tile.stamen./toner/{z}/{x}/{y}.png

When requesting tiles, the {z} will be replaced with the map's current zoomlevel. The {x} and {y} are the coordinates for the tile. The {s} will be replaced with a subdomain. So if your at zoomlevel 6 at coordinate 1,1 it would try to load:

http://a.tile.stamen./toner/6/1/1.png

Now if you could (but you can't) zoom to level 6.5 it would try to load:

http://a.tile.stamen./toner/6.5/1/1.png

Those tiles simple don't exists on the stamen server and thus return a 404 for file not found. You can try for yourself just use these links:

http://a.tile.stamen./toner/6/1/1.png

http://a.tile.stamen./toner/6.5/1/1.png

http://a.tile.stamen./toner/7/1/1.png

So that will never work. You could, as said, run your own tile server, render your own tile images and setup your own L.CRS. You might want to take a look at this question too: Adding an extra zoom levels in Leaflet Maps