在闪亮应用程序中选择地图上的状态

时间:2018-01-26 15:07:42

标签: r shiny leaflet r-leaflet

我试图重现这个出色的答案:Turn states on a map into clickable objects in Shiny

我有以下数据集:

library(rgdal)
library(leaflet)

tmp <- tempdir()
url <- "http://personal.tcu.edu/kylewalker/data/mexico.zip"
file <- basename(url)
download.file(url, file)
unzip(file, exdir = tmp)
mexico <- readOGR(dsn = tmp, layer = "mexico", encoding = "UTF-8")

pal <- colorQuantile("YlGn", NULL, n = 5)
state_popup <- paste0("<strong>Estado: </strong>", 
                  mexico$name, 
                  "<br><strong>PIB per c?pita, miles de pesos, 2008: </strong>", 
                  mexico$gdp08)

在这些数据的顶部,我构建了以下Shiny Application:

# load necessary packages
library( leaflet )    
library( shiny )
library( shinydashboard )


ui <- fluidPage(
  # place the contents inside a box
  shinydashboard::box(
    width = 12
    , title = "Click on the map!"
    # separate the box by a column
    , column(
      width = 2
      , shiny::actionButton( inputId = "clearHighlight"
                             , icon = icon( name = "eraser")
                             , label = "Clear the Map"
                             , style = "color: #fff; background-color: #D75453; border-color: #C73232"
      )
    )
    # separate the box by a column
    , column(
      width = 10
      , leaflet::leafletOutput( outputId = "myMap"
                                , height = 850
      )
    )
  ) # end of the box
) # end of fluid page

# create the server
server <- function( input, output, session ){

  # create foundational map
  foundational.map <- shiny::reactive({
    leaflet() %>%
      #addTiles( urlTemplate = "https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png") %>%
      #setView( lng = -87.567215
      #         , lat = 41.822582
      #         , zoom = 11 ) %>%
      addProviderTiles("CartoDB.Positron") %>%
      addPolygons( data = mexico
                   , fillOpacity = 0
                   , opacity = 0.2
                   , color = "#000000"
                   , weight = 2
                   , layerId = mexico$states
                   , group = "click.list"
      )
  })

  output$myMap <- renderLeaflet({

    foundational.map()

  }) 

  click.list <- shiny::reactiveValues( ids = vector() )

  shiny::observeEvent( input$myMap_shape_click, {

    click <- input$myMap_shape_click
    click.list$ids <- c( click.list$ids, click$id )
    lines.of.interest <- mexico[ which( mexico$states %in% click.list$ids ) , ]

    if( is.null( click$id ) ){
      req( click$id )
    } else if( !click$id %in% lines.of.interest@data$id ){
      leaflet::leafletProxy( mapId = "myMap" ) %>%
        addPolylines( data = lines.of.interest
                      , layerId = lines.of.interest@data$id
                      , color = "#6cb5bc"
                      , weight = 5
                      , opacity = 1
        ) 

    } # end of if else statement

  }) # end of shiny::observeEvent({})

  shiny::observeEvent( input$clearHighlight, {

    output$myMap <- leaflet::renderLeaflet({

      click.list$ids <- NULL
      foundational.map()

    }) # end of re-rendering $myMap

  }) # end of clearHighlight action button logic

} # end of server

shiny::shinyApp( ui = ui, server = server)

基本地图有效。但是,我想要实现的是当我点击一个状态边框放置在状态周围。这应该使用以下代码:

click <- input$myMap_shape_click
click.list$ids <- c( click.list$ids, click$id )
lines.of.interest <- mexico[ which( mexico$states %in% click.list$ids ) , ]

if( is.null( click$id ) ){
  req( click$id )
} else if( !click$id %in% lines.of.interest@data$id ){
  leaflet::leafletProxy( mapId = "myMap" ) %>%
    addPolylines( data = lines.of.interest
                  , layerId = lines.of.interest@data$id
                  , color = "#6cb5bc"
                  , weight = 5
                  , opacity = 1
    ) 

}

但显然有些事情已经结束。对于出了什么问题的任何想法?

1 个答案:

答案 0 :(得分:3)

问题变得非常简单(一旦你知道在哪里看)。你引用了两次到mexico$states,而它应该是mexico$state,所以我删除了两个字母,现在它可以工作了。请参阅下面的代码。

也许还可以添加我发现它的方式,所以你知道如何在将来调试类似的问题。在observeEvent中,我添加了print(click)。输出结果是:

$id
NULL

$.nonce
[1] 0.2851101

$group
[1] "click.list"

$lat
[1] 22.26199

$lng
[1] -100.2037

因此,我们发现点击的id存在问题!从那里可以很容易地看到错误,多边形有id mexico$states,而不是mexico$state

希望这有帮助!

library(rgdal)
library(leaflet)

tmp <- tempdir()
url <- "http://personal.tcu.edu/kylewalker/data/mexico.zip"
file <- basename(url)
download.file(url, file)
unzip(file, exdir = tmp)
mexico <- readOGR(dsn = tmp, layer = "mexico", encoding = "UTF-8")

pal <- colorQuantile("YlGn", NULL, n = 5)
state_popup <- paste0("<strong>Estado: </strong>", 
                      mexico$name, 
                      "<br><strong>PIB per c?pita, miles de pesos, 2008: </strong>", 
                      mexico$gdp08)

# load necessary packages
library( leaflet )    
library( shiny )
library( shinydashboard )


ui <- fluidPage(
  # place the contents inside a box
  shinydashboard::box(
    width = 12
    , title = "Click on the map!"
    # separate the box by a column
    , column(
      width = 2
      , shiny::actionButton( inputId = "clearHighlight"
                             , icon = icon( name = "eraser")
                             , label = "Clear the Map"
                             , style = "color: #fff; background-color: #D75453; border-color: #C73232"
      )
    )
    # separate the box by a column
    , column(
      width = 10
      , leaflet::leafletOutput( outputId = "myMap"
                                , height = 850
      )
    )
  ) # end of the box
) # end of fluid page

# create the server
server <- function( input, output, session ){

  # create foundational map
  foundational.map <- shiny::reactive({
    leaflet() %>%
      #addTiles( urlTemplate = "https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png") %>%
      #setView( lng = -87.567215
      #         , lat = 41.822582
      #         , zoom = 11 ) %>%
      addProviderTiles("CartoDB.Positron") %>%
      addPolygons( data = mexico
                   , fillOpacity = 0
                   , opacity = 0.2
                   , color = "#000000"
                   , weight = 2
                   , layerId = mexico$state
                   , group = "click.list"
      )
  })

  output$myMap <- renderLeaflet({

    foundational.map()

  }) 

  click.list <- shiny::reactiveValues( ids = vector() )

  shiny::observeEvent( input$myMap_shape_click, {

    click <- input$myMap_shape_click
    click.list$ids <- c( click.list$ids, click$id )
    lines.of.interest <- mexico[ which( mexico$state %in% click.list$ids ) , ]
    print(click)

    if( is.null( click$id ) ){
      req( click$id )
    } else if( !click$id %in% lines.of.interest@data$id ){
      leaflet::leafletProxy( mapId = "myMap" ) %>%
        addPolylines( data = lines.of.interest
                      , layerId = lines.of.interest@data$id
                      , color = "#6cb5bc"
                      , weight = 5
                      , opacity = 1
        ) 

    } # end of if else statement

  }) # end of shiny::observeEvent({})

  shiny::observeEvent( input$clearHighlight, {

    output$myMap <- leaflet::renderLeaflet({

      click.list$ids <- NULL
      foundational.map()

    }) # end of re-rendering $myMap

  }) # end of clearHighlight action button logic

} # end of server

shiny::shinyApp( ui = ui, server = server)