gdal – Setting Bounds of Raster Tile Layer in Mapbox GL JS

gdalmapboxmapbox-gl-js

I have some weather radar data as a raster tileset. Mapbox documentation states that raster tilesets will default to the size of the world on the map unless otherwise specified.

Here is my code for adding my layer (and indeed, it is extremely large when it should only be a few hundred miles across on the map. – Image added below). How do I set the bounds of the raster tile source? I have also tried code which I will explain below.

map.addLayer({
    "id": "KEWX",
    "type": "raster",
    "source": {
        "type": "raster",
        "tiles": ["output/{z}/{x}/{y}.png"],
        "minzoom": 1,
        "maxzoom": 6,
        "scheme": "tms",
        "tileSize": 256
    }});

This produces a VERY large image as seen below, but as expected.

enter image description here

After attempting to add bounds to the tileset, it does not do anything (however it does cause the tiles to glitch out weirdly when zooming, so it's doing something.)

Below, I added "bounds": [ -102, 26, -94, 33 ], which should locate all of the imagery within the state of Texas. What am I doing wrong?

map.addLayer({
    "id": "KEWX",
    "type": "raster",
    "source": {
        "type": "raster",
        "tiles": ["output/{z}/{x}/{y}.png"],
        "minzoom": 1,
        "maxzoom": 6,
        "scheme": "tms",
        "tileSize": 256,
         "bounds": [ -102, 26, -94, 33 ]
    }});

EDIT :

Here are the GDAL commands I used, as asked for in a comment.

First, I get my original geoTIF and add bounds to it :

gdal_translate input.tif -a_ullr -101 33 -93 26 output.tif

With the .tif file now having bounds, I use gdal2tiles :

gdal2tiles --profile=mercator -z 1-6 C:\example\output.tif C:\example\output -p raster

Best Answer

You can either use an image layer type and specify a single image with a bounds or you can use a raster layer type where your raster is using the tiling scheme per https://en.wikipedia.org/wiki/Tiled_web_map or Raster images uploaded to mapbox.com as Tilesets.

Specifying a bounds on a raster source will simply limit the Mapbox GL JS client to only request tiles within that bounds, it won't stretch or re-position the imagery to those bounds, only the image layer type will do that.

Related Question