Gradient Fill for Polygons

[staffordsmith83]

User Story

As someone who works in areas with territorial boundary disputes, I need to be able to represent polygons with uncertain edges, so that I can produce web maps that do not create further disputes.

Rationale

There are cases where we need to represent polygons with uncertain boundaries.
In QGIS, the Shapeburst Fill gives the best result for this:
https://www.reddit.com/r/QGIS/comments/qqsy1h/how_could_i_make_only_the_edges_of_the_polygons/

Gradient fills are another way to achieve this. Here is an example, produced in QGIS:

Gradient Fills are implemented in another web mapping library Maptalks https://maptalks.org/examples/en/style/polygon-gradient/

It would be great if this kind of symbology could be implemented in MapLibre.
We are open to funding the development of this.

Impact

Some user will choose to use another mapping platform, if this is absolutely critical to end users.

[HarelM]

I think you can use a gradient pattern for these polygons, can't you?

[staffordsmith83]

I think you can use a gradient pattern for these polygons, can't you?

Dear HarelM, I cant find how to implement that, I thought that this was currently impossible? Do you have a link to the documentation for that? Thanks!

[HarelM]

https://maplibre.org/maplibre-style-spec/layers/#line-pattern

[staffordsmith83]

Dear @HarelM I dont believe this can solve the issue. The gradient for 'line-gradient' goest from the beginning to the end of a line feature, not across its width. I dont think 'line-pattern' could be used at all? love to know if you had a hacky idea to make it work though!

[HarelM]

I mentioned line-pattern with a sprite icon that resembles a gradient. We use it in Israel Hiking Map to show nature reserve borders.

[zerda-ocm]

line-pattern would create artifacts at sharp corners and narrow sections. These would become more visible the wider the gradient effect is.

A universal approach would need to implement a shader with a signed distance field (could be costly performance wise).

Alternatively a raster layer with precomputed Shapeburst Fill should work and is the quickest solution.

[zerda-ocm]

You can also use image instead of raster:

DEMO: https://jsbin.com/tewayutuqe/edit?html,output