How do you create a rainbow polygon hover effect in Mapbox?

Question

We're working on a fun website called VicePrice. It's a happy hour website using GIS instead of a list directory to show happy hour info. We've run into a snag and perhaps someone could give us their thoughts.

You can play with our current design here. In Washington DC, Logan Circle has played a large role in the gay community. It's served as a place of pride for decades and I'd like our map to tip our hat to that.

We're thinking that when a user hovers over Logan Circle, instead of a gold overlay, a rainbow overlay would show instead. Like with the rainbow flag here.

So far the only possibly solution we've come up with has been to create a horizontal polygon for each color in the rainbow, and when a user hovers over one, it triggers all polygons. But that's been a huge challenge applying the same rule to those polygons.

I was wondering if someone else has dealt with this issue and how they would suggest tackling this problem.

Answer 1

The example you posted within your question unfortunately isn't working on my end but i'll refer you to a few help documents. Within the JS library your only option seems to be how you described above which is to create polygons for each color and collectively have then appear. In Mapbox Studio you can add a polygon that has a pattern, check out this howto along with this one if your interested.