用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)