リーフレットと光沢のあるインタラクティブなchoroplethマップ

Question

私はこのrepoを変更して、choroplethマップを表示し、sliderInputを使ってマップを更新しています。すべて私がスライダの入力をアニメーションしようとするまで、何も起こらない。このコンソールエラーが発生しました：input_binding_slider.js：199 Uncaught TypeError：未定義のプロパティ 'options'を読み取れません。

これは私が使用しているコードです：

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

へのリンク任意の助けがaprecietedされるだろうです。 ありがとう！

Answer 1

これは単なる命名ミスです。あなたはhtmlOutputとあなたのsliderOutputを "カテゴリ"と名づけました。内部的に、これは物事を混乱させる。

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)