Leaflet custom zoom levels

leaflet_custom_zoom_levels.js

/*
Most map tile providers use 256px square tiles so Leaflet's basic zoom algorithm looks like this:

256 * Math.pow(2, zoom);

If you're working with vector layers you can extend one of leaflet's default CRSs 
and make it return tile sizes in smaller increments. This can be very helpful when using 
fitBounds() with layer groups, so the zoomed group fits better within the map bounds:

E.g., extending L.CRS.EPSG3857 (the default CRS):
*/

L.CRS.CustomZoom = L.extend({}, L.CRS.EPSG3857, {
    scale: function (zoom) {
        return 256 * Math.pow(1.5, zoom);
    }
});

var map = new L.Map('map', {
    crs: L.CRS.CustomZoom
});

/* 
It's worth noting you can also swap the CRS on the fly if you need to swap between a vector layer and a tile layer
*/

// swap back to standard zoom
map.options.crs = L.CRS.EPSG3857;

This was very helpful to get started working with more gradual zoom levels. One thing I quickly learned is that it is necessary to round the result of scale() to be able to (easily) use images in the tile layer.

Really useful, thanks!