I would like to highlight an issue I am experiencing with a Leaflet map embedded inside a shiny app. I have to display almost 1.200 markers with a custom icon. Some of these markers are grouped in clusters (to which I have also assigned a custom icon). My zoom is frozen at a value of 10 and I use the option "preferCanvas = TRUE" for rendering. The leaflet object is not that complex: there are three different tiles that could be activated by the users and every marker has a popup that displays a specific plot stored on github/Amazon.
When I activate the markers in Safari everything is fine, but when I use Google Chrome or Mozilla Firefox the zoom and the pan become less fluid, which results in a bad navigation experience for the users.
Any idea on what could be the problem and how to solve it?
Below there's a minimal reproducible example, please download the file with the coordinates here.
library(leaflet)
library(shiny)
load("~/R_surveys.rda")
ui <- fluidPage(
leafletOutput(outputId = "world_map",
height = "700px")
)
server <- function(input, output, session) {
output$world_map <- renderLeaflet({
leaflet_object <- leaflet(data = R_surveys,
options = leafletOptions(zoomDelta = 1,
zoomSnap = 0,
minZoom = 3,
maxZoom = 10,
preferCanvas = TRUE)) %>%
addMapPane(name = "Minimal_layer",
zIndex = 400) %>%
addMapPane(name = "PPS_layer",
zIndex = 500) %>%
addProviderTiles(
provider = providers$Esri.WorldShadedRelief,
group = "Minimal",
options = c(pathOptions(pane = "Minimal_layer"),
providerTileOptions(updateWhenZooming = FALSE))) %>%
addMarkers(
lng = ~XCoord,
lat = ~YCoord,
group = "Surveys",
clusterOptions = markerClusterOptions(zoomToBoundsOnClick = FALSE,
removeOutsideVisibleBounds = FALSE,
spiderfyDistanceMultiplier = 2,
freezeAtZoom = 10)
) %>%
hideGroup("Surveys") %>%
addLayersControl(overlayGroups = c("Surveys"),
options = layersControlOptions(title = "Maps",
collapsed = FALSE))
})
}
shinyApp(ui, server)
Thank you!
