[GIS] GeoServer TMS with leaflet coordinates are different

coordinatesgeoserverleaflettile-map-service

I use the example tiger-ny layer from geoserver with leaflet like this:

var map = L.map('map').setView([62.92578, 32.08523], 13); 
L.tileLayer('http://localhost:8080/geoserver/gwc/service/tms/1.0.0/tiger-ny/{z}/{x}/{y}.png', {
  maxZoom: 18,
  tms: true,
  crs: L.CRS.EPSG4326,
  attribution: false
}).addTo(map);

I can see the Map and all works but not with the correct latlng.
The coordinates latlng are completely different.
This map shows basically the central park in new york and the correct latlng should be (40.78546, -73.96583) but in this geoserver tms the central park is at (62.92578, 32.08523).

Leaflet with geoserver tms should show the location with the correct latlng, like the central park at (40.78546, -73.96583) and not at (62.92578, 32.08523).

I don't understand why the coordinates are wrong when i use the tms of the GeoServer?

Best Answer

I know this is an old post but here's the solution anyway:

GeoServer's tilematrix has Y-up as per GIS convention. The Mapbox style of tilematrix has Y-down as per computer graphics convention. The basic TMS protocol assumes Y-down, so Leaflet needs to know to reverse the Y coordinates of the tile matrix (remember this is the Y of the tilematrix and not the actual real world coordinates).

There is a way of calculating the reversed y value mathematically but in Leaflet 0.7 there is a tms: true option and in v 1.0 you can simply use {-y} for servers like GeoServer that follow the GIS convention. See here and scroll to the bottom for more detail.

Related Question