rr-leaflet

Only Showing Individual Points on a Map


I have this following map made from simulated data in R:

First I loaded the libraires:

library(leaflet)
library(leaflet.extras)
library(dplyr)

Then, I simulated the random data for this example:

myFun <- function(n = 5000) {
  a <- do.call(paste0, replicate(5, sample(LETTERS, n, TRUE), FALSE))
  paste0(a, sprintf("%04d", sample(9999, n, TRUE)), sample(LETTERS, n, TRUE))
}

Lat = abs(rnorm(1000, 42.2, 0.1))
Long = abs(rnorm(1000, -70, 0.1))
City = myFun(1000)

cities = data.frame(Lat, Long, City)

Finally, I made the map:

# download icon from here: https://leafletjs.com/examples/custom-icons/leaf-green.png

leaflet(cities) %>%
    addProviderTiles(providers$OpenStreetMap) %>%
    addMarkers( clusterOptions = markerClusterOptions(), popup = ~paste("title: ", City)) %>%
                    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 = "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
                        )
                    )

If I try using the search feature in this map and look for an individual point (e.g. "QNZLF4655A" ):

enter image description here

All the other points are displayed at the same time - is there a way to prevent this and only show the point (i.e. the blue pin) that is being searched for?

NOTE: Sometimes if the map is too much "zoomed out" - when I search for a city in the search bar, a red circle briefly appears and the searched city does not appear at all:

enter image description here

I was hoping that when a city is searched, the map will automatically show that city with it's "identification label tag". Is there a way to fix this?


Solution

  • From what I can tell, your zoom level with search and the popup designation within the call to cluster icons are sort of working against each other.

    First, the reason you're not seeing a popup &/or marker each time you search:

    You could increase the search zoom level. (Due to the proximity of the markers...)

    --or--

    You could move the popup content declaration to the second addMarkers call.

    Second, hiding markers...

    It looks like other than popups, I've got an input box that contains information I could use to control the appearance (or lack thereof) of the markers. However, it appears the search box input is behind a closed shadowdom. (That means I can't use the information there.)

    What I've done:

    I moved the popup declaration to the second addMarkers call and left your zoom level as is. When you search, you'll see the popup and shadows where the icons were. When you close the popup, you'll see all of the icons again. If the searched icon is still grouped, it will remain grouped (based on zoom and marker proximity).

    However, you can get that red ring indicating exactly where your last searched result is after you close the popup regardless if you go with the default for autoCollapse. (I've commented out this call in this code.)

    leaflet(cities) %>%
      addProviderTiles(providers$OpenStreetMap) %>%
      addMarkers(clusterOptions = markerClusterOptions()) %>% 
                             # REMOVED , popup = ~paste("title: ", City)
      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
        ), popup = ~paste0("title: ", City)            # <--- I'm new!
      ) %>%
      addSearchFeatures(
        targetGroups = 'cities', # group should match addMarkers() group
        options = searchFeaturesOptions(
          zoom=12, openPopup = TRUE, firstTipSubmit = TRUE,
          hideMarkerOnCollapse = TRUE #, autoCollapse = TRUE  # removed
        )
      ) %>% 
      htmlwidgets::onRender(
        "function(el, x){
          $('div.leaflet-pane.leaflet-popup-pane').bind(\"DOMSubtreeModified\", function() {
            marks = document.querySelector('div.leaflet-pane.leaflet-marker-pane');
            if(this.innerHTML) {    /* add the event to the DOM */
              marks.style.visibility = 'hidden';    /* if popup */
            } else {
              marks.style.visibility = 'visible';   /* no popup */
            }
        })}")
    

    Such cozy spots near Lenger, in southern Kazakhstan.

    enter image description here

    enter image description here

    enter image description here

    enter image description here enter image description here enter image description here