アイコン付きのaddAwesomeMarkersのリーフレットの凡例

Question

正しい色とアイコンのaddAwesomeMarkers関数のリーフレット凡例を作成する方法はありますか？たとえば、次のマップでは、コードの下に示された凡例を作成したいと思います。

library(leaflet) 

IconSet <- awesomeIconList(
    ship = makeAwesomeIcon(icon= 'ship', markerColor = 'green', iconColor = 'white', library = "fa"), 
    pirate = makeAwesomeIcon(icon= 'fire', markerColor = 'blue', iconColor = 'white', library = "fa") 
) 

# Some fake data 
df <- sp::SpatialPointsDataFrame(
    cbind(
    (runif(20) - .5) * 10 - 90.620130, # lng 
    (runif(20) - .5) * 3.8 + 25.638077 # lat 
), 
    data.frame(type = factor(
    ifelse(runif(20) > 0.75, "pirate", "ship"), 
    c("ship", "pirate") 
)) 
) 

leaflet(df) %>% addTiles() %>% 
    # Select from oceanIcons based on df$type 
    addAwesomeMarkers(icon = ~IconSet[type]) 

あなたに答えるために時間と労力を心から感謝しています。

Answer 1

answerで参照できる方法があります。マップコントロールを挿入し、コントロールをhtmlで定義することです。他の答えとは異なり、アイコンはCSSスタイリングを使用して画像を作成します（一方の要素はマーカーシェイプを作成し、もう一方の要素はアイコンを含むdivとspan）。 DIV（またはフォント素晴らしいため、<i>）は、アイコンとアイコンの色を設定するマーカー

スパンの背景色を設定

• ：画像が各要素に割り当てられたCSSクラスから来（ただし、フォントの面白さは、アイコンの色が変わったようには見えません）。

各アイコンライブラリは、異なるクラスとわずかに異なる表記法を使用しています。

他の回答とアイコンのプロパティで参照されているメソッドがあれば、私はアイコンの凡例を表示する基本的な関数を構築しました。

サポートされている3つのリーフレットアイコンライブラリ（イオン、フォント、素晴らしい、グリフコン）のそれぞれのアイコンを配置する機能を構築しましたが、それぞれの位置付け属性はわずかですが、私のために。より短いサンプルコードのために、私はフォントのための位置付けだけを含んでいました - 素晴らしい、他のものの配置は同様の方法に従います。必要に応じて、私は3つすべてをサポートする機能のバージョンを投稿することができます。

機能はHTMLのみを作成し、あなたはまだコントロールに配置する必要があります（それが基本である、いくつかのパラメータを簡単にカスタマイズするために追加することができます）：

# legend html generator: 
markerLegendHTML <- function(IconSet) { 

    # container div: 
    legendHtml <- "<div style='padding: 10px; padding-bottom: 10px;'><h4 style='padding-top:0; padding-bottom:10px; margin: 0;'> Marker Legend </h4>" 

    n <- 1 
    # add each icon for font-awesome icons icons: 
    for (Icon in IconSet) { 
     if (Icon[["library"]] == "fa") { 
     legendHtml<- paste0(legendHtml, "<div style='width: auto; height: 45px'>", 
          "<div style='position: relative; display: inline-block; width: 36px; height: 45px' class='awesome-marker-icon-",Icon[["markerColor"]]," awesome-marker'>", 
           "<i style='margin-left: 8px; margin-top: 11px; 'class= 'fa fa-",Icon[["icon"]]," fa-inverse'></i>", 
          "</div>", 
          "<p style='position: relative; top: -20px; display: inline-block; ' >", names(IconSet)[n] ,"</p>", 
          "</div>")  
     } 
     n<- n + 1 
    } 
    paste0(legendHtml, "</div>") 
} 

そして、すべてのコントロールを追加する（アイコンリストから凡例の名前を取得するので、元のものから変更したが、他のものは同じでなければならない）。

library(leaflet) 

# legend html generator: 
markerLegendHTML <- function(IconSet) { 
    # container div: 
    legendHtml <- "<div style='padding: 10px; padding-bottom: 10px;'><h4 style='padding-top:0; padding-bottom:10px; margin: 0;'> Marker Legend </h4>" 

    n <- 1 
    # add each icon for font-awesome icons icons: 
    for (Icon in IconSet) { 
     if (Icon[["library"]] == "fa") { 
     legendHtml<- paste0(legendHtml, "<div style='width: auto; height: 45px'>", 
          "<div style='position: relative; display: inline-block; width: 36px; height: 45px' class='awesome-marker-icon-",Icon[["markerColor"]]," awesome-marker'>", 
           "<i style='margin-left: 8px; margin-top: 11px; 'class= 'fa fa-",Icon[["icon"]]," fa-inverse'></i>", 
          "</div>", 
          "<p style='position: relative; top: -20px; display: inline-block; ' >", names(IconSet)[n] ,"</p>", 
          "</div>")  
     } 
     n<- n + 1 
    } 
    paste0(legendHtml, "</div>") 
} 

IconSet <- awesomeIconList(
    "Regular Ship" = makeAwesomeIcon(icon= 'ship', markerColor = 'green', iconColor = 'white', library = "fa"), 
    "Pirate Ship" = makeAwesomeIcon(icon= 'fire', markerColor = 'blue', iconColor = 'white', library = "fa") 
) 

# Some fake data 
df <- sp::SpatialPointsDataFrame(
    cbind(
    (runif(20) - .5) * 10 - 90.620130, # lng 
    (runif(20) - .5) * 3.8 + 25.638077 # lat 
), 
    data.frame(type = factor(
    ifelse(runif(20) > 0.75, "Pirate Ship", "Regular Ship"), 
    c("Regular Ship", "Pirate Ship") 
)) 
) 


leaflet(df) %>% addTiles() %>% 
    addAwesomeMarkers(icon = ~IconSet[type]) %>% 
    addControl(html = markerLegendHTML(IconSet = IconSet), position = "bottomleft")