Drawing multiple polygons with leaflet in Shiny

3 min read 07-10-2024

Drawing Multiple Polygons with Leaflet in Shiny: A Step-by-Step Guide

Interactive mapping with Shiny and Leaflet is a powerful combination for visualizing data. One common use case is drawing polygons on a map, allowing users to highlight specific areas or define custom regions. This article will guide you through the process of enabling users to draw multiple polygons on a Leaflet map within a Shiny app, making your application more interactive and user-friendly.

The Challenge: Dynamic Polygon Creation

Imagine you're building a Shiny app that analyzes crime data. You want to allow users to highlight specific neighborhoods, potentially identifying hotspots or investigating crime trends within user-defined areas. This requires enabling users to draw multiple polygons directly on the map, each representing a distinct neighborhood or region.

Setting Up the Stage: Our Shiny App Skeleton

Let's start with a basic Shiny app structure. We'll use leaflet and shiny packages for our map and interactive elements:

library(shiny)
library(leaflet)

ui <- fluidPage(
  titlePanel("Interactive Polygon Drawing"),
  leafletOutput("map"),
  actionButton("clearPolygons", "Clear Polygons")
)

server <- function(input, output) {
  polygons <- reactiveValues(data = list())

  output$map <- renderLeaflet({
    leaflet() %>%
      addProviderTiles("CartoDB.Positron")
  })

  observeEvent(input$clearPolygons, {
    polygons$data <- list()
  })

  observeEvent(input$map_draw_new_feature, {
    new_polygon <- input$map_draw_new_feature$geometry
    polygons$data <- c(polygons$data, list(new_polygon))
  })

  observe({
    leafletProxy("map") %>%
      clearShapes() %>%
      addPolygons(data = polygons$data,
                   fillColor = "red", 
                   fillOpacity = 0.5,
                   weight = 2,
                   color = "black")
  })
}

shinyApp(ui, server)

This code sets up a simple Shiny app with a Leaflet map and a button to clear all drawn polygons. We use reactiveValues to store the drawn polygons, which are dynamically added and updated on the map.

Key Components and Functionality:

leafletOutput("map"): This creates the Leaflet map output in the Shiny UI.
renderLeaflet: This function renders the base Leaflet map with the selected tile provider.
reactiveValues(data = list()): This object stores the data for the drawn polygons.
observeEvent(input$clearPolygons, ...): This block clears all drawn polygons when the "Clear Polygons" button is clicked.
observeEvent(input$map_draw_new_feature, ...): This block listens for new polygon drawing events from Leaflet and adds the new polygon data to the polygons$data list.
observe({ ... }): This block continuously updates the map with the latest polygon data from polygons$data.
leafletProxy("map") %>% clearShapes() ...: This code clears existing polygons on the map and adds new ones based on the data in polygons$data.

Enhancing Interactivity: Leaflet's Drawing Tools

To enable users to draw polygons on the map, we need to add Leaflet's drawing tools. The leaflet.draw package provides these functionalities. We'll need to include it in our Shiny app and activate the drawing tools in our leafletOutput.

library(leaflet.draw)

ui <- fluidPage(
  titlePanel("Interactive Polygon Drawing"),
  leafletOutput("map",  
                 options = leafletOptions(drawControl = drawControlOptions(
                   position = "topleft", 
                   edit = TRUE, 
                   polyline = FALSE,
                   polygon = TRUE,
                   rectangle = FALSE,
                   circle = FALSE,
                   marker = FALSE,
                   circlemarker = FALSE
                 ))),
  actionButton("clearPolygons", "Clear Polygons")
)

Now, users can click on the "Draw" button in the top-left corner of the map to activate the drawing tool and create polygons. The drawControlOptions function allows you to customize the drawing tool options, such as enabling or disabling different shape types.

Refining the User Experience: Editing and Clearing Polygons

Leaflet's drawing tools provide the ability to edit and delete polygons drawn on the map. We can leverage this functionality to enhance our app's usability:

observeEvent(input$map_draw_edited_features, {
  edited_polygons <- input$map_draw_edited_features$features
  for (i in 1:length(edited_polygons)) {
    polygon_index <- edited_polygons[[i]]$id
    polygons$data[[polygon_index]] <- edited_polygons[[i]]$geometry
  }
})

observeEvent(input$map_draw_deleted_features, {
  deleted_polygons <- input$map_draw_deleted_features$features
  for (i in 1:length(deleted_polygons)) {
    polygon_index <- deleted_polygons[[i]]$id
    polygons$data <- polygons$data[-polygon_index]
  }
})

These observeEvent blocks listen for events related to edited and deleted polygons, updating the polygons$data accordingly. Now, users can edit the existing polygons by dragging their vertices, or delete them by clicking on the delete icon.

Adding Value: Additional Features

The code provides a basic framework for drawing multiple polygons. You can further enhance your app by adding features like:

Polygon Attributes: Store additional information with each polygon, such as a name, description, or associated data.
Color Coding: Differentiate polygons based on their attributes using different colors or fill opacities.
Popup Information: Display relevant information about a polygon when the user clicks on it.
Data Visualization: Use the drawn polygons to visualize data on the map, such as crime rates within the defined areas.

Conclusion

By combining the power of Shiny and Leaflet, you can create interactive web applications that allow users to draw and manipulate polygons on a map. This enables engaging data exploration and visualization, unlocking new possibilities for analyzing spatial data in your Shiny apps.

Drawing multiple polygons with leaflet in Shiny