leaflet overlapping shapes opacity

Question

Below is a screenshot of a leaflet (http://leafletjs.com/) map with circles in them.

The opacity of the circle is 0.5 and you can clearly see where they overlap. Is it possible to add a style rule such that the overlap doesn't have a higher opacity? It doesn't seem like leaflet has support for this but I wonder if such a thing is possible with css maybe?

I like to be able to show what the red circle is over (ie, show what is beneath it) and have a homogenous colour. Assigning the opacity to one is not feasible.

Answer 1

AFAIK there is no way in CSS to prevent the overlapping areas of semi-transparent shapes from having their colours "added" to each other, for better or worse this is expected behavior (it's what would happen with such shapes in real life too).

Unfortunately that doesn't help you very much, however there is a possible work-around. If you can put these shapes into a common parent element you can apply opacity:0.5; to that instead.

Trivial Example:

<div class="wrapper" style="opacity:0.5">
  <div class="circle"></div><!-- opacity:1 -->
  <div class="circle"></div><!-- opacity:1 -->
  <div class="circle"></div><!-- opacity:1 -->
</div>

That will make .wrapper and all of it's children have an opacity of 0.5. The circles can then just be a solid colour, which will mean they display as a homogeneous semi-transparent zone.

I have not used leaflet.js myself, so I don't know for certain if this is a workable solution in your situation, but it's what I would try.