1

I am using gdal2tiles-leaflet in an attempt to generate a tileset for a map renderer I'm working on, however, the resulting tileset appears to be completely misaligned and won't render properly in Leaflet.

The source data is the NASA Visible Earth bathymetry dataset. It is made up of several GeoTIFF tiles, which I have stitched into a single large map using gdal_merge.

In examining the resulting PNG files, I noticed that the map does not fill the entire image, as shown below for the 0 layer:

Broken 0 layer

I assumed this to be due to the original dataset not being evenly divisible by 256 and that it was normal, however, upon loading the tileset into my web page, it showed the same problem, namely that the tile doesn't fill the view properly nor align with other layers:

Broken leaflet map view

Suspiciously, the leaflet map view also shows the same "1/3rd" fill as the 0 png. Zooming in fills the screen, but still doesn't align with the vector shoreline data (i.e. lat/lons are off in the tileset).

I confirmed that the shoreline vector data (green) is the correct render by placing a marker at a known lat/lon and observing that it was in the correct place for the vector data but not the NASA bathy data.

Investigating further, I noticed that the kml data files appear to have garbage values in the LatLonAltBox tag, see this excerpt from 0.kml and note the north and east tags:

  <Region>
      <LatLonAltBox>
        <north>456.13318687999998</north>
        <south>-89.99992800000001</south>
        <east>366.13311487999999</east>
        <west>-180.00000000000000</west>
      </LatLonAltBox>
      <Lod>
        <minLodPixels>128</minLodPixels>
        <maxLodPixels>2048</maxLodPixels>
      </Lod>
    </Region>
    <GroundOverlay>
      <drawOrder>1</drawOrder>
      <Icon>
        <href>0.png</href>
      </Icon>
      <LatLonBox>
        <north>456.13318687999998</north>
        <south>-89.99992800000001</south>
        <east>366.13311487999999</east>
        <west>-180.00000000000000</west>
      </LatLonBox>
    </GroundOverlay>

Similar values from doc.kml:

<?xml version="1.0" encoding="utf-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Document>
    <name>Nasa_big_chungus.tif</name>
    <description></description>
    <Style>
      <ListStyle id="hideChildren">
        <listItemType>checkHideChildren</listItemType>
      </ListStyle>
    </Style>
    <NetworkLink>
      <name>0/0/0.png</name>
      <Region>
        <LatLonAltBox>
          <north>456.13318687999998</north>
          <south>-89.99992800000001</south>
          <east>366.13311487999999</east>
          <west>-180.00000000000000</west>
        </LatLonAltBox>
        <Lod>
          <minLodPixels>128</minLodPixels>
          <maxLodPixels>-1</maxLodPixels>
        </Lod>
      </Region>
      <Link>
        <href>0/0/0.kml</href>
        <viewRefreshMode>onRegion</viewRefreshMode>
        <viewFormat/>
      </Link>
    </NetworkLink>
      </Document>
</kml>

I don't know if this is a red herring or indicative of a problem in creating the tileset.

However, the geotiff data in the merged input file appears to show nothing strange, as seen with gdal_info:

]$ gdalinfo Nasa_big_chungus.tif 
Driver: GTiff/GeoTIFF
Files: Nasa_big_chungus.tif
Size is 43200, 21600
Coordinate System is:
GEOGCRS["WGS 84",
    DATUM["World Geodetic System 1984",
        ELLIPSOID["WGS 84",6378137,298.257223563,
            LENGTHUNIT["metre",1]]],
    PRIMEM["Greenwich",0,
        ANGLEUNIT["degree",0.0174532925199433]],
    CS[ellipsoidal,2],
        AXIS["geodetic latitude (Lat)",north,
            ORDER[1],
            ANGLEUNIT["degree",0.0174532925199433]],
        AXIS["geodetic longitude (Lon)",east,
            ORDER[2],
            ANGLEUNIT["degree",0.0174532925199433]],
    USAGE[
        SCOPE["unknown"],
        AREA["World"],
        BBOX[-90,-180,90,180]],
    ID["EPSG",4326]]
Data axis to CRS axis mapping: 2,1
Origin = (-180.000000000000000,90.000000000000000)
Pixel Size = (0.008333330000000,-0.008333300000000)
Metadata:
  AREA_OR_POINT=Area
Image Structure Metadata:
  INTERLEAVE=BAND
Corner Coordinates:
Upper Left  (-180.0000000,  90.0000000) (180d 0' 0.00"W, 90d 0' 0.00"N)
Lower Left  (-180.0000000, -89.9992800) (180d 0' 0.00"W, 89d59'57.41"S)
Upper Right ( 179.9998560,  90.0000000) (179d59'59.48"E, 90d 0' 0.00"N)
Lower Right ( 179.9998560, -89.9992800) (179d59'59.48"E, 89d59'57.41"S)
Center      (  -0.0000720,   0.0003600) (  0d 0' 0.26"W,  0d 0' 1.30"N)
Band 1 Block=43200x1 Type=Byte, ColorInterp=Gray

I assumed it was a coordinate issue, and explicitly ran gdal2tiles-leaflet with the appropriate spatial reference system for WGS84:

$python ../gdal2tiles-leaflet/gdal2tiles-multiprocess.py -l -s EPSG:4326 -p raster -z 0-7 -w none Nasa_big_chungus.tif tiles

But to no avail.

Since my JavaScript Leaflet code is extremely simple and more or less a copypasta of the tutorial code, I'm thinking the issue must be in how I'm generating the tiles.

However, for reference, the leaflet code is here:

var map = L.map('map', { crs: L.CRS.EPSG3857, minZoom:0, maxZoom:9}).setView([0, 0], 2); // Set initial view to center of the world


    var img = [43200,21600]

    var rc = new L.RasterCoords(map, img); 

    map.setMaxZoom(rc.zoomLevel())
    console.log("Max zoom: ", rc.zoomLevel())
    console.log("Max bounds: ", rc.getMaxBounds())

    map.setView(rc.unproject([img[0], img[1]]),2)

        
    L.tileLayer('tiles/{z}/{x}/{y}.png', {
      attribution: 'Derp.',
      noWrap: true,
      bounds: rc.getMaxBounds(),
      maxNativeZoom: rc.zoomLevel()
    }).addTo(map);  
  
           
    // Add shorelines layer
    var shorelinesLayer = new L.GeoJSON.AJAX("https://raw.githubusercontent.com/nvkelso/natural-earth-vector/master/geojson/ne_110m_coastline.geojson", {
        style: function (feature) {
            return {
                color: 'green',
                weight: 1,
                fillOpacity: 0
                };
            }
        }).addTo(map);

Thinking there might be something wrong with the NASA bathy data, I also tried the much larger GEBCO dataset, but got the same problem, namely the 2/3rd width 1/3rd height problem with the png tileset not lining up with the correct lat/longs.

Can anyone explain to me what I'm doing wrong? Is the problem in how I'm generating the tiles or in the JavaScript used to render with Leaflet?

11

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.