CODEWITHSUNDEEP
rleaflet
Yanir Mor
Yanir Mor

Reputation: 711

Controlling the Z index of a Leaflet heatmap in R

I'm using the leaflet and leaflet.extras packages.
Trying to draw a heatmap on top of polygons, but can't get the polygons be "under" the heatmap.

Things that don't work:

Minimal Example

library(leaflet)
library(leaflet.extras)

leaflet() %>%
  addPolygons(lng = c(10, 20, 20, 10), lat = c(10, 10, 20, 20), fillOpacity = 0.75) %>%
  addHeatmap(lng = c(14, 15, 15, 16), lat = c(10, 10, 12, 10))

enter image description here

Upvotes: 2

Views: 2483

Answers (1)

JMers
JMers

Reputation: 185

Leaflt.JS sets Z-indexes as named "panes". For example, the tilePane is 200, the overlayPane is 400 etc. see: https://leafletjs.com/reference-1.4.0.html#map-pane

When you add your polygons, try setting the Heatmap layer to have a z-index of 450, or set the layer's leaflet option for a specific pane, for example, try:

addHeatmap(
    lng = c(14, 15, 15, 16), lat = c(10, 10, 12, 10), 
    options = pathOptions(pane = "overlayPane"))

Here is an example from the documentation for making your own custom pane:

# circles (zIndex: 420) are below the lines (zIndex: 430)
leaflet()%>%
addTiles() %>%
    # move the center to Snedecor Hall
    setView(-93.65, 42.0285, zoom = 14) %>%
    addMapPane("ames_lines", zIndex = 430) %>% # shown below ames_circles
    addMapPane("ames_circles", zIndex = 420) %>% # shown above ames_lines
    # points above polygons
    addCircles(
        data = random_data, ~lng, ~lat, radius = ~radius, popup = ~circleId,
        options = pathOptions(pane = "ames_circles")
    ) %>%
    # lines in'ames_lines'pane
    addPolylines(
        data = random_data, ~lng, ~lat, color = "#F00", weight = 20,
        options = pathOptions(pane = "ames_lines")    
    )

See https://cran.r-project.org/web/packages/leaflet/leaflet.pdf pages 13-14.

Upvotes: 3

Related Questions