I am displaying a gamemap using Leaflet. The map is nonwrapping.
I use L.CRS.Simple which is recommended for this (and makes sense).
I add multiple tilelayers, each created using gdal2tiles. The source images can differ in size (2048², 4096² or 8192², always square).
Displaying all that works fine with a bit of unproject magic, but now I wanted to add measurement tools and a scalebar. As the tiles have a size of 256px, the Leaflet internal scalebar always assumes the tilelayers to have an extent of 256 "meters".
Gdal2tiles already provides this information in the accompanying tilemapresource.xml as
An example fiddle of a map that actually should have an extent of 2048×2048 meters, where the source image (used to create the tiles) was 4096×4096 (giving tilesets).
Gdal2tiles helpfully creates a tilemapresource.xml that provides this information:
<BoundingBox minx="-4096.00000000000000" miny="0.00000000000000" maxx="0.00000000000000" maxy="4096.00000000000000"/>
<Origin x="-4096.00000000000000" y="0.00000000000000"/>
<TileFormat width="256" height="256" mime-type="image/png" extension="png"/>
<TileSets profile="raster">
<TileSet href="0" units-per-pixel="16.00000000000000" order="0"/>
<TileSet href="1" units-per-pixel="8.00000000000000" order="1"/>
<TileSet href="2" units-per-pixel="4.00000000000000" order="2"/>
<TileSet href="3" units-per-pixel="2.00000000000000" order="3"/>
<TileSet href="4" units-per-pixel="1.00000000000000" order="4"/>
<TileSet href="5" units-per-pixel="0.50000000000000" order="5"/>
</TileSets>
See this JSFiddle for an illustration of the nonadjusted scaleba (showing 256m width of the entire map instead of 2048 I want):
https://jsfiddle.net/qLkwLbg8/3/
However, I cannot see a way to tell Leaflet what scale a provided tilelayer actually has (something like setunitsperpixel(x, zoomlevel))"
Is there an option or setting I can use to tell Leaflet that a provided tilelayer actually has a specific "units-per-pixel" at a given zoom level? Or is this simply not supported by Leaflet and I have to manually hack around this?
This project is using Leaflet 1.0 .
Best Answer
Spent quite some time testing, and as usual, the solution is fairly simple once you know how Leaflet wants to work.
The solution is to specify a custom CRS with a custom transform function. This s where you can specify what each map unit/pixel represents, and this is what is used by Leaflet internally for all distance calculations and - well - transforms :) .
Leaflet does neither support changing CRS (Coordinate Reference System) of a map after its been initialized, nor does it support different CRS per layer. This means you have to specify this custom CRS before you initialize the map. Or you have to reinitialize the map when you want to load a different layer: If you need to do that, know that you can use "map.remove()" to properly remove an already initialized map (this function is not documented, so I had to search a bit).
Look at this fiddle for how I fixed the problem fiddle posted in the question:
https://jsfiddle.net/pdqavdup/2/