[GIS] Leaflet JS not displaying map properly

leaflettile-map-servicetiles

I am trying to render a map provided by a tile map service based on {x}, {y} and {z} using leaflet.js. So far, I managed to render the map, but it is isn't shown correctly. The tiles are repeated oddly, and the Lat and Lng aren't accurate.

fiddle

For example, Lat: -2.6000285, Lng: 118.015776 with a zoom level of 5 should get the map to show the country Indonesia (see coords at google maps)

But it is not the case in my jsfiddle. Instead, Indonesia can be found around
Lat: 66, Lng: 331, Lat: 66, Lng: -29, and probably at other points every 360 increment/decrement as well. The point is, the lat-lng is not accurate to real world map.

How do I fix this?

Best Answer

Your Tile Map service uses a zoom offset of 1, i.e. the entire world fits in 4 tiles when {z} value is 2 (unfortunately your service does not provide the tile at zoom 1 where the entire world would have fit a single tile).

Tile showing 1/4 of the world with X = 0, Y = 0 and Z = 2:

To left quarter world tile

Usually the entire world fits in 4 tiles when {z} value is 1.

Therefore you can use that service with Leaflet Tile Layer and specifying zoomOffset option with value 1:

L.tileLayer(url, {
    zoomOffset: 1
}).addTo(map);

Updated JSFiddle: https://jsfiddle.net/jzncwy9r/9/

Related Question