Hello everyone, I have to plot a lot of points and lines using leaflet
and shiny
, so I used the preferCanvas = TRUE
option to make the app faster. At the same time, I need to give these layers an ordering, so I used too addMapPane()
giving them a different zIndex, so for example the points are always on top of the lines when using layer controls.
The problem is that by using panes, the preferCanvas
option stops working, so the application starts working slow again, since the Canvas renderer is no longer used.
I have to admit that I don't know much about web development and I know nothing of JavaScript, so I don't even know if what I'm trying to do is even possible. A reproducible example of the problem is the following:
library(shiny)
library(leaflet)
points_data <- leaflet::breweries91
ui <- fluidPage(
leafletOutput("map", height = "80vh")
)
server <- function(input, output) {
output$map <- renderLeaflet({
leaflet(data = points_data,
options = leafletOptions(preferCanvas = TRUE)) %>%
addProviderTiles(providers$CartoDB.Positron) %>%
addMapPane(name = "circles_behind", zIndex = 410) %>%
addMapPane(name = "circles_ahead", zIndex = 420) %>%
addCircles(stroke = FALSE, fillColor = "red", fillOpacity = 1,
group = "circles_behind_group", radius = 1000,
options = pathOptions(pane = "circles_behind")) %>%
addCircles(stroke = FALSE, fillColor = "blue", fillOpacity = 1,
group = "circles_ahead_group", radius = 1000,
options = pathOptions(pane = "circles_ahead")) %>%
addLayersControl(
overlayGroups = c("circles_behind_group", "circles_ahead_group"),
options = layersControlOptions(collapsed = FALSE)
)
})
}
shinyApp(ui = ui, server = server)
In this example the red circles are always behind the blue ones, but even with preferCanvas = TRUE
, SVG is used.
Many thanks in advance.