在R Shiny中的Leaflet中创建具有自定义绝对位置的图例

Question

我正在使用Leaflet和Shiny使用R制作网络地图。 地图的右上角有一个absolutePanel，我想将图例放置在最右上角，而不是一直在右上角，而是在absolutePanel的左侧。

Leaflet仅接受四个角之一作为addLegend标记中“ position”属性的有效输入。 之前，我已经在UI页面的标题中添加了自定义css标记，并且一直在探索css文档以设置图例格式，但是我无法提出正确的脚本来实际覆盖Leaflet创建的图例位置。 据我所知，位置是在.leaflet .legend脚本中的某个位置设置的。

我宁愿在R脚本中解决此问题，而不必修改它产生的Web文档。 尚未看到此问题在其他任何地方得到解决。 有谁能比我更精通CSS并拥有比我更出色的解​​决方案呢？ 提前致谢。

一个简化的，可复制的示例脚本，尝试（不正确）为图例分配绝对位置：

library(shiny)
library(leaflet)

data = data.frame(x = c(1,2,3), y = c(1,2,3))

ui <- fluidPage(
  tags$head(tags$style(
    type = "text/css",
    "#controlPanel {background-color: rgba(255,255,255,0.8);",
    ".leaflet .legend {
    position = absolute;
    top = 10px;
    right = 100px;}"
  )),

  leafletOutput(outputId = "map", width="100%"),
  absolutePanel(top = 10, right = 10, height = 100, id = "controlPanel",
                strong("Put Legend To the Left of Me"))
)

server <- function(session, input, output) {

  output$map <- renderLeaflet({
    leaflet() %>%
      addMarkers(data = data, lat = data$x, lng = data$y) %>%
      addLegend(colors = data$x, labels = data$y, title = "Legend")
  })  
}

shinyApp(ui, server)

Answer 1

有一些简单的CSS可以纠正您的位置，但这是高度构建的。

首先，您的代码段中的CSS无效（第一条规则中没有右花括号）。 但是，我猜想，就像绝对位置一样，这种位置本身很难维持。 但是，您可以调整页边距（如果需要，可以调整为右侧，也可以调整为顶部）以移动相应的面板。 请注意，这将始终是绝对基于像素的。 您的controlPanel和图例面板永远不会在同一div ，因此也不会自然地相互调整。 这就是为什么最好在contentPanel上固定宽度以避免在例如使用不同的字体大小时可能发生的重叠。

library(shiny)
library(leaflet)

data = data.frame(x = c(1,2,3), y = c(1,2,3))

ui <- fluidPage(
  tags$head(tags$style(
    type = "text/css",
    "#controlPanel {background-color: rgba(255,255,255,0.8);}",
    ".leaflet-top.leaflet-right .leaflet-control {
      margin-right: 210px;
    }"
  )),

  leafletOutput(outputId = "map", width="100%"),
  absolutePanel(top = 10, right = 10, height = 100, width=210, id = "controlPanel",
                strong("Put Legend To the Left of Me"))
  )

server <- function(session, input, output) {

  output$map <- renderLeaflet({
    leaflet() %>%
      addMarkers(data = data, lat = data$x, lng = data$y) %>%
      addLegend(colors = data$x, labels = data$y, title = "Legend")
  })  
}

shinyApp(ui, server)