3

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?

4

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/

  • Whoa, thank you! That is exactly what was wrong with it! – Jackyef Aug 19 '17 at 1:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.