I'm loading Landsat tiles into a Mapbox GL JS map via an AWS S3 tile server, and this is working OK, but what I'd really like to do is clip the tile layer to a GeoJSON polygon which is loaded in another layer. By this I mean instead of showing the whole image, which in this case covers a huge area, it would just show the part of the image that lies within the boundaries of the GeoJSON polygon - in this case an area of approx 2.5ha. Note that I'm working with irregular polygons too rather than just rectangular bounding boxes.

My first thought was that I might be able to achieve this by somehow setting the raster layer in a fill parameter for the GeoJSON layer, but that doesn't seem to be possible. Then I thought maybe the GeoJSON layer could be given as a 'mask' or 'clip' parameter when loading the raster layer, but there doesn't seem to be any support for this either.

Has anyone else worked out a way to do this? I'd really like to do it with Javascript if possible, but Python may be an option.


Use the raster source's bounds: https://www.mapbox.com/mapbox-gl-js/style-spec#sources-raster-bounds

"landsat": {
    "type": "raster",
    "url": "https://some-s3-bucket/{z}/{x}/{y}.png",
    "tileSize": 256,
    "bounds": [ -180, -85.051129, 180, 85.051129 ]

An array containing the longitude and latitude of the southwest and northeast corners of the source's bounding box in the following order: [sw.lng, sw.lat, ne.lng, ne.lat]. When this property is included in a source, no tiles outside of the given bounds are requested by Mapbox GL.

You can compute the bounds of an arbitrary GeoJSON using TurfJS bbox.

I don't think this is possible with irregular polygons, although you could invert your GeoJSON polygon, and then style it as a mask that sits above your Landsat tile layer. There is some existing discussion about it that indicates that an "inverted" style won't be built-in, but you can still invert a polygon yourself.

  • Thanks Richard. I had a look at doing it this way before posting the question, but from my understanding this would also put a mask over the base layers beneath the raster I'm trying to mask - is this correct? If so it won't really meet my needs - I'm trying to overlay my masked Landsat raster on top of another satellite base map. Nov 20 '18 at 20:50
  • Yeah, you're right. I can't think of a solution that is entirely front-end. Nov 21 '18 at 0:57

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.