Highlight Borders When Mouseover Fill Area - Leaflet-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)