0

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 
1

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.

  • Thank you for your reply. I have single images working correctly already, but what I am trying to do is replicate something like this (ops.flashflood.io). They are using a PNG raster tileset, the same as I am using (I am self hosting mine, I used GDAL to generate it from a geoTIF). I don't understand what I am doing wrong. After I generated my raster tileset, I checked the xml file it makes and the coordinates were generated correctly. So the PNG files themselves seem to be correct. How are bounding coords set with raster tilesets? (Not using Mapbox studio). – David Aug 20 at 2:05
  • Could you post the gdal command line you used? You have to set any georeferencing information (bounds) when generating the raster tiles, if you want to use it with a Mapbox GL JS raster layer type. – AndrewHarvey Aug 20 at 9:35
  • I added my gdal commands. I am new at this, so if you are able to help it is appreciated. Check the very bottom of my orginal post for the gdal section. – David Aug 20 at 10:04
  • I had multiple issues going on and I think I have narrowed it down to one last item. I accepted your answer as you were helpful in assisting me. Thank you. I think I am one problem away from getting this working, which I posted in a new question here on SE. – David Aug 22 at 11:28

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.