I am working on a tile server with a leaflet.js UI. I have successfully created the tiles for my base map and the tiles for the overlay. The result can be seen here (zoom in further to see overlay). Unfortunately, as can be observed, the base map is incomplete and is wrapping in a weird way. This is not the result of a fault tiling process I believe as I am using the same tile hierarchy here, using openlayers.js. As you can see, in that UI, the base map is complete.

This is my current leaflet interface:

    <title>Mapea - Mapeamento Meoteorológica Inteligente</title>
    <link rel="stylesheet" href="style/leaflet.css" />
    <link rel="stylesheet" href="style/map.css" />
    <link rel="stylesheet" href="style/L.Control.MousePosition.css"  />
    <script src="js/leaflet.js"></script>
    <script src="js/L.Control.MousePosition.js" /></script>
        <div id="map"></div>
            var base = 'natural';
            var natural = L.tileLayer('../tiles/'+ base + '/{z}/{x}/{y}.png', {
                attribution: 'Mapa &copy; NaturalEarth2',
                maxZoom: 5,
                tms: true
            var wind = L.tileLayer('../tiles/wind/{z}/{x}/{y}.png', {
                attribution: 'Dado de vento &copy; Aquamet',
                maxZoom: 5,
                tms: true
            var oc = L.tileLayer('../tiles/oc/{z}/{x}/{y}.png', {
                attribution: 'Dado de clorofila &copy; Aquamet',
                maxZoom: 9,
                tms: true

            var map = L.map('map', {
                center: new L.LatLng(0, 0),
                zoom: 1,
                layers: [natural,wind]

            var baselayers = {
                Natural: natural
            var datalayers = {
                Vento: wind,
                Clorofila: oc
            L.control.layers(baselayers, datalayers).addTo(map);

Although I doubt this has to anything to do with the tiling process, as I wrote the following based on this [google tutorial][3], here is my tiling script.*

  • Sorry, I could not post the link directly, I'm new to this stackexchange.
## tiler: creates tiled hierarchy from an ungeoreferenced image.
## usage: tiler <input_image> <N> <E> <S> <W>

prefix=$(basename ${1%%.*})

# First, recover the image's dimensions.
IMG_CHARS=`identify "$1" | cut -f 3 -d' '`
xsize=`echo $IMG_CHARS | cut -d'x' -f 1`
ysize=`echo $IMG_CHARS | cut -d'x' -f 2`

# Insert georeferencing points, prepare for map projection.
gdal_translate -of VRT -a_srs EPSG:4326 -gcp 0 0 $W $N -gcp $xsize 0 $E $N -gcp $xsize $ysize $E $S $1 ${prefix}.vrt

# Projection itself.
gdalwarp -of VRT -t_srs EPSG:4326 ${prefix}.vrt ${prefix}.vrt

# Create the tiles according to rules above.
gdal2tiles.py -t $prefix -p geodetic ${prefix}.vrt

UPDATE - I have followed the recommendations of the solutions below, but to no avail (see comments). Still, @Sorin is correct in his analysis.

This is the tree output of the first few levels of my base map tile hierarchy.

├── 0
│   ├── 0
│   │   └── 0.png
│   └── 1
│       └── 0.png
├── 1
│   ├── 0
│   │   ├── 0.png
│   │   └── 1.png
│   ├── 1
│   │   ├── 0.png
│   │   └── 1.png
│   ├── 2
│   │   ├── 0.png
│   │   └── 1.png
│   └── 3
│       ├── 0.png
│       ├── 1.kml

As @Sorin said, the folders seem to have something wrong. For example, zoom 0 should only have one folder, the 0 folder, which only has one file, the 0.png file. Instead it has a 1 folder, which itself has another 0.png. Inspecting these files, I have come upon the other missing half of the map (0/1/0.png).

link [3]: developers.google.com/kml/articles/raster


Leaflet generally deals in the Web Mercator projection, while you've just tiled an Equirectangular-projected image. So, it doesn't work since equirectangular is a different project, and notably one that is twice as wide as it is tall. You can download projected data from Natural Earth, reproject it with GDAL to EPSG:900913, and render tiles that Leaflet can read.

  • That's odd, since according to leafletjs.com/features.html support for 4326 is out of the box. – jhc Feb 12 '14 at 9:24
  • I have tried to reproject to 900913, but same problem is being exhibited. – jhc Feb 12 '14 at 14:58

Maybe you won't believe me, but your code is working well and your map is wrapping properly! (Of course, you can quit the wrapping effect by using noWrap: true in each tileLayer, but this isn't important now).

Looking at your tiles using Developer Tools (Ctrl + Shift + I in Chrome) I've noticed that your tiles doesn't respect the XYZ tile addressing system:

enter image description here

Maybe my statement becomes evident when comparing your tile storage system with this:

enter image description here

enter image description here

Now, all you have to do, I think, is to run gdal2tiles.py again, specifying the zoom level this time starting with 0, or to see if it is possible to only rename your tiles and folders.

  • I'll try that thanks. Will specify if it works ASAP. – jhc Feb 12 '14 at 13:22
  • Specifying zoom levels 0-5, didn't change anything. – jhc Feb 12 '14 at 14:11

I eventually figured out that it was the -p option in my gdal2tiles.py code. Openlayers and KML uses geodetic, while some others use mercator. So I simply tried that, and voilá, it works. Apperantly, that's what leaflet.js prefers.

Essentially I switched:

gdal2tiles.py -t $prefix -p geodetic ${prefix}.vrt


gdal2tiles.py -t $prefix -p mercator ${prefix}.vrt

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.