2016-05-25 21 views
5

Ich versuche, eine Map mit Punkten zu erstellen, deren Größe durch eine Variable bestimmt wird. Ist es möglich, eine Legende mit unterschiedlich großen Kreisen zu erstellen, die die verschiedenen Variablenwerte repräsentieren? Ich habe einen weiteren Post gefunden, der zeigt, wie man Quadrate in Kreise in der Legende umwandelt, bin mir aber nicht sicher, wie man die Größe verschiedener Kreise in der Legende ändern kann.Erstellen von Legenden mit Kreisen Flugblatt R

Zum Beispiel ist hier ein Dummy-Skript, das 10 Punkte erstellt, die mit 2 Klassen einer Variablen (5 und 10) verbunden sind. Ich hätte gerne eine Legende mit zwei Kreisen, die die gleiche Größe wie addCircleMarkers mit einem Radius von 5 und 10 haben. Wenn jemand modifizieren kann, um zu erstellen, was ich will, wäre ich sehr dankbar! Vielen Dank!

library(shiny) 
library(leaflet) 

#create data 
Points<-data.frame(x=runif(10,20,21), y=runif(10,0,1), var=rep(c(5,10),5)) 
map = leaflet() %>% addTiles() 

# Set up shiny app 
shinyApp(ui=bootstrapPage(
tags$style(type = "text/css", "html, body {width:100%;height:100%}", 
".leaflet .legend i{ 
border-radius: 50%; 
width: 10px; 
height: 10px; 
margin-top: 4px; 
} 
" 
), 
leafletOutput("myMap", width = "100%", height = "100%")), 

server= function(input, output){ 

output$myMap = renderLeaflet({map %>% 
    addCircleMarkers(Points$x,Points$y,radius=Points$var) %>% 
    addLegend(colors=rep("blue",2), labels=c(5,10)) 
    }) 
}) 

Antwort

7

Sie haben Glück. Ein genauerer Blick auf die leaflet.js zeigt, dass die Konfigurationen Ihr Add innerhalb des addLegend Befehl, werden verwendet, buchstäblich die Legende Elemente zu erstellen:

Linien 1083-1086 von leaflet.js:

for (var i = 0; i < colors.length; i++) { 
    legendHTML += '<i style="background:' + colors[i] + ';opacity:' + 
       options.opacity + '"></i> ' + labels[i] + '<br/>'; 
} 

Auf diese Weise Wir können uns ein bisschen extra Styling holen. Innerhalb der colors Argument, fügen wir einige width und height, um die Größe der i Tag (= der Legende Kreis) zu ändern. Und (dies ist optional) können wir die labels eine div mit modifizierten Ausrichtung Stil machen, weil sie dazu neigen, stecken bis zur Spitze der Linie, wenn der Kreis groß wird.

Ich habe mir die Freiheit genommen, eine benutzerdefinierte Legendenfunktion für Sie zu erstellen. Dies nimmt einen zusätzlichen Wert für die Kreisgrößen. (Es ist eine sehr minimale Funktion nur für diese eine Anwendung.) Es fügt dann das oben erwähnte Styling hinzu, ohne dass Sie sich um Tippfehler oder andere Fehler kümmern müssen. Beachten Sie, dass die Standardgröße 10 ist.

Code unten. Habe Spaß! Und bitte schreiben Sie, wenn es Fehler oder Fehler gibt. Ich konnte nicht für jedes mögliche Szenario testen.

library(shiny) 
library(leaflet) 

#create data 
Points<-data.frame(x=runif(10,20,21), y=runif(10,0,1), var=rep(c(5,10),5)) 
map = leaflet() %>% addTiles() 

# Set up shiny app 
shinyApp(
    ui = bootstrapPage(
    tags$style(type = "text/css", "html, body {width:100%;height:100%}", 
     ".leaflet .legend i{ 
     border-radius: 50%; 
     width: 10px; 
     height: 10px; 
     margin-top: 4px; 
     } 
    "), 
    leafletOutput("myMap", width = "100%", height = "100%") 
), 

    server = function(input, output){ 
    addLegendCustom <- function(map, colors, labels, sizes, opacity = 0.5){ 
     colorAdditions <- paste0(colors, "; width:", sizes, "px; height:", sizes, "px") 
     labelAdditions <- paste0("<div style='display: inline-block;height: ", sizes, "px;margin-top: 4px;line-height: ", sizes, "px;'>", labels, "</div>") 

     return(addLegend(map, colors = colorAdditions, labels = labelAdditions, opacity = opacity)) 
    } 

    output$myMap = renderLeaflet({map %>% 
     addCircleMarkers(Points$x,Points$y,radius=Points$var) %>% 
     addLegendCustom(colors = c("blue", "blue", "red"), labels = c("A", "B", "C"), sizes = c(10, 20, 40)) 
    }) 
    } 
) 
Verwandte Themen