R leaflet search marker NOT work

Question

I was able to use these 2 packages to search the markers on the map. However, I just installed them on my new computer again, but the search button does not work now. How to search markers? Thank you

# We need latest leaflet package from Github, as CRAN package is too old.
devtools::install_github('rstudio/leaflet')
devtools::install_github('bhaskarvk/leaflet.extras')
library("leaflet")
library("leaflet.extras")

cities <- read.csv(textConnection("
City,Lat,Long,Pop
                              Boston,42.3601,-71.0589,645966
                              Hartford,41.7627,-72.6743,125017
                              New York City,40.7127,-74.0059,8406000
                              Philadelphia,39.9500,-75.1667,1553000
                              Pittsburgh,40.4397,-79.9764,305841
                              Providence,41.8236,-71.4222,177994
                              "))

leaflet(cities) %>% addProviderTiles(providers$OpenStreetMap) %>%
addCircleMarkers(lng = ~Long, lat = ~Lat, weight = 1, fillOpacity=0.5,
               radius = ~sqrt(Pop)/50 , popup = ~City, label=~City, group 
='cities') %>%
addResetMapButton() %>%
addSearchFeatures(
targetGroups = 'cities',
options = searchFeaturesOptions(
  zoom=12, openPopup = TRUE, firstTipSubmit = TRUE,
  autoCollapse = TRUE, hideMarkerOnCollapse = TRUE )) %>%
addControl("<P><B>Hint!</B> Search for ...<br/><ul><li>New York</li> 
<li>Boston</li><li>Hartford</li><li>Philadelphia</li><li>Pittsburgh</li> 
<li>Providence</li></ul></P>",
         position='bottomright')

Answer 1

I was having this issue, and found a solution on the leaflet.extras Github issues page.

In your installation of leaflet.extras:

Open lfx-search-prod.js and search for "e instanceof t.Path ||" , and then delete it and save the file. Your CircleMarker search should work now

This should allow you to use addSearchFeature() with addCircleMarkers() without any workaround now.

Answer 2

I was having the same issue using the same example you provided. I was able to figure out that, for some reason, addSearchFeatures() will NOT work with addCircleMarkers(), but it does work with addMarkers(). So I used a workaround that essentially plots the same data twice: the first time using addCircleMarkers() with your desired formatting settings and the second time using addMarkers() with a custom icon that is so small you cannot see it on the map. The key is to assign each to the appropriate group. The search bar will search the "invisible" Markers layer but the "CircleMarkers" will be the ones that appear on your map.

# using the same reproducible data from the question/example
cities <- read.csv(
    textConnection("City,Lat,Long,Pop
                    Boston,42.3601,-71.0589,645966
                    Hartford,41.7627,-72.6743,125017
                    New York City,40.7127,-74.0059,8406000
                    Philadelphia,39.9500,-75.1667,1553000
                    Pittsburgh,40.4397,-79.9764,305841
                    Providence,41.8236,-71.4222,177994
                    "))


leaflet(cities) %>%
  addProviderTiles(providers$OpenStreetMap) %>%
  # these markers will appear on your map:
  addCircleMarkers(
     lng = ~Long, lat = ~Lat, weight = 1, fillOpacity = 0.5,
     radius = ~sqrt(Pop)/50, popup = ~City, label = ~City, 
     group ='circles' # group needs to be different than addMarkers()
  ) %>%
  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 = "http://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
    )
  ) %>%
addControl("<P><B>Hint!</B> Search for ...<br/><ul><li>New York</li>
           <li>Boston</li><li>Hartford</li><li>Philadelphia</li><li>Pittsburgh</li>
           <li>Providence</li></ul></P>",
           position = 'bottomright'
  )