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.

  • I think it's a pretty neat thing to try and do, I haven't tried doing that myself but I think you might be able to modify how leaflet behaves on hover, you could try to look at how they define the on hover function. (You should be able to modify this and call on your own rainbow hover effect, a rainbow fill effect ) Commented Mar 24, 2016 at 5:05
  • github.com/teastman/Leaflet.pattern maybe? Commented Mar 24, 2016 at 12:56

1 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.