Leaflet Overlapping Shapes Opacity

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 t

Solution 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:

<divclass="wrapper"style="opacity:0.5"><divclass="circle"></div><!-- opacity:1 --><divclass="circle"></div><!-- opacity:1 --><divclass="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.