在不重绘传单地图的情况下进行闪亮的UI调整

时间:2016-03-05 01:10:10

标签: shiny leaflet shinydashboard

问题

我正在创建一个shinydashboard来帮助客户探索一些空间数据。我想要实现的UI设计允许用户在两​​种布局之间轻松切换:

  • 仅限地图
  • 地图+数据表

我无法实现此设计,因为每次用户在布局之间切换时都会出现两个问题:

  1. 重新绘制地图
  2. ActionButtons中断,阻止用户浏览数据
  3. 我的猜测是,这可能是命名空间问题,但我没有任何创建modules的经验(似乎很复杂和可怕)。

    有没有人有解决这些问题的好策略?

    可重复的例子:

    library(dplyr)
    library(shiny)
    library(shinydashboard)
    library(leaflet)
    library(RColorBrewer)
    library(DT)
    
    header <- dashboardHeader(
            title = "Example"
    )
    
    sidebar <- dashboardSidebar(
            sidebarMenu(id="tabs",
                        fluidPage(
                                fluidRow(
                                        column(1),
                                        column(11,
                                               checkboxInput(inputId = "show",label = "Show Data Table",value = TRUE),
                                               p(),
                                               actionButton("zoom","Zoom to Oz",icon = icon("search-plus")))
                                )
                        )
    
                        )
    
            )
    )
    
    body <-   dashboardBody(
            fluidPage(
                    fluidRow(
                            uiOutput("content")
                    )
    
            )
    )      
    
    ui <- dashboardPage(header, sidebar, body)        
    
    server <- function(input, output) {
    
            output$map <- renderLeaflet({
    
                    pal <- colorNumeric("Set2", quakes$mag)
                    leaflet(quakes) %>% addTiles() %>%
                            fitBounds(~min(long), ~min(lat), ~max(long), ~max(lat)) %>% 
                            addCircles(radius = ~10^mag/10, weight = 1, color = "#777777",
                                                                  fillColor = ~pal(mag), fillOpacity = 0.7, popup = ~paste(mag)
                                                       )
            })
    
            output$table <- DT::renderDataTable({
                    quakes %>% select(lat,long,mag) %>% DT::datatable()
            })
    
    
            observeEvent(input$zoom,{
                    leafletProxy(mapId = "map",data = quakes$mag) %>% 
                            setView(132.166667, -23.033333,  zoom = 4)
            })
    
    
    
    
            output$content <- renderUI({
    
                    makeCol_table <- function(){
                            column(4,
                                   box(title = "",width = 12,height = "100%",
                                       DT::dataTableOutput("table"))
                                   )
                    }
    
                    makeCol_map8 <- function(){
                            column(8,
                                   box(title = "",width = 12,height = "100%",
                                       leafletOutput("map",height = "600px"))
                                   )
                    }
                    makeCol_map12 <- function(){
                            column(12,
                                   box(title = "",width = 12,height = "100%",
                                       leafletOutput("map",height = "600px"))
                                   )
                    }
    
    
                    fluidRow(
    
                            if(input$show == T)({makeCol_table()})else ({NULL}),
                            if(input$show == T)({makeCol_map8()}) else ({makeCol_map12()})
    
                    )
    
    
    
    
    
            })
    }
    
    shinyApp(ui,server)
    

    会话信息:

    > sessionInfo()
    R version 3.2.3 (2015-12-10)
    Platform: x86_64-apple-darwin13.4.0 (64-bit)
    Running under: OS X 10.11.3 (El Capitan)
    
    locale:
    [1] en_US.UTF-8/en_US.UTF-8/en_US.UTF-8/C/en_US.UTF-8/en_US.UTF-8
    
    attached base packages:
    [1] stats     graphics  grDevices utils     datasets 
    [6] methods   base     
    
    other attached packages:
    [1] dplyr_0.4.3          shinydashboard_0.5.1
    [3] DT_0.1.39            RColorBrewer_1.1-2  
    [5] leaflet_1.0.1.9003   shiny_0.13.1        
    
    loaded via a namespace (and not attached):
     [1] Rcpp_0.12.3        magrittr_1.5       munsell_0.4.3     
     [4] colorspace_1.2-6   xtable_1.8-2       R6_2.1.2          
     [7] plyr_1.8.3         tools_3.2.3        parallel_3.2.3    
    [10] DBI_0.3.1          htmltools_0.3      lazyeval_0.1.10   
    [13] yaml_2.1.13        digest_0.6.9       assertthat_0.1    
    [16] htmlwidgets_0.6    rsconnect_0.4.1.11 mime_0.4          
    [19] scales_0.4.0       jsonlite_0.9.19    httpuv_1.3.3 
    

1 个答案:

答案 0 :(得分:3)

我重新编写了您的应用,以便使用@daattali的精彩shinyjs套餐。我还删除了一些格式只是为了缩短它。

最终,我们可以使用javascript hideshow方法来隐藏包含您的表格的方框。

另请注意,我已将您的地图和表格移至ui

library(dplyr)
library(shiny)
library(shinydashboard)
library(leaflet)
library(RColorBrewer)
library(DT)
library(shinyjs)

header <- dashboardHeader(
  title = "Example"
)

sidebar <- dashboardSidebar(
  sidebarMenu(id="tabs",
              checkboxInput(inputId = "show",label = "Show Data Table",value = TRUE),
              p(),
              actionButton("zoom","Zoom to Oz", icon = icon("search-plus")
                           )
              )
  )

body <- dashboardBody(

  ## Initialise shinyjs
  useShinyjs(),

  div(id = "box_table-outer",
    box(id = "box_table",
      title = "",
      width = 12,
      height = "100%",
      DT::dataTableOutput("table")
      )
    ),
  box(title = "",
      width = 12,
      height = "100%",
      leafletOutput("map",
                    height = "600px")
      )
  )

ui <- dashboardPage(header, sidebar, body)        

server <- function(input, output) {

  output$map <- renderLeaflet({

    pal <- colorNumeric("Set2", quakes$mag)

    leaflet(quakes) %>% 
      addTiles() %>%
      fitBounds(~min(long), ~min(lat), ~max(long), ~max(lat)) %>% 
      addCircles(radius = ~10^mag/10, weight = 1, color = "#777777",
                 fillColor = ~pal(mag), fillOpacity = 0.7, popup = ~paste(mag)
      )
  })

  output$table <- DT::renderDataTable({
    quakes %>% 
      select(lat,long,mag) %>% 
      DT::datatable()
  })


  observeEvent(input$zoom, {

    leafletProxy(mapId = "map",data = quakes$mag) %>% 
      setView(132.166667, -23.033333,  zoom = 4)

  })

  ## use shinyjs functions to show/hide the table box 
  ## dependant on the check-box
  observeEvent(input$show, {
    if(input$show){
      show(id = "box_table-outer")
    }else{
      hide(id = "box_table-outer")
    }
  })

}

shinyApp(ui,server)