2016-05-25 13 views
5

私は、変数によってサイズが設定されたリーフレットマップを作成しようとしています。さまざまな変数値を表す異なるサイズの円で凡例を作成することは可能ですか?凡例で四角形を円に変換する方法を示す別の記事を見つけましたが、凡例でさまざまな円のサイズを変更する方法がわかりません。サークルのリーフレットで凡例を作成するR

たとえば、変数の2つのクラス(5と10)に関連付けられた10ポイントを作成するダミースクリプトがあります。私は2つの円が5と10の半径を持つaddCircleMarkersで指定されたものと同じサイズの伝説をしたいと思います。誰かが私が望むものを作成するために変更することができれば、私は非常に感謝します!ありがとう!

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

答えて

7

あなたは幸運です。

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

この方法: - leaflet.jsから1086

行1083:leaflet.js詳しく見はaddLegendコマンド内部の構成アドインは、凡例項目を作成するために文字通り使用されていることを示しています、我々はいくつかの余分なスタイリングに潜入することができます。 colors引数の中に、widthheightを追加して、iタグ(=凡例円)のサイズを変更します。そして、これはオプションです。labelsdivに変更したアラインメントスタイルにすることができます。円が大きくなると、ラインの上端に詰まってしまう傾向があるためです。

私はあなたのためにカスタムレジェンド機能を作成する自由を取った。円のサイズには追加値が必要です。 (それはちょうどこの1つのアプリケーションのための非常に最小限の機能です。)それはタイプミスまたは他のエラーを心配する必要なく、上記のスタイリングを追加します。標準サイズは10です。

以下のコードに注意してください。楽しむ!間違いやバグがあればお書きください。私はすべての可能なシナリオをテストすることができませんでした。

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)) 
    }) 
    } 
) 
関連する問題