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

Question

我正在使用Leaflet和Shiny在R的webmap上工作。该地图在右上角有一个绝对面板，我想定位图例，以便它不是完全位于右上角，而是位于absolutePanel的左侧。

小册子只接受四个角中的一个作为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)