Come posso fare in modo che il mio leaflet Shiny abbia height = "100%" all'interno di una pagina navbar?

Question

(Utente per lungo tempo, poster per la prima volta)

Sto lavorando a un'app Shiny che utilizza il pacchetto Leaflet. Senza un menu di navigazione, sono in grado di fare in modo che LeafletOutput abbia il 100% di altezza utilizzando leafletOutput('map', height='100%').

Il problema è che quando inserisco questo codice all'interno di una pagina di navigazione, non funziona più e la mia mappa non viene più visualizzata (errore console sotto). Ho provato a iniettare codice CSS aggiungendo tags$style(type = "text/css", "#map {height: 100%};") ma questo non sembra avere alcun effetto. Se cambio questo per tags$style(type = "text/css", #map {height: 100% !important};"), il codice si rompe di nuovo e ottengo lo stesso codice di errore nella mia 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 

Questi errori sono gettati sul leaflet.js sulle linee 814, 726, 979 e 1095, rispettivamente. Il codice per queste linee è la seguente:

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

Di seguito si riporta il codice rilevante dal mio file UI.R :

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,... 

E qui è il codice che usavo prima di aggiungere la navigazione, che funziona bene:

0.123.516,410617 millions

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,... 

Answer 1

Ho copiato questo direttamente dall'esempio SuperZip. Devi solo avvolgere tutto in un <div> e configurare i css di conseguenza. Qui potrebbe essere una soluzione per voi:

1. Cambia la tua linea tags$style a

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

2. Avvolgete il vostro oggetto nel <div class="outer"></div>. Ad esempio,

   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,... 
   ))