CODEWITHSUNDEEP
mapboxmapbox-gl-js
Morte
Morte

Reputation: 41

How to fill mapbox polygon with fadeout color?

I have a triangle polygon filled with color and low opacity. That was no problem so far.

What I'm trying to achieve looks like this (without points and lines). It is basically triangle polygon with fill color but opacity smoothly lowering from one of the triangle apexes.

Is there any way to achieve this with mapbox? Thanks!

map with drawed polygon with gradient

Upvotes: 0

Views: 626

Answers (1)

Steve Bennett
Steve Bennett

Reputation: 126697

There is no easy, built in way to do this with Mapbox GL JS.

The best way I can think of is to create a Marker (an HTML object anchored at a specific lat/lng) to draw the shape. You will have to do some maths to translate the coordinates of the triangle's vertices into screen coordinates. You will also have to update the calculations if the viewport zooms or rotates.

Upvotes: 1

Related Questions