Vertical Alignment Of Tms Tiles In Leaflet Using Epsg:25832 Projection

I am using Leaflet with Proj4Leaflet to work with tiles in 25832. The application is fairly simple: I am trying to overlay tiles in EPSG:25832 onto a omniscale basemap. I have copi

Solution 1:

This boils down to how the Y coordinate of TMS tiles is inverted (it becomes higher when going north, as opposed to default TileLayers, in which the Y coordinate becomes larger when going south).

Having a look on the Leaflet code that takes care of this specific feature will shed some light on the issue:

if (this._map && !this._map.options.crs.infinite) {
        var invertedY = this._globalTileRange.max.y - coords.y;
        if (this.options.tms) {
            data['y'] = invertedY;
        }
        data['-y'] = invertedY;
    }

There are two things critical to calculating the right Y coordinate for your tiles here:

• The CRS must be finite (it must have bounds)
• There must be a finite global tile range (which in Leaflet is ultimately defined by the CRS bounds and not the TileLayer bounds)

Long story short, your CRS should be defined with known bounds. For this particular case, taking information from the TMS capabilities document...

<BoundingBoxminx="273211.2532533697"miny="5200000.0"maxx="961083.6232988155"maxy="6111822.37943825"/>

...and turned into a L.Bounds definition when defining the Leaflet CRS, like...

// Define CRS
var rs25832 = new L.Proj.CRS(
    'EPSG:25832',
    proj4rs25832def, 
    {
        origin: [ 273211.2532533697, 6111822.37943825 ],
        resolutions: resolutions,
        bounds: [[273211.2532533697, 5200000],[961083.6232988155, 6111822.37943825]]
    }
);

Stuff should just work (with no need to pass the CRS to the tilelayers, since they will all use the map's), as in this working example.