Highlight Borders When Mouseover Fill Area - Leaflet-R - r

Question

Following the guidance of #TimSalabim, I separated the borders and fill of my neighbourhood polygons so that I could order them appropriately with zIndex.
https://lawsblog.netlify.com/post/leaflet-map/
If I place the highlightOptions() function within the addPolygons(neighbourhood fill) function, I don't know how to increase the border of the polygon upon mouseover.
If I place the highlightOptions() function within the addPolylines(neighbourhood border) function I can CAREFULLY mouse-over just the borders and the widths increase. That's the behavior I want, when I mouse-over any part of the neighbourhood area.
Now that I've separated the fill and borders of the polygons how do I increase the border width when I mouse-over the fill area?
# Add hood borders
addPolylines(data = borders,
color = "white",
opacity = 1,
weight = 2,
options = pathOptions(pane = "hood_borders")) %>%
# Add hood fill
addPolygons(data = hood_shp,
fillColor = ~pal(be_per_cap),
fillOpacity = 1.0,
color = NA,
options = pathOptions(pane = "hoods",
# Highlight neighbourhoods upon mouseover - NOT CORRECT
highlight = highlightOptions(
stroke = 4),
# Add label info when mouseover
label = labels,
labelOptions = labelOptions(
style = list("font-weight" = "normal", padding = "3px 8px"),
textsize = "15px",
direction = "auto")))
Taking what SeGa advised, I've modified the code. See here. The neighbourhood borders are not obscured and the border does expand upon hover. However the border does not revert back to its original width with mouse out. Why is that?
leaflet(options = leafletOptions(minZoom = 11, maxZoom = 16), width = "100%") %>%
addTiles() %>%
# Raster image surrounding Toronto
addProviderTiles(providers$OpenStreetMap.BlackAndWhite) %>%
# Center map north of Toronto City Hall slightly zoomed in
setView(map,
lng = -79.384293,
lat = 43.685, #43.653908,
zoom = 12) %>%
# Vector neighbourhoods
addPolygons(data = hood_shp,
fillColor = ~pal(be_per_cap),
color = NA,
fillOpacity = 1,
# Highlight neighbourhoods upon mouseover
highlight = highlightOptions(
weight = 3,
fillOpacity = 0,
color = "black",
opacity = 1.0,
bringToFront = TRUE,
sendToBack = TRUE),
# # Add label info when mouseover
label = labels,
labelOptions = labelOptions(
style = list("font-weight" = "normal", padding = "3px 8px"),
textsize = "15px",
direction = "auto")) %>%
# Add highways
addPolygons(data = xway,
color = "sienna",
weight = 1.0,
opacity = 1.0,
fillOpacity = 0.7) %>%
# Add major arterial
addPolygons(data = mart,
color = "#737373",
weight = 1.0,
opacity = 1.0,
fillOpacity = 1.0) %>%
# Add parks
addPolygons(data = parks,
color = "green",
weight = 1.0,
opacity = 1.0,
fillOpacity = 1.0,
options = pathOptions(clickable = FALSE)) %>%
# Add border
addPolylines(data = hood_shp,
color = "black",
stroke = TRUE,
opacity = 1,
weight = 1) %>%
# Add legend
addLegend(data = hood_shp,
colors =c("#AA122E", "#F4AE7E", "#FEFDB7"),
labels= c("More", "", "Less"),
opacity = 1.0,
title = "B&Es",
position = "bottomright")

Answer 1

I'm not sure if I understand your problem correctly but if you only want to increase the borders of a polygon with leaflet, the highlightoption is the right choice, but you shouldn't place it inside the pathOptions.
The following example uses addPolygons for the neighboorhoods with a highlightOption. Within those you define the behaviour of the neighboorhoods when mouse-overing. With the weight argument you define the border size.
The parks also go in an addPolygons but with options =
pathOptions(clickable = FALSE) you make them unclickable, so they
dont interact with mouse events.
And the borders go in a addPolylines without any further
options.
Is the following example what you are looking for?
library(sp)
Sr1 = Polygon(cbind(c(2,4,4,1,2),c(2,3,5,4,2)))
Sr2 = Polygon(cbind(c(5,4,2,5),c(2,3,2,2)))
Srs1 = Polygons(list(Sr1), "s1")
Srs2 = Polygons(list(Sr2), "s2")
hood_shp = SpatialPolygons(list(Srs1,Srs2), 1:2)
hood_shp <- SpatialPolygonsDataFrame(hood_shp, data=data.frame(be_per_cap = 1:length(hood_shp)), match.ID = F)
parks = Polygon(cbind(c(2,3,3,1,2),c(1,2,4,3,1)))
parks = SpatialPolygons(list(Polygons(list(parks), "parks")))
xway = Polygon(cbind(c(1,5,5,1,3),c(3,5,5,3,1)))
xway = SpatialPolygons(list(Polygons(list(xway), "xway")))
library(shiny)
library(leaflet)
library(htmlwidgets)
ui <- fluidPage(
leafletOutput("map")
)
server <- function(input, output) {
output$map <- renderLeaflet({
pal = colorBin("Blues", hood_shp$be_per_cap)
leaflet(width = "100%") %>%
addTiles() %>%
# Raster image surrounding Toronto
addProviderTiles(providers$OpenStreetMap.BlackAndWhite) %>%
# Vector neighbourhoods
addPolygons(data = hood_shp,
fillColor = ~pal(be_per_cap),
color = "transparent",
fillOpacity = 1,
# Highlight neighbourhoods upon mouseover
highlight = highlightOptions(
weight = 3,
fillOpacity = 0,
color = "black",
opacity = 1.0,
bringToFront = TRUE,
sendToBack = TRUE),
# # Add label info when mouseover
label = "labels",
labelOptions = labelOptions(
style = list("font-weight" = "normal", padding = "3px 8px"),
textsize = "15px",
direction = "auto")) %>%
# Add parks
addPolygons(data = parks,
color = "green",
weight = 1.0,
opacity = 1.0,
fillOpacity = 1.0,
options = pathOptions(clickable = FALSE)) %>%
# Add highways
addPolygons(data = xway,
color = "sienna",
weight = 1.0,
opacity = 1.0,
fillOpacity = 0.7) %>%
# Add border
addPolylines(data = hood_shp,
color = "black",
stroke = TRUE,
opacity = 1,
weight = 1) %>%
# Add legend
addLegend(data = hood_shp,
colors =c("#AA122E", "#F4AE7E", "#FEFDB7"),
labels= c("More", "", "Less"),
opacity = 1.0,
title = "B&Es",
position = "bottomright")
})
}
shinyApp(ui, server)