Leaflet中为不同数据集设不同图标并实现点击弹窗显示名称

问题描述 #

我正在使用R语言的leaflet、readxl、dplyr包绘制data_a和data_b两个数据集的地图，已实现用不同颜色的AwesomeMarkers区分两个数据集，但点击图标时无法显示数据中的Name字段内容，代码如下：

library(leaflet)
library(readxl)
library(dplyr)

data_a <- structure(list(Nr = c(1, 2, 3, 4, 5, 6), Name = c("MD95-2006", 
"IODP 302", "IODP 302", "IODP 302", "IODP 302", "IODP 302"), 
    Lat = c(57.083333, 87.89, 87.9036, 87.92118, 87.93333, 87.86658
    ), Long = c(-8.05, 137.65, 138.46065, 139.365501, 139.535, 
    136.17735), `18O` = c(0.69, NA, NA, NA, NA, NA), Info = c(NA_character_, 
    NA_character_, NA_character_, NA_character_, NA_character_, 
    NA_character_), Source = c("MD95-2006 planktic foraminifera ?13C and ?18O", 
    "https://www.ecord.org/expedition302/", "https://www.ecord.org/expedition302/", 
    "https://www.ecord.org/expedition302/", "https://www.ecord.org/expedition302/", 
    "https://www.ecord.org/expedition302/")), row.names = c(NA, 
-6L), class = c("tbl_df", "tbl", "data.frame"))


data_b <- structure(list(Nr = c(1, 2, 3, 4, 5, 6), Name = c("Simstich", 
"Schiebel", "Schiebel", "Stangeew", "Stangeew", "Stangeew"), 
    Lat = c(75.003333, 62.50275, 67.225033, 56.2747, 53.4347, 
    52.874), Long = c(-7.313333, -13.99235, 2.920317, -48.6992, 
    -50.0673, -51.5128), `18O` = c(NA, NA, NA, NA, NA, NA), Info = c("data for different depths", 
    NA, NA, NA, NA, NA), Source = c("https://doi.pangaea.de/10.1594/PANGAEA.82001?format=html#download", 
    "https://doi.pangaea.de/10.1594/PANGAEA.75647?format=html#download", 
    "https://doi.pangaea.de/10.1594/PANGAEA.75719", "https://doi.pangaea.de/10.1594/PANGAEA.706908", 
    "https://doi.pangaea.de/10.1594/PANGAEA.706908", "https://doi.pangaea.de/10.1594/PANGAEA.706908"
    )), row.names = c(NA, -6L), class = c("tbl_df", "tbl", "data.frame"
))

data <- bind_rows(list(data_a,data_b), .id="data_source")

icons <- awesomeIcons(
  icon = 'ios-close',
  iconColor = 'black',
  library = 'ion',
  markerColor = ifelse(data$data_source == 1, "green","red")
)

map <- leaflet(data) %>%
  addTiles() %>%
  addAwesomeMarkers(lng = ~Long, lat = ~Lat, icon = icons) 

print(map)

解决方案 #

只需在addAwesomeMarkers函数中添加popup参数，绑定数据中的Name字段即可实现点击弹窗显示名称的功能。

基础实现 #

直接指定弹窗内容为Name字段：

map <- leaflet(data) %>%
  addTiles() %>%
  addAwesomeMarkers(lng = ~Long, lat = ~Lat, icon = icons, popup = ~Name) 

美化弹窗（可选） #

如果需要更清晰的弹窗样式，可以用HTML标签格式化内容：

map <- leaflet(data) %>%
  addTiles() %>%
  addAwesomeMarkers(lng = ~Long, lat = ~Lat, icon = icons, 
                    popup = ~paste0("<strong>站点名称:</strong> ", Name)) 

完整修改后的代码 #

library(leaflet)
library(readxl)
library(dplyr)

data_a <- structure(list(Nr = c(1, 2, 3, 4, 5, 6), Name = c("MD95-2006", 
"IODP 302", "IODP 302", "IODP 302", "IODP 302", "IODP 302"), 
    Lat = c(57.083333, 87.89, 87.9036, 87.92118, 87.93333, 87.86658
    ), Long = c(-8.05, 137.65, 138.46065, 139.365501, 139.535, 
    136.17735), `18O` = c(0.69, NA, NA, NA, NA, NA), Info = c(NA_character_, 
    NA_character_, NA_character_, NA_character_, NA_character_, 
    NA_character_), Source = c("MD95-2006 planktic foraminifera ?13C and ?18O", 
    "https://www.ecord.org/expedition302/", "https://www.ecord.org/expedition302/", 
    "https://www.ecord.org/expedition302/", "https://www.ecord.org/expedition302/", 
    "https://www.ecord.org/expedition302/")), row.names = c(NA, 
-6L), class = c("tbl_df", "tbl", "data.frame"))


data_b <- structure(list(Nr = c(1, 2, 3, 4, 5, 6), Name = c("Simstich", 
"Schiebel", "Schiebel", "Stangeew", "Stangeew", "Stangeew"), 
    Lat = c(75.003333, 62.50275, 67.225033, 56.2747, 53.4347, 
    52.874), Long = c(-7.313333, -13.99235, 2.920317, -48.6992, 
    -50.0673, -51.5128), `18O` = c(NA, NA, NA, NA, NA, NA), Info = c("data for different depths", 
    NA, NA, NA, NA, NA), Source = c("https://doi.pangaea.de/10.1594/PANGAEA.82001?format=html#download", 
    "https://doi.pangaea.de/10.1594/PANGAEA.75647?format=html#download", 
    "https://doi.pangaea.de/10.1594/PANGAEA.75719", "https://doi.pangaea.de/10.1594/PANGAEA.706908", 
    "https://doi.pangaea.de/10.1594/PANGAEA.706908", "https://doi.pangaea.de/10.1594/PANGAEA.706908"
    )), row.names = c(NA, -6L), class = c("tbl_df", "tbl", "data.frame"
))

data <- bind_rows(list(data_a,data_b), .id="data_source")

icons <- awesomeIcons(
  icon = 'ios-close',
  iconColor = 'black',
  library = 'ion',
  markerColor = ifelse(data$data_source == 1, "green","red")
)

map <- leaflet(data) %>%
  addTiles() %>%
  addAwesomeMarkers(lng = ~Long, lat = ~Lat, icon = icons, 
                    popup = ~paste0("<strong>站点名称:</strong> ", Name)) 

print(map)

内容的提问来源于stack exchange，提问作者Weiss