Question

我使用Leaflet和Shiny在R上创建一个webmap。地图的右上角有一个绝对的面板，我想定位这个图例，使它不是一直在右上角，而是在绝对面板的左边。

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)时出现重叠的原因。你有不同的字体大小。

ZADD some_key 1 some_value

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

1 个答案: