Customizing Leaflet Map Icons in R

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.