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

Posted 2023-02-16

【中文标题】在 R Shiny 中的 Leaflet 中创建具有自定义绝对位置的图例

【英文标题】：Creating legend with custom absolute position in Leaflet within R Shiny

【发布时间】：2018-02-27 11:19:27

【问题描述】：

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

Leaflet 只接受四个角之一作为 addLegend 标记中“位置”属性的有效输入。我之前已将自定义 css 标签添加到 UI 页面的标题中，并且我一直在探索用于格式化图例的 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", ),
  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)

【参考方案1】：

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

首先，您在 sn-p 中的 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", ),
  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)

【讨论】：

太棒了，这就是我想要的。谢谢你。调整边距是否会引发任何潜在问题（关于地图上的显示方式）？试一试，看起来其他一切都和以前一样。

@BGroza 图例面板似乎相当独立。所以其他一切都会是一样的。如果您是古玩，请尝试一些极端值，看看是否会出现问题。