I have been trying to understand how LeafletJS determines distances between two points in a layer. I am trying to implement the custom scale plugin, (and have done so successfully) on a static tiled image using the leaflet deepzoom tilelayer plugin.

Added Information

Using CRS.Simple, the image zoom is adjusted by powers of 2 by the looks of it:

CRS.Simple seems to operate in powers of 2:

o.CRS.Simple=o.extend({},o.CRS,{projection:o.Projection.LonLat,transformation:new o.Transformation(1,0,-1,0),scale:function(t){return Math.pow(2,t)}})

Constants that I know:

  1. DPI
  2. tile size (256 x 256 pixels)
  3. map size in pixels (bounds of the image)
  4. leaflet zoom level
  5. size of image in the real world

What do I change in Leaflet to allow me to make accurate scale bars?

1 Answer 1


If tiles are always 256x256 pixels, with one tile covering the planet at zoom level 0, increasing by powers of 4 at every zoom level, then roughly calculating distance per pixel at any zoom level is relatively straightforward (given the inherent errors of distance measurement in EPSG:3857)

If your image has been correctly georeferenced, split into tiles that are 256x256 pixels to match Leaflet's global {x}{y}{z} referencing system, and then displayed using Leaflet, then the custom scale plugin should work... But it sounds like you are using Leaflet as a continuous zoom viewer, without regard to where your tiles fit on earth in {x}{y}{z} space, and therefore the scale bar and the pixel distance per zoom table you referenced will not apply.

  • Fair enough. Reading that article makes it seem that using EPSG for precise measurements is not all that helpful anyways (nor what I want) Is there a way to make more precise measurements with L.CRS.Simple? CRS.Simple seems to operate in powers of 2 'o.CRS.Simple=o.extend({},o.CRS,{projection:o.Projection.LonLat,transformation:new o.Transformation(1,0,-1,0),scale:function(t){return Math.pow(2,t)}})'
    – kosataka
    Mar 25, 2015 at 17:00
  • is your image something like a 'map', or are you just zooming an arbitrary image, like the hubble example, and trying to do do measurements on that? If its a map, maybe use gdal2tiles, which will cut tiles to fit web mercator projection. Then built in leaflet scale tools will work. As far as I can tell, Leaflet scale is doing some tranformation, in the example, move the map north or south and you can see the scale adjust. A look at the code itself should give more insight into what it's doing
    – toms
    Mar 25, 2015 at 17:39
  • sorry, but not familiar enough with L.CRS.simple to answer your specific question
    – toms
    Mar 25, 2015 at 17:42
  • I'll take a look at the example again. The problem I'm running into is its not a map, so a lot of the normal tools aren't specifically catered to my task. I suspect the way of doing it is basically the same; it just won't use EPSG stuff.
    – kosataka
    Mar 25, 2015 at 17:53
  • So, I'm not having much luck. If I change my tileset source from deepzoom to a referenced {x}{y}{z} format using a TMS layer, will that allow proper measurement of the distances?
    – kosataka
    Mar 28, 2015 at 1:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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