Customizing Leaflet Map Icons in R - html

Question

I started to learn how to use the search features in leaflet maps - below is a leaflet map which allows you to search for a city (i.e. single search term):
library(leaflet)
library(leaflet.extras)
library(dplyr)
# using the same reproducible data from the question/example
cities <- na.omit(read.csv(
textConnection("City,Lat,Long,Pop, term1, term2
Boston,42.3601,-71.0589,645966, AAA, BBB
Hartford,41.7627,-72.6743,125017, CCC, DDD
New York City,40.7127,-74.0059,8406000, EEE, FFF
Philadelphia,39.9500,-75.1667,1553000, GGG, HHH
Pittsburgh,40.4397,-79.9764,305841, III, JJJ
Providence,41.8236,-71.4222,177994, JJJ, LLL
")))
# CODE 1
leaflet(cities) %>%
addProviderTiles(providers$OpenStreetMap) %>%
addMarkers( clusterOptions = markerClusterOptions()) %>%
addResetMapButton() %>%
# these markers will be "invisible" on the map:
addMarkers(
data = cities, lng = ~Long, lat = ~Lat, label = cities$City,
group = 'cities', # this is the group to use in addSearchFeatures()
# make custom icon that is so small you can't see it:
icon = makeIcon(
iconUrl = "https://leafletjs.com/examples/custom-icons/leaf-green.png",
iconWidth = 1, iconHeight = 1
)
) %>%
addSearchFeatures(
targetGroups = 'cities', # group should match addMarkers() group
options = searchFeaturesOptions(
zoom=12, openPopup = TRUE, firstTipSubmit = TRUE,
autoCollapse = TRUE, hideMarkerOnCollapse = TRUE
)
)
In a previous question (Correctly Specifying Vectors in R), I learned how to make a leaflet map that allows for multiple search terms:
# CODE 2
leaflet(cities) %>%
addProviderTiles(providers$OpenStreetMap) %>%
addMarkers(clusterOptions = markerClusterOptions()) %>%
addResetMapButton() %>%
# these markers will be "invisible" on the map:
addMarkers(
data = cities, lng = ~Long, lat = ~Lat, label = cities$City,
group = 'cities',# this is the group to use in addSearchFeatures()
# make custom icon that is so small you can't see it:
icon = makeIcon(
iconUrl = "https://leafletjs.com/examples/custom-icons/leaf-green.png",
iconWidth = 1, iconHeight = 1
)) %>%
addMarkers(data = cities, lng = ~Long, lat = ~Lat,
label = cities$term1, group = 'term1') %>%
addMarkers(data = cities, lng = ~Long, lat = ~Lat,
label = cities$term2, group = 'term2') %>%
addSearchFeatures(
targetGroups = c('cities', 'term1', 'term2'), # group should match addMarkers() group
options = searchFeaturesOptions(
zoom=12, openPopup = TRUE, firstTipSubmit = TRUE,
autoCollapse = TRUE, hideMarkerOnCollapse = TRUE
)
)
The one thing I would like to change about CODE 2 :
In CODE 1, when you zoom in and zoom out, the "blue pins" will "collapse" into the "green circles".
In CODE 2, the blue pins and the green circles wont collapse into each other. Is there a way to change this?
Thank you!

Answer 1

You have to make sure that all of the markers have the same icon in order for them to cluster.
leaflet(cities) %>%
addProviderTiles(providers$OpenStreetMap) %>%
addMarkers(clusterOptions = markerClusterOptions()) %>%
addResetMapButton() %>%
# these markers will be "invisible" on the map:
addMarkers(
data = cities, lng = ~Long, lat = ~Lat, label = cities$City,
group = 'cities',# this is the group to use in addSearchFeatures()
# make custom icon that is so small you can't see it:
icon = makeIcon(
iconUrl = "https://leafletjs.com/examples/custom-icons/leaf-green.png",
iconWidth = 1, iconHeight = 1
)) %>%
addMarkers(data = cities, lng = ~Long, lat = ~Lat,
label = ~term1, group = 'term1',
icon = makeIcon( # <----- I'm new!
iconUrl = "https://leafletjs.com/examples/custom-icons/leaf-green.png",
iconWidth = 1, iconHeight = 1
)) %>%
addMarkers(data = cities, lng = ~Long, lat = ~Lat,
label = ~term2, group = 'term2',
icon = makeIcon( # <----- I'm new!
iconUrl = "https://leafletjs.com/examples/custom-icons/leaf-green.png",
iconWidth = 1, iconHeight = 1
)) %>%
addSearchFeatures(
targetGroups = c('cities', 'term1', 'term2'), # group match addMarkers() group
options = searchFeaturesOptions(
zoom=12, openPopup = TRUE, firstTipSubmit = TRUE,
autoCollapse = TRUE, hideMarkerOnCollapse = TRUE
)
)
I looked at this for quite a while, and in retrospect...why? It seems so simple now that I know the answer. Sigh. You and me both, right? Let me know if you have questions.