Création de légende avec position absolue personnalisée dans Leaflet dans R Shiny

Question

Je travaille sur une carte Web avec R, en utilisant Leaflet et Shiny. La carte a un absolutePanel dans le coin supérieur droit, et je voudrais positionner la légende de sorte que ce ne soit pas tout le chemin dans le coin droit, mais à gauche du absolutePanel.

La feuille n'accepte que l'un des quatre coins comme entrée valide pour l'attribut "position" dans la balise addLegend. J'ai précédemment ajouté des balises css personnalisées à l'en-tête de la page d'interface utilisateur, et j'ai exploré la documentation css pour le formatage de la légende, mais je suis incapable de trouver le bon script pour remplacer la position de légende créée par Leaflet . Pour autant que je sache, la position est définie quelque part dans le script .leaflet .legend.

Je préférerais résoudre cela dans le script R, plutôt que d'avoir à modifier les documents Web produits par celui-ci. Je n'ai pas encore vu ce problème ailleurs. Quelqu'un peut-il mieux connaître les css et brillant que je cuisine une solution pour cela? Merci d'avance.

simplifiée, un script reproductible de l'échantillon, avec une (mauvaise) tentative d'attribution d'une position absolue à la légende:

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

Il y a quelques CSS simple pour corriger votre placement, mais cela est très construit.

Tout d'abord, votre CSS dans l'extrait n'était pas valide (pas de parenthèse fermante dans la première règle). Mais le placement en soi aurait été difficile à maintenir, je suppose, comme le sont toujours les positions absolues. Vous pouvez toutefois ajuster les marges (à droite et en haut si vous le souhaitez) pour décaler les panneaux correspondants. Soyez conscient que ce sera toujours basé sur les pixels. Votre controlPanel et le panneau de légende ne seront jamais dans le même div, donc ne s'ajusteront jamais les uns aux autres d'une manière naturelle. C'est pourquoi vous feriez mieux de corriger vos largeurs sur le contentPanel pour éviter les chevauchements qui pourraient se produire lorsque, par ex. vous avez une taille de police différente.

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)