Interactive choropleth map with Leaflet and Shiny - r

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!

Answer 1

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)