如何使我的Shiny leafletOutput具有height ="100％"在navbarPage中时? [英] How can I make my Shiny leafletOutput have height="100%" while inside a navbarPage?

问题描述

(长时间的用户，首次发布者)

(Long time user, first time poster)

我正在开发一个使用Leaflet软件包的Shiny App.如果没有导航菜单，则可以使用leafletOutput('map', height='100%')使LeafletOutput具有100％的高度.

I'm working on a Shiny App that uses the Leaflet package. Without a navigation menu, I am able to make the LeafletOutput have 100% height by using leafletOutput('map', height='100%').

问题是，当我将此代码放置在navbarPage中时，它不再起作用，并且我的地图停止显示(下面的控制台错误).我尝试通过添加tags$style(type = "text/css", "#map {height: 100%};")注入CSS代码，但这似乎没有任何效果.如果将其更改为tags$style(type = "text/css", #map {height: 100% !important};")，代码将再次中断，并且在控制台中会收到相同的错误代码:

The problem is that when I place this code inside a navbarPage, it no longer works and my map stops displaying (console error below). I've tried injecting CSS code by adding tags$style(type = "text/css", "#map {height: 100%};") but that doesn't seem to have any effect. If I change this to tags$style(type = "text/css", #map {height: 100% !important};"), the code breaks again and I get the same error code in my console:

Uncaught TypeError: Cannot read property 'clearLayers' of undefined
Uncaught TypeError: Cannot read property 'addLayer' of undefined
Uncaught TypeError: Cannot read property 'clear' of undefined
Uncaught TypeError: Cannot read property 'add' of undefined

这些错误分别在814、726、979和1095行上的leaflet.js上引发.这些行的代码如下:

These errors are thrown on leaflet.js on lines 814, 726, 979 and 1095 respectively. The code for these lines is as follows:

第814行:this.layerManager.clearLayers("shape");
第726行:this.layerManager.addLayer(layer, category, thisId, thisGroup);
979行:this.controls.clear();
第1095行:this.controls.add(legend, options.layerId);

line 814: this.layerManager.clearLayers("shape");
line 726: this.layerManager.addLayer(layer, category, thisId, thisGroup);
line 979: this.controls.clear();
line 1095: this.controls.add(legend, options.layerId);

以下是我的UI.R文件中的相关代码:

Below is the relevant code from my UI.R file:

navbarPage("DHIS Data Explorer",
       tabPanel("Plot",
                tags$style(type = "text/css", "html, body, #map {width:100%;height:100%}"),
                leafletOutput('map', height = "100%"), #this height variable is what breaks the code.
                absolutePanel(top = 60, right = 10, draggable=TRUE,...

这是我添加导航之前使用的代码，效果很好:

And here is code I was using before adding navigation, which works fine:

bootstrapPage(
  tags$style(type = "text/css", "html, body {width:100%;height:100%}"),
  leafletOutput("map", width = "100%", height = "100%"),
  absolutePanel(top = 60, right = 10, draggable=TRUE,...

推荐答案

我直接从

I copied this directly from the SuperZip example. You just have to wrap everything in a <div> and set up css accordingly. Here might be a solution for you:

1. 将tags$style行更改为

tags$style(type = "text/css", ".outer {position: fixed; top: 41px; left: 0; right: 0; bottom: 0; overflow: hidden; padding: 0}")

将对象包装在<div class="outer"></div>中.例如，

Wrap your object in the <div class="outer"></div>. For example,

bootstrapPage(div(class="outer",
    tags$style(type = "text/css", ".outer {position: fixed; top: 41px; left: 0; right: 0; bottom: 0; overflow: hidden; padding: 0}"),
    leafletOutput("map", width = "100%", height = "100%"),
    absolutePanel(top = 60, right = 10, draggable=TRUE,...
))

这篇关于如何使我的Shiny leafletOutput具有height ="100％"在navbarPage中时?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！