overlay data over water but below land surface: Mapbox-gl.js

Question

I want to overlay my data-layer on top of the water but below the land surface.

But the problem is that there is basically no "ground" layer on mapbox layers. There are different layers like 'water', 'roads' etc layered on top of a background which is basically 'land'

I have been able to use 'roads' on top on my data which gives the following images. but is there a way to visualize my data only on 'water' and not on 'land'?

For more information. data is in geojson format. I have used movelayer() funtion of mapbox and checked by moving my datalayer below each layer of map.getStyle().layers one by one.

Also, can this be done in different styles available in mapbox?

Answer 1

To do what you're trying to achieve, you'll have to find another tileset of land polygons to use as a mask. There isn't a way to dynamically clip a layer to within the polygons of another layer, for instance.