Leaflet - How to keep original coordinates system effective when using tile layer?

Question

In my Leaflet application I used to display a background layer with an ImageOverlay. But since the image is too big and slow down Leaflet processing, I switch to a tiling approach. I used gdal2tiles-leaflet to generate my tiles. It worked fine.

But now my cartesian coordinates system in which my backround layer is projected (I use Leaflet CRS Simple), is no more effective.

Here are my image specs:

width: 21002 px
height: 14694 px
resolution: 0.02 (1 meter = 50px)

Here are my image's bounds when using an ImageOverlay:

Here are my image's bounds when using a TileLayer:

And this is what it looks like when I display them together:

Does anyone know what's going on?

How did you use `gdal2tiles` **exactly**? What are the parameters you used? — IvanSanchez, Mar 19 '19 at 12:12
I called it like this `gdal2tiles.py -l -p raster -z 0-5 -w none image.png` — Martin Tovmassian, Mar 19 '19 at 12:54
Looks like a TMS vs XYZ issue but without seeing any code it's difficult to say. TileLayer constructor has a `tms` option, it's set to `false` by default. — LuisTavares, Mar 19 '19 at 14:06
This is how I initialize my TileLayer: ```const tileLayer = new L.TileLayer('./assets/mapping-assets/image/{z}/{x}/{y}.png').addTo(map);``` I tried to switch the tms option but the result remains the same. — Martin Tovmassian, Mar 19 '19 at 14:32
And should we assume that the units for the desired coordinates (the ones in the `ImageOverlay` case) are expressed in meters? — IvanSanchez, Mar 19 '19 at 15:37
You would probably be interested in https://stackoverflow.com/questions/44054833/how-to-use-leaflet-flyto-with-unproject-and-geojson-data-on-a-large-raster-i/44063119#44063119 — ghybs, Mar 20 '19 at 17:21

Martin Tovmassian · Answer 1 · 2019-03-22T06:18:24.217

As suggested by @TomazicM I investigated the leaflet-rastercoords plugin which is complementary to gdal2tiles-leaflet. Based on it, I implemented an API which allows to convert coordinates either in a raster or in a cartesian way.

To do so I firstly make the leaflet-rastercoords code available into a single method:

export let loadLeafletRastercoordsPlugin = (L: any) => {
    // rastercoords.js source code
}

Then I wrote a class to handle coordinates conversion:

import * as L from 'leaflet';
import { loadLeafletRastercoordsPlugin } from './leaflet-rastercoords';

export class RasterCoords {

    public rc: any;
    public map: L.Map;
    public rasterWidth: number;
    public rasterHeight: number;
    public resolution: number;

    constructor(map: L.Map, rasterWidth: number, rasterHeight: number, resolution: number) {
        loadLeafletRastercoordsPlugin(L);
        this.rc = new L['RasterCoords'](map, [rasterWidth, rasterHeight]);
        this.map = map;
        this.rasterWidth = rasterWidth;
        this.rasterHeight = rasterHeight;
        this.resolution = resolution;
    }

}

With one method to project raster coordinates into the original orthonormal plane of my image, based on its width, height and resolution, and by putting Y-axis in a bottom-up way:

public project(coordinates: L.LatLngTuple): L.LatLngTuple {
    coordinates = this.applyResolution(coordinates);
    const projectedCoordinates = this.rc.project(
        coordinates
    );

    return this.applyCartesianProjection([projectedCoordinates.y, projectedCoordinates.x] as L.LatLngTuple);
}

private applyResolution(coordinates: L.LatLngTuple): L.LatLngTuple {
    return coordinates.map((v: number) => v * this.resolution) as L.LatLngTuple;
}

private applyCartesianProjection(coordinates: L.LatLngTuple): L.LatLngTuple {
    return [(this.rasterHeight * this.resolution) - coordinates[0], coordinates[1]];
}

And with one method to "unproject" the cartesian coordinates (i.e. retroprocess point by point what the project method do):

public unproject(coordinates: L.LatLngTuple): L.LatLngTuple {
    coordinates = this.unapplyResolution(this.unapplyCartesianProjection(coordinates));

    return this.rc.unproject([coordinates[1], coordinates[0]]);
}

private unapplyResolution(coordinates: L.LatLngTuple): L.LatLngTuple {
    return coordinates.map((v: number) => v / this.resolution) as L.LatLngTuple;
}

private unapplyCartesianProjection(coordinates: L.LatLngTuple): L.LatLngTuple {
    return [Math.abs(coordinates[0] - (this.rasterHeight * this.resolution)), coordinates[1]];
}

Then the API helps me to effectively add objects to my map based on their cartesian coordinates:

const imageWidth = 21002;
const imageHeight = 14694;
const imageResolution = 0.02;
const map = L.map('map');
const rc = new RasterCoords(map, imageWidth, imageHeight, imageResolution);
map.setView(rc.unproject([imageWidth, imageHeight]), 2);
L.tileLayer('./image/{z}/{x}/{y}.png', {
    noWrap: true
}).addTo(map);
new L.CircleMarker(this.rc.unproject([293, 420])).addTo(map);

Leaflet - How to keep original coordinates system effective when using tile layer?

1 Answers1