0

I am making an rMarkdown flex dashboard interactive html page which we will embed into another page (an iFrame). There are two small maps side by side. The maps themselves, the content, scales, legend popup are properly formatted for our purposes.

However, when the popup is activated on the left side of the map (where the legend is) it opens up behind the legend. I have adjusted the legend opacity some...but it is not enough to make the popup useful when the collide. Lowering it more will make discerning the colors in the scales difficult, watering down the interpretability of the legend. The map does continue to the right, it was just not meaningful content.

enter image description here

I am hoping for one of three ways to fix the situation.

1. direct the popup to open in front of the legend
2. set the legend background to complete transparency, while leaving the legends values and bin colors at opacity of 1
3. creating a fixed location in the upper right corner where the popup opens when activated so that they never conflict.

However I am completely open to any other suggestions which might be useful. The one thing that I cannot do is change the overall width of the figures they are in because they need to fit in a predetermined "box" of a set size. And they need to be side-by-side. 

map<-leaflet(width ="100%")%>%
  setView(lat=43.9625, lng = -72.5506, zoom = 7)%>%
  addProviderTiles("CartoDB.Positron")%>%
  addPolygons(data = plot2010,
              fillColor = ~pal(plot2010@data$per100K),
              smoothFactor = 0.2,
              fillOpacity = 0.8,
              weight = 0.2,
              popup=popContent,
              popupOptions= popupOptions(maxWidth ="100%", closeOnClick = TRUE))%>%

  addLegend(position="topleft",
            pal=pal,
            values= plot2010@data$per100K,
            title ='Age Adjusted Rates </br> per 100,000',
            na.label = "Not Available",
            opacity=.5,
            labFormat = labelFormat(digits=1))
map
sconfluentus
  • 4,693
  • 1
  • 21
  • 40
  • could u pls make that reproducible, including `data = plot2010` and rmarkdown,... – Tonio Liebrand Jun 01 '17 at 20:37
  • It is huge both the code, the data and the popup HTML and it is protected data (suppression is built into the popup code) so it is not practical. Also, this it is not a flaw in the data or the code which I am needing help with. The solution (if there is one in leaflet for r which there may not be) will likely be some kind of an attribute in `addLegend` or `popupOptions` that forces one or the other forward or backward or that allows to fix the popup with an anchor. It shouldn't be something that requires reproducing. – sconfluentus Jun 01 '17 at 20:48
  • for me its about not having to spend 5-10min writing code to reproduce the error, before i can take a look into the real problem. But just me 2 cents,... – Tonio Liebrand Jun 01 '17 at 21:00
  • I understand, there is no error to receive, you should not need to create code...leaflet is working correctly. I just want something different than what it does. In this case it is about formatting either the popup or the legend if possible. The image shows the problem. The code that creates it is here. I am just hoping there is an attribute I have not yet found to amend one of the two offending layer objects. – sconfluentus Jun 01 '17 at 21:07

1 Answers1

0

As far as I know, this is inherent with how Leaflet works. Here's what the DOM structure looks like:

screenshot of DOM tree

Different layer types are segregated into their own container divs that have a preset ordering, and then controls (which is what the legend is) are put in a totally separate div from the layers. I don't think z-index can work across these boundaries (though I have to admit that z-index behavior has surprised me before).

Joe Cheng
  • 8,001
  • 42
  • 37