web-dev-qa-db-ja.com

Leaflet for Rで光沢のあるダッシュボードの高さの100％を使用する方法

私は、ダッシュボードの本体にいくつかのマップを表示することになっている、光沢のあるダッシュボードアプリケーションを作成しています。これまでのところ、マップをボディの幅全体に拡大しても問題ありませんが、どういうわけか全高に調整する気がありません。 enter image description here

リーフレット自体はすでに高さの100％をカバーするように設定されていますが、トリックは行いません。 leafletOutputのheight属性を使用するとすぐに、leafletオブジェクトはまったく表示されず、空のボックスが残ります。

コードは次のとおりです。

library(shinydashboard)
library(leaflet)

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(
    sidebarMenu(
      menuItem(
        "Maps", 
        tabName = "maps", 
        icon = icon("globe"),
        menuSubItem("Watersheds", tabName = "m_water", icon = icon("map")),
        menuSubItem("Population", tabName = "m_pop", icon = icon("map"))
      ),
      menuItem(
        "Charts", 
        tabName = "charts", 
        icon = icon("bar-chart"),
        menuSubItem("Watersheds", tabName = "c_water", icon = icon("area-chart")),
        menuSubItem("Population", tabName = "c_pop", icon = icon("area-chart"))
      )
    )
  ),
  dashboardBody(
    tabItems(
      tabItem(
        tabName = "m_water",
        box(
          title = "Baltic catchment areas",
          collapsible = TRUE,
          width = "100%",
          height = "100%",
          leafletOutput("l_watershed")
        )
      ),
      tabItem(
        tabName = "m_pop",
        # Map in Dashboard
        leafletOutput("l_population")
      ),
      tabItem(
        tabName = "charts",
        h2("Second tab content")
      )
    )
  )
)

server <- function(input, output) {
  set.seed(122)
  histdata <- rnorm(500)

  output$l_watershed <- renderLeaflet({
    leaflet(height = "100%") %>% addTiles() %>% setView(19.08, 60.25, zoom = 4) %>%addWMSTiles(
      "http://62.236.121.188/arcgis/services/DataAndMaps/Background/MapServer/WMSServer?",
      layers = "11",
      options = WMSTileOptions(
        format = "image/png",
        transparent = TRUE
      ),
      attribution = "Catchment area provided by HELCOM"
    )
  })

  output$l_population <- renderLeaflet({
    leaflet(height = "100%") %>% addTiles() %>% setView(19.08, 60.25, zoom = 4) %>%addWMSTiles(
      "http://62.236.121.188/arcgis/services/DataAndMaps/Background/MapServer/WMSServer?",
      layers = "17",
      options = WMSTileOptions(
        format = "image/png",
        transparent = TRUE
      ),
      attribution = "Population data provided by HELCOM"
    )
  })
}

shinyApp(ui, server)
rshinyleafletshinydashboard
42
TomGeo

個人的には、window-sizeを基準に高さを設定する方が満足できることを発見しました。 dashboardBodyの高さが定義されていないため、パーセンテージとしての高さは機能しません。しかし、文書全体に対しては問題ありません。

dashoboardBodyの100％は、100vh（ccs3-unit）マイナスヘッダー（最小50px）マイナスdashboardBodyパディング（2 * 15px）を作成します。

そのため、高さを100vh-80pxに設定すれば問題ありません。

Shinyはcss3-unitsをサポートしていないため、以下のコードのように、ドキュメントに直接含める必要があります。

library(shiny)
library(shinydashboard)
library(leaflet)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    tags$style(type = "text/css", "#map {height: calc(100vh - 80px) !important;}"),
    leafletOutput("map")
  )
)

server <- function(input, output) {
  output$map <- renderLeaflet({
    leaflet() %>% addTiles() %>% setView(42, 16, 4)
  })
}

runApp(shinyApp(ui, server), launch.browser = TRUE)

楽しむ！

56
K. Rohde

別のオプションは jcheng5 および kent37 が GitHub で説明したものです

output$mymap = renderLeaflet({...make a map...})
leafletOutput('mymap', height=1000)

leaflet mapのR flexdashboardを使用して動作します

3
Banshae

ピクセルサイズを手動で追加してみてください。

...
  dashboardBody(
    tabItems(
      tabItem(
        tabName = "m_water",
        box(
          title = "Baltic catchment areas",
          collapsible = TRUE,
          width = "100%",
          height = "1000px",
          leafletOutput("l_watershed",width="100%",height="1000px")
        )
      ),
      tabItem(
        tabName = "m_pop",
        # Map in Dashboard
        leafletOutput("l_population",width="100%",height="1000px")
      ),
      tabItem(
        tabName = "charts",
        h2("Second tab content")
      )
    )
  )
...
3
Pork Chop

vhユニットは、古いモバイルブラウザでは機能しません。以下のこのCSSは、コンピューターとモバイルで機能するはずです。

/* for computer */
div.outer {
     height: calc(100vh - 80px);
     padding: 0;
     margin: 0;
     min-height: 500px
}

@media all and (max-width:768px){
/* for mobile */
div.outer  {
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  padding: 0;
}
}
1
Bangyou