title: Add overlapping circles to leaflet map with homogeneous transparency
body: <p>I want to plot multiple circles on a map, that have multiple overlaps. I would like to fill the circles using the <code>fillOpacity</code> argument.
  However, i set the <code>fillOpacity</code> to 0.5 and two circles overlap the <code>fillOpacity</code> will differ within the intersection. I would like that the <code>fillOpacity</code> also has "value of 0.5" within the intersection. So that the transparency is homogeneous across the area of both circles.</p>
  
  <p>(A solution within shiny could be also of interest if it would facilitate a solution).</p>
  
  <pre><code>library(leaflet)
  m &lt;- leaflet() %&gt;% addTiles()
  m &lt;- m %&gt;% setView(-93.65, 42.0285, zoom = 15)
  m %&gt;% addCircles(-93.65, 42.0285, radius = 400, stroke = FALSE, fillOpacity = 0.5) %&gt;%
    addCircles(-93.655, 42.0255, radius = 400, stroke = FALSE, fillOpacity = 0.5)
  </code></pre>
  
  <p><strong>Edit:</strong></p>
  
  <p>Given the comment, i gave it another try. Here is my best attempt (<strong>now working</strong>):
  (Inspired from here: <a href="https://stackoverflow.com/questions/35720698/is-it-possible-to-include-custom-css-in-htmlwidgets-for-r-and-or-leafletr">Is it possible to include custom css in htmlwidgets for R and/or LeafletR?</a>). i choose the g tag, because the circles seem to be wrapped within that tag. It might be a dirty Workaround since other Elements might be wrapped within that tag as well.</p>
  
  <pre><code>library(leaflet)
  library(htmltools)
  m &lt;- leaflet() %&gt;% addTiles()
  m &lt;- m %&gt;% setView(-93.65, 42.0285, zoom = 15)
  m &lt;- m %&gt;% addCircles(-93.65, 42.0285, radius = 400, stroke = FALSE, fillOpacity = 1) %&gt;%
    addCircles(-93.655, 42.0255, radius = 400, stroke = FALSE, fillOpacity = 1)
  
  browsable(
    tagList(list(
      tags$head(
        tags$style('g{opacity:0.3;}')
      ),
      m
    ))
  )
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/EyEIT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EyEIT.png" alt="enter image description here"></a>
  Shiny attempt (<strong>now working</strong>):</p>
  
  <pre><code>library(shiny)
  library(leaflet)
  
  ui &lt;- fluidPage(
    tags$head(
      tags$style('g{opacity:0.2'),
      tags$script("
        $('div.leaflet-overlay-pane').css('fill-opacity', '0.5');
      ")
    ),
    leafletOutput("mymap")
  )
  
  server &lt;- function(input, output, session) {
      output$mymap &lt;- renderLeaflet({
      leaflet() %&gt;%
        addProviderTiles(providers$Stamen.TonerLite,
                         options = providerTileOptions(noWrap = TRUE)
        ) %&gt;%
        addCircles(lng = rnorm(40) * 2 + 13, lat = rnorm(40) + 48, radius = 100000, stroke = FALSE,
                   fillOpacity = 1, group = "ABCD")
    })
  }
  
  shinyApp(ui, server)
  </code></pre>