Interactive choropleth map with Leaflet and Shiny

Question

I'm trying to modify this repo to display a choropleth map and use a sliderInput to update the map. Everything Ok until I try to animate the slider input, nothing happens . I get this console error: input_binding_slider.js:199 Uncaught TypeError: Cannot read property 'options' of undefined.

This is the code i'm using:

library(dplyr) ; library(rgdal) ; library(leaflet)

gdp = read.csv("mexico2.csv", header= T) %>%
  as.data.frame()

mexico <- readOGR("mexico.shp", layer = "mexico", encoding = "UTF-8")

ui <- shinyUI(fluidPage(
  fluidRow(
    column(7, offset = 1,
           br(),
           div(h4(textOutput("title"), align = "center"), style = "color:black"),
           div(h5(textOutput("period"), align = "center"), style = "color:black"),
           br())),
  fluidRow(
    column(7, offset = 1,
           leafletOutput("map", height="530"),
           br(),
           actionButton("reset_button", "Reset view")),
    column(3,
           uiOutput("category", align = "left")))
))

server <- (function(input, output, session) {

  output$category <- renderUI({
    sliderInput("category", "Year:",
                 min=1994, max = 1999,
                 value = 1994, sep = "", animate=TRUE)
  })  

  selected <- reactive({
    subset(gdp,
           category==input$category)
  })

  output$title <- renderText({
    req(input$category)
    paste0(input$category, " GDP by State")
  })

  output$period <- renderText({
    req(input$category)
    paste("...")
  })

  lat <- 23
  lng <- -102
  zoom <- 5

  output$map <- renderLeaflet({

    leaflet() %>% 
      addProviderTiles("CartoDB.Positron") %>% 
      setView(lat = lat, lng = lng, zoom = zoom)
  })

  observe({
    mexico@data <- left_join(mexico@data, selected())

    qpal <- colorQuantile("YlGn", mexico$value, n = 5, na.color = "#bdbdbd")

    popup <- paste0("<strong>ID: </strong>",
                    mexico$id,
                    "<br><strong>Estado: </strong>",
                    mexico$name,
                    "<br><strong>Valor: </strong>",
                    mexico$value)

    leafletProxy("map", data = mexico) %>%
      addProviderTiles("CartoDB.Positron") %>% 
      clearShapes() %>% 
      clearControls() %>% 
      addPolygons(data = mexico, fillColor = ~qpal(value), fillOpacity = 0.7, 
                  color = "white", weight = 2, popup = popup) %>%
      addLegend(pal = qpal, values = ~value, opacity = 0.7,
                position = 'bottomright', 
                title = paste0(input$category, "<br>"))
  })

  observe({
    input$reset_button
    leafletProxy("map") %>% setView(lat = lat, lng = lng, zoom = zoom)
  })      

})

shinyApp(ui, server)

Here is a link to the shinyapp

Any help would be aprecieted. Thanks!

K. Rohde K. Rohde · Accepted Answer · 2016-03-21T07:46:31

It's just a naming mistake. You named your htmlOutput and your sliderOutput for "category". Internally, this messes things up.

Just change e.g. the output into

uiOutput("categoryOutput", align = "left")

and

output$categoryOutput <- renderUI({ ... })

and you should be good to go.

Edit: Full Code

library(dplyr) ; library(rgdal) ; library(leaflet)

gdp = read.csv("mexico2.csv", header= T) %>%
  as.data.frame()

mexico <- readOGR("mexico.shp", layer = "mexico", encoding = "UTF-8")

ui <- shinyUI(fluidPage(
  fluidRow(
    column(7, offset = 1,
           br(),
           div(h4(textOutput("title"), align = "center"), style = "color:black"),
           div(h5(textOutput("period"), align = "center"), style = "color:black"),
           br())),
  fluidRow(
    column(7, offset = 1,
           leafletOutput("map", height="530"),
           br(),
           actionButton("reset_button", "Reset view")),
    column(3,
           uiOutput("categoryOut", align = "left")))
))

server <- (function(input, output, session) {

  output$categoryOut <- renderUI({
    sliderInput("category", "Year:",
                 min=1994, max = 1999,
                 value = 1994, sep = "", animate=TRUE)
  })  

  selected <- reactive({
    subset(gdp,
           category==input$category)
  })

  output$title <- renderText({
    req(input$category)
    paste0(input$category, " GDP by State")
  })

  output$period <- renderText({
    req(input$category)
    paste("...")
  })

  lat <- 23
  lng <- -102
  zoom <- 5

  output$map <- renderLeaflet({

    leaflet() %>% 
      addProviderTiles("CartoDB.Positron") %>% 
      setView(lat = lat, lng = lng, zoom = zoom)
  })

  observe({
    mexico@data <- left_join(mexico@data, selected())

    qpal <- colorQuantile("YlGn", mexico$value, n = 5, na.color = "#bdbdbd")

    popup <- paste0("<strong>ID: </strong>",
                    mexico$id,
                    "<br><strong>Estado: </strong>",
                    mexico$name,
                    "<br><strong>Valor: </strong>",
                    mexico$value)

    leafletProxy("map", data = mexico) %>%
      addProviderTiles("CartoDB.Positron") %>% 
      clearShapes() %>% 
      clearControls() %>% 
      addPolygons(data = mexico, fillColor = ~qpal(value), fillOpacity = 0.7, 
                  color = "white", weight = 2, popup = popup) %>%
      addLegend(pal = qpal, values = ~value, opacity = 0.7,
                position = 'bottomright', 
                title = paste0(input$category, "<br>"))
  })

  observe({
    input$reset_button
    leafletProxy("map") %>% setView(lat = lat, lng = lng, zoom = zoom)
  })      

})

shinyApp(ui, server)

Interactive choropleth map with Leaflet and Shiny

1 Answers