闪亮的传单地图使面板消失

时间:2019-07-02 20:46:44

标签: r shiny leaflet fluid-layout

构建闪亮的应用程序时遇到了困难。我想要一张可以单击城市以显示数据的地图。我用类似于this的东西制作了一个普通地图,带有一个包含标签的边栏。

我想添加一个顶部面板,其中包含所有选项卡共有的输入(例如,选择感兴趣的数据集,选择城市的按钮等)。但是地图使顶部面板部分消失了,我不知道为什么,也找不到解决方法。

这里是示例:

library(shiny)
library(leaflet)
library(maps)

rm(list = ls())
mapStates = map("world", fill = TRUE, plot = FALSE)

    ui <- fluidPage(
  fluidRow(
    column(width = 4,offset = 2,
           wellPanel(selectInput("dataset", "Choose a dataset:",
                                 choices = c("Temperature max" = 1,
                                             "Temperature mean" = 2,
                                             "Temperature min" = 3,
                                             "Precipitation" = 4,
                                             "Snow depth" = 5,
                                             "Maximum wind speed" = 6,
                                             "average win speed" = 7)))
    ),
    column(4,wellPanel(numericInput("citynum", "Number of city to select:", value = 1,min = 1,max = 3,step = 1)))
  ),

  sidebarLayout(
    mainPanel(
      div(class="outer",
          tags$style(type = "text/css", ".outer {position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; padding: 0}"),
          leafletOutput("mymap",height = "100%",width = "100%"))
    ),

    sidebarPanel(sliderInput("obs", "Number of observations:",  
                             min = 1, max = 1000, value = 500))
  )
)
server <- function(input, output, session) {
  output$mymap <- renderLeaflet({
    leaflet(data = mapStates, options = leafletOptions(minZoom = 3, maxZoom = 18)) %>% 
      #clearBounds() %>%
      addTiles() %>% 
      addProviderTiles(providers$Stamen.TonerLite,
                       options = providerTileOptions(noWrap = TRUE))
  })
}

shinyApp(ui, server)

产生的结果

enter image description here

在这里,我没有面板也没有numericInput。但是,如果我将包含顶部面板的流体行放置在包含地图的mainPanel之后,则会显示该面板:

ui <- fluidPage(

  sidebarLayout(

    mainPanel(
      div(class="outer",
      tags$style(type = "text/css", ".outer {position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; padding: 0}"),
      leafletOutput("mymap",height = "100%",width = "100%"))
    ),

    sidebarPanel(sliderInput("obs", "Number of observations:",  
                             min = 1, max = 1000, value = 500))
    ),
  fluidRow(column(width = 4,offset = 2,
                  wellPanel(selectInput("dataset", "Choose a dataset:",
                                        choices = c("Temperature max" = 1,
                                                    "Temperature mean" = 2,
                                                    "Temperature min" = 3,
                                                    "Precipitation" = 4,
                                                    "Snow depth" = 5,
                                                    "Maximum wind speed" = 6,
                                                    "average win speed" = 7)))
  ),
  column(4,wellPanel(numericInput("citynum", "Number of city to select:", value = 1,min = 1,max = 3,step = 1)))
  )
)

enter image description here

但这不是在正确的位置。所以我的问题:

  • 如何在顶部显示面板并在侧面保留完整尺寸的地图?
  • 这是第二个问题:如何使面板在整个fluirRow中持续使用我的顶部面板?

0 个答案:

没有答案