Skip to content

Instantly share code, notes, and snippets.

@croxton
Last active May 20, 2022 16:13
Show Gist options
  • Save croxton/6248586 to your computer and use it in GitHub Desktop.
Save croxton/6248586 to your computer and use it in GitHub Desktop.
Leaflet custom zoom levels
/*
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;
@bra1n
Copy link

bra1n commented Jun 19, 2015

Really useful, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment