Mapbox-gl-js: Add ability to mask layer by GeoJSON geometry

[bcartmell]

Need ability to mask/clip layers (such as 'raster' and 'image') to a GeoJSON Polygon or MultiPolygon.

Ideally, one would be able to reference the GeoJSON layer in a 'paint' or 'layout' style property as 'mask', 'clip-geometry', or similar.

[mourner]

Currently there are no plans to implement this in the core because it's a relatively rare use case that requires a lot of effort to implement, and our team is focused on higher priority issues at the moment.

However you can try a workaround of adding an "inverted" GeoJSON polygon which occupies the entire world with a hole in the shape of a polygon you need as a mask, and overlaying that inverted polygon on top of your raster layer.

[jstratman]

If you're okay with just masking, turf.mask() offers an easy solution: http://turfjs.org/docs/#mask I haven't personally used it for anything more than relatively simple polygons and have relied on pre-processing complex multipolygon masks, so don't have a great sense of its limits.

[bcartmell]

@mourner, the 'inverted' geojson option will not work for me because I want to keep the maps base imagery visible. I'm looking to mask an image that was added on to the map as layer type 'image'.

@jstratman, Turf.mask() is for masking one geometry against another, which is not quite what I'm looking for here. I have a layer of type 'image' that I need to clip to a geometry.

I think this would be a beneficial feature as mapbox-gl-js could apply this during the layer render process with a lot less overhead than could otherwise be achieved.

I've also thought about achieving this through a plugin, but I cannot find any documentation around the plugin system. Is there some available? Is there a method for plugins to hook into the layer rendering process?

[franciscolourenco]

@bcartmell I need exactly the same thing. Have you found a solution for this?

[bcartmell]

@franciscolourenco, I ended up using a separate canvas to perform the clipping and then render the output on the map via the 'canvas' layer type.

[planemad]

Related feature request to have an inverted fill to mask layers: https://github.com/mapbox/mapbox-gl-js/issues/6267

[danielfdsilva]

@bcartmell Do you have a code sample of how you did this? Or could you elaborate? Many thanks

[bcartmell]

@danielfdsilva, unfortunately, the code is proprietary so I'm not sure how much detail I can provide. I'll just say that the goal is to leverage the clip() method of CanvasRenderingContext2D.

[indus]

I need this feature as well. just to give some additional applications where this would be handy:

• "slideable (raster) layers" a bit like this: https://www.mapbox.com/mapbox-gl-js/example/mapbox-gl-compare/
• masking heatmaps (lets say you have a heatmap of sea-surface-temperature based on a grid of meassurements then it wouldn't make sense when the blur of the heatmap draws over land)

[tomasdev]

Related feature request to have an inverted fill to mask layers: #6267

I may have a race condition on my example, but keep refreshing till you see it. https://jsfiddle.net/3tw94vm5/

I've used a TurfJS circle of 0.5km and then used the booleanWithin to make sure any given street (from the road layer of streets) was entirely fit in that circle. Then just add some coloring et voilá.