Allow the geometry of a polygon layer to be "inverted"

[peterqliu]

tl;dr a layout option to render the areas polygons aren't

I'd like to make a flood map where water levels rise from low to high. If we imagined this happening on an island:

The water would creep from outside in, and I would simulate this by adding successive doughnut-shaped water layers with a hole in the middle, where the land is too high to be flooded (this hole would get progressively smaller as water level rises).

However, Mapbox Terrain provides elevations only as closed polygons, which are the doughnut holes in our pastry analogy. I would like a layout option to switch from doughnut hole -> doughnut

cc @jfirebaugh @ansis

[jfirebaugh]

Can't you do this with a "water" background layer at the bottom and then hide the land pancakes from the bottom up (low elevation to high elevation)?

[peterqliu]

@jfirebaugh i can if all the land is one color. When we add landcovers and roads, that'll sit on top of the water-- I think i'll actually need a water layer on top of everything, so that it actually covers what's on land

[ansis]

Can you handle this on the data side by inverting the layer before creating the vector tiles?

[peterqliu]

@ansis per chat with @MateoV, it would be pretty heavy to do this for the whole planet.

But I think inversion would also be useful elsewhere: imagine render-inverse on the #water layer to select all landmasses-- this would free us to put land on top of water, enabling us to do drop shadows of land onto water (obviating #769 and single-sided offsets)

[ljbade]

This sounds hard now that the stencil buffer has been dropped.

[mourner]

@ansis per chat with @MateoV, it would be pretty heavy to do this for the whole planet.

@peterqliu actually it would be very easy to do on the JS data side after we're done with mapbox/mapnik-vector-tile#59.

So lets say we have many multipolygons in the input data that look like this:

var multipolygons = [
  [outerRingA, hole1A, hole2A, ...], // poly A
  [outherRingB, hole1B, hole2B, ...], // poly B
  ...
];

An inverse of these then would look like this:

var inverseMultopolygons = [
  [bigSquare, outerRingA, outerRingB, ...], // outer rings become holes
  [hole1A], // each hole becomes an outer ring
  [hole2A],
  [hole1B],
  [hole2B]
]

You obviously loose feature metadata with such a conversion, but I assume that's OK.

[mourner]

@springmeyer yet another use case for a defined ring order in VT (in addition to tessellation)

[springmeyer]

👍 @mourner

[jfirebaugh]

I think this feature is far down enough on our priority list that, in the interest of keeping the issue count manageable, we need to close it. You may be able to implement the effect outside of the library by reversing the geometry rings manually as suggested by @mourner.

[Stophface]

You can use turf's mask function for that
https://www.npmjs.com/package/@turf/mask
Simply create a "cover polygon" with the extend of your (Map)View (or the whole world) and use your Polygon. Turf even creates the "cover polygon" for you, if you do not provide one.
https://github.com/Turfjs/turf/blob/master/packages/turf-mask/index.js#L58

[indus]

@Stophface how would you do this for the whole planet z0-14?

[Stophface]

@indus That question does not make much sense, or I understand it wrongly. If you have vector data, this data will be displayed the same for each zoom level.

[indus]

@Stophface
For a simple geometry, your suggestion is fine. In case you don't want it to do on the client but while preprocessing the data I would suggest mapshaper.
Maybe I was unclear what case I asked for. I was talking specifically about masking water over various zoom levels. The complete geometry of "Natural Earth 10m" is really huge, but that is what is needed to mask seamless without any overlaps on z14. The information is already in the 'water' layer but it would need to be inverted to be useful.

[Stophface]

@indus Again, if you have Vector File this file will always be displayed the same, no matter on what zoom level you are.

Your problem is: "My input file (geojson?) is really large. How can I display large geojson on a map?"

That has nothing to do with masking. One approach could be simplifying your input data according to the zoom levels. You might end up with 14 different files, one file for each zoom level. You also could clip your large input file to the mapview the user is currently looking at (this will most likely not run seemlessly). There are various ways how to handle large geojson on a map.

[markusjohnsson]

@Stophface No, I think @indus is talking about vector tiles which has different level of details at different zoom levels. I had the exact same problem. I wanted to represent land which would be the inverse of water . I wanted to use the data provided by mapbox, only style it differently, but it was impossible.

I put a couple of days into implementing it in mapbox-gl, had a promising test case, but some serious bugs. Never got any help or interest from the team.. and then they changed the license too and I got discouraged.

[indus]

@markusjohnsson thats exacly my problem. Maybe we can gain some traction here: #1206
To make it more easy to create a VT land layer

[markusjohnsson]

@indus yeah it seems like there is such an elegant solution to the problem. I'm not working with that project any more so I won't spend a lot of time on it, sorry. Good luck to you though 🙂