使用Leaflet和Shiny创建交互式区域地图

Question

使用Leaflet和Shiny创建交互式区域地图

3

我正在尝试修改这个 repo 以显示区域色彩地图，并使用 sliderInput 来更新地图。一切正常，直到我尝试动画滑块输入时，什么也没有发生。我收到了以下控制台错误：input_binding_slider.js:199 Uncaught TypeError: Cannot read property 'options' of undefined.

下面是我正在使用的代码：

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)

这里有一个链接指向shinyapp

任何帮助都将不胜感激。谢谢！

- neek05

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- K. Rohde · Accepted Answer

这只是一个命名错误。您将htmlOutput和sliderOutput都命名为“category”。这会在内部造成混乱。

只需更改输出，例如：

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

并且

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

并且你应该准备好了。

编辑：完整代码

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)