R 내에서 전단에 사용자 지정 절대 위치로 범례 만들기 Shiny

Question

전단지와 반짝임을 사용하여 R로 웹 맵 작업을하고 있습니다. 지도 오른쪽 상단 모서리에 absolutePanel있다 및 전설 구석 위치에있는 모든 방법이 아니라 absolutePanel 왼쪽에 배치 할 싶습니다.

전단지는 4 개 모서리 중 하나만 addLegend 태그의 "position"속성에 대한 유효한 입력으로 허용합니다. 이전에 UI 페이지의 머리글에 사용자 정의 CSS 태그를 추가했으며 CSS 문서를 탐색하여 범례 서식을 지정했지만 실제로 스크립트를 사용하여 전단에 의해 작성된 범례 위치를 실제로 무시할 수는 없습니다. . 내가 알 수있는 한, 위치는 .leaflet .legend 스크립트의 어딘가에 설정됩니다.

R 스크립트에서 생성 된 웹 문서를 수정하는 대신이 문제를 해결하는 것이 좋습니다. 아직이 문제가 다른 곳에서 언급 된 것을 보지 못했습니다. 더 나은 사람이 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)