Custom Tiles Showing Up Out of Order

[Nate Broyles]

Hello all,

I'm attempting to switch a web app I am working on from Google Maps v2 to Leaflet.  I'm using custom tiles for the map I'm displaying and the correct tiles are being downloaded.  However, when the tiles are displayed, they are shown in a jumbled order.  Does anyone have any thoughts on why this is happening?

Ideally the tiles on the map would appear like this:

('x' represents a purposefully blank tile)

1 2 3

4 5 6

x 7 x

The tiles are appearing as such:

2 5 1

3 4 6

7 x x

Here is a snippet of the relevant code:

    var url = this.view.urlBase + "z{z}x{x}y{y}.png?" + (new Date()).getTime();

    // The zoom levels are high so that we can easily reuse the tiles created with Google Maps in mind.

    var tiles = L.tileLayer(url, {

        continuousWorld: true,

        minZoom: 19,

        maxZoom: 23

    });

    this.internalObj = L.map("map", {

        center: [this.view.center.latitude, this.view.center.longitude],

        layers: [tiles],

        maxZoom: 23,

        minZoom: 19,

        zoom: 19

    });

Anyone have any thoughts?  I'm a bit lost at the moment.

Thanks!

-Nate

[Ken Martin]

Try setting tms: true when instantiating the map.

kpm

[Evan Savage]

I had the same problem...and then I realized that I forgot to include Leaflet's CSS.

Without that, you're missing the "position:" attributes required to render map tiles correctly.