[GIS] Mapbox Studio for macOS renders GeoTiff into webp with black background – suggestions

gdalgdal-translategdal2tilesmapboxmapbox-studio

We are converting a 11 MB GeoTiff, 324511630_Descanso_FSTopo.tif,
to post to Mapbox, using Mapbox Studio Classic macOS.

The issue is when the Mapbox tileset is posted in Mapbox.com/studio, there is a black border that extends beyond the original GeoTiffs bounding box.

Why does a black border appear, and why does it extend past the bbox?

The GeoTiff is on the right hand side of this image. The gray back ground is the Mapbox style light.

enter image description here

Steps to reproduce

  • wget http://data.fs.usda.gov/geodata/rastergateway/data/32116/fstopo/324511630_Descanso_FSTopo.tif
  • Mapbox Studio Classic for macOS, New Source > Blank Source > New Layer > Select 324511630_Descanso_FSTopo.tif
  • Upload to Mapbox Settings > Upload
  • Alternativly, set the zoom to 11-12 for a faster testing process
  • The upload is successful with this metadata as reported by Mapbox.com/studio
Format | Type   | Size     | Zoom Extent | Bounds
webp   | raster | 19.28 MB | z11-16      | -180.0,-85.1,180.0,85.1

Notes and Observations

  • The GeoTiff is georeferenced and is 7.5 minutes, so the bounding box does not match the GeoTiff bounding box
  • The resulting Mapbox tile is webp, which is what we want as we like the size and performance vs png.

What we've tried

  • As a comparison, We have modified gdal2tiles.py to use the WEBP tile driver, and it also has the same black border affect.
  • When rendering with gdal2tiles.py with PNG tile driver, there is no issue with the black ground, but the file size in Mapbox.com/studio is > 50 MB.
  • from gdalinfo we see this data ColorInterp=Palette & Color Table (RGB with 256 entries) 0: 55,53,53,255
  • We are aware of the gdal tools, but we don't know how to set the NODATA given the gdalinfo.
  • gdal_translate -a_nodata 0,0,0,255 in.tif out.tif # QGIS only accepts one parameters, so this must be wrong

and we tried this, but produces the same issue

  • gdal_translate -of vrt -expand rgba 324511630_Descanso_FSTopo.tif rgba.vrt
  • gdal2tilesp.py -z 11 -f WEBP --srcnodata 0,0,0,255 rgba.vrt
  • mb-util rgba rgba.mbtiles
  • Upload rgba.maptiles
  • We also tried -expand rgb instead of rgba. No difference

gdalinfo 324511630_Descanso_FSTopo.tif

Driver: GTiff/GeoTIFF
Files: 324511630_Descanso_FSTopo.tif
       324511630_Descanso_FSTopo.tif.aux.xml
Size is 9598, 11366
Coordinate System is:
GEOGCS["NAD83",
    DATUM["North_American_Datum_1983",
        SPHEROID["GRS 1980",6378137,298.2572221010002,
            AUTHORITY["EPSG","7019"]],
        AUTHORITY["EPSG","6269"]],
    PRIMEM["Greenwich",0],
    UNIT["degree",0.0174532925199433],
    AUTHORITY["EPSG","4269"]]
Origin = (-116.625000000000000,32.875000000000000)
Pixel Size = (0.000013023968607,-0.000010998187728)
Metadata:
  AREA_OR_POINT=Area
Image Structure Metadata:
  COMPRESSION=PACKBITS
  INTERLEAVE=BAND
Corner Coordinates:
Upper Left  (-116.6250000,  32.8750000) (116d37'30.00"W, 32d52'30.00"N)
Lower Left  (-116.6250000,  32.7499946) (116d37'30.00"W, 32d44'59.98"N)
Upper Right (-116.4999959,  32.8750000) (116d29'59.99"W, 32d52'30.00"N)
Lower Right (-116.4999959,  32.7499946) (116d29'59.99"W, 32d44'59.98"N)
Center      (-116.5624980,  32.8124973) (116d33'44.99"W, 32d48'44.99"N)
Band 1 Block=9598x1 Type=Byte, ColorInterp=Palette
  Min=0.000 Max=14.000 
  Minimum=0.000, Maximum=14.000, Mean=10.365, StdDev=3.715
  Metadata:
    STATISTICS_MAXIMUM=14
    STATISTICS_MEAN=10.365010457425
    STATISTICS_MINIMUM=0
    STATISTICS_STDDEV=3.7148361607928
  Color Table (RGB with 256 entries)
    0: 55,53,53,255

    1: 238,51,56,255
    2: 253,179,56,255
    3: 187,139,90,255
    4: 132,119,116,255
    5: 207,182,159,255
    6: 187,195,168,255
    7: 253,202,182,255
    8: 234,214,190,255
    9: 200,230,209,255
   10: 253,222,210,255
   11: 220,221,223,255
   12: 0,176,239,255
   13: 201,217,240,255
   14: 255,255,255,255
   15: 0,0,0,255
   16: 0,0,0,255
   17: 0,0,0,255
   <snip>  entries 18 through 254 are identical
   255: 0,0,0,255

Best Answer

The black border on the edge of your imagery is the result of the JPG or WebP encoding Mapbox uses as the default image format for raster tiles. JPG images are generally a smaller and faster image format, but we also make PNG images available to support transparency around the edges of your image, however, Mapbox Studio doesn't support PNGs as an image format directly in the editor.

You can use PNG images with both Mapbox.js and Mapbox GL JS, though the process is a bit different for each.

For Mapbox.js projects:

L.mapbox.tileLayer('map.id', {
  format: 'png256'
}).addTo(map);

If you are using Mapbox GL JS, you will need to make some manual edits to your JSON file to point to the raster source as a png layer. See this example for details. Also, GL JS will use WebP if the browser supports it (only Chrome), otherwise it will use JPEG.

If you are still seeing the black border, you may need ensure the TIFF image was properly exported with the NODATA values. To do this, use GDAL and the following command:

gdal_translate -of GTiff -a_nodata 0 input.tif output.tif`
Related Question