Home > other >  Shiny app with navbarPage and leaflet: white spaces in margins of map
Shiny app with navbarPage and leaflet: white spaces in margins of map

Time:10-26

Update!

The original problem was solved, now there's a different one (I changed the title to reflect this).

Description

My map is displaying ok in my app, but it has a white margin that I can't get rid of (see the red lines on upper, left and right borders):

enter image description here

My code is based a lot on this example, which doesn't seem to have the same problem:

enter image description here

live version: http://shiny.rstudio.com/gallery/superzip-example.html

Code

# GLOBAL ----
library(leaflet)
library(shiny)

# UI ----
ui <- navbarPage(
  title = 'Example', 
  tabPanel("Map", leafletOutput('map', width = '100%', height = '90vh'))
)

# SERVER ----
server <- function(input, output) {
  
  output$map <- renderLeaflet({
    leaflet() %>%
      setView(-51.4, -32.6, zoom = 6) %>% 
      addTiles(group = "Open Street Map")
  })
}

# Run app ----
shinyApp(ui = ui, server = server)

Session Info

R version 3.6.3 (2020-02-29)
Platform: x86_64-pc-linux-gnu (64-bit)
Running under: Ubuntu 18.04.5 LTS

Matrix products: default
BLAS:   /usr/lib/x86_64-linux-gnu/blas/libblas.so.3.7.1
LAPACK: /usr/lib/x86_64-linux-gnu/lapack/liblapack.so.3.7.1

locale:
 [1] LC_CTYPE=en_US.UTF-8       LC_NUMERIC=C               LC_TIME=es_UY.UTF-8       
 [4] LC_COLLATE=en_US.UTF-8     LC_MONETARY=es_UY.UTF-8    LC_MESSAGES=en_US.UTF-8   
 [7] LC_PAPER=es_UY.UTF-8       LC_NAME=C                  LC_ADDRESS=C              
[10] LC_TELEPHONE=C             LC_MEASUREMENT=es_UY.UTF-8 LC_IDENTIFICATION=C       

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

other attached packages:
[1] shiny_1.5.0   leaflet_2.0.3

loaded via a namespace (and not attached):
 [1] Rcpp_1.0.5        digest_0.6.25     later_1.1.0.1     mime_0.9          R6_2.4.1         
 [6] jsonlite_1.7.0    xtable_1.8-4      magrittr_1.5      rlang_0.4.11      promises_1.1.1   
[11] tools_3.6.3       htmlwidgets_1.5.1 crosstalk_1.1.0.1 rsconnect_0.8.16  fastmap_1.0.1    
[16] httpuv_1.5.4      yaml_2.2.1        compiler_3.6.3    htmltools_0.5.0  

Thanks to anyone reading this.

Juan Manuel

CodePudding user response:

The documentation seems to point to invalid height and width values in leafletOutput()

When I remove width = 'auto' and height = 'auto' from leafletOutput('map'), the map appears.

# GLOBAL ----
library(magrittr)
library(leaflet)
library(shiny)

gropts <- names(mtcars)[-1]

# A minimal base map:
basemap <- leaflet() %>%
  setView(-51.4, -32.6, zoom = 6) %>% 
  addTiles(group = "Open Street Map")

# UI ----
ui <- navbarPage(
  title = 'Example',
  tabPanel(
    "Mapa",
    # Left out this div part, but doesn't seem to change anything:
    # div(class = 'outer',
    # tags$head(includeCSS('styles.css')),
    # CSS file used: 
    # https://github.com/rstudio/shiny-examples/blob/master/063-superzip-example/styles.css
    leafletOutput('map'),
    absolutePanel(
      # id = 'controls',
      # class = "panel panel-default",
      top = 75, right = 10,
      selectInput('variable', 
                  label = 'Variable',
                  choices = gropts,
                  selected = "disp"),
      # Check if outputs are ok:
      textOutput('test'),
      plotOutput('plot')
    )
    # )
  ),
  tabPanel("Stuff", "Some text here")
)

# SERVER ----
server <- function(input, output) {
  
  output$map <- renderLeaflet({
    basemap
  })
  
  output$test <- renderText({
    m <- lm(mtcars[,input$variable] ~ mtcars[,'mpg'])
    paste(paste(c('Intercept =', 'Slope ='), round(m$coefficients, 2)), 
          collapse  = ' | ')
  })
  
  output$plot <- renderPlot({
    plot(mtcars[,input$variable], mtcars[,'mpg'], 
         ylab = input$variable, xlab = 'mgp')
  })
}

# Run app ----
shinyApp(ui = ui, server = server)

CodePudding user response:

To remove the white space, you can set the margin to be -20px as shown below.

ui <- navbarPage(
  title = 'Example',
  tabPanel(
    "Mapa",
    
    tags$div(id = 'mymap', leafletOutput('map')),
    
    absolutePanel(
      # id = 'controls',
      # class = "panel panel-default",
      top = 75, right = 10,
      selectInput('variable', 
                  label = 'Variable',
                  choices = gropts,
                  selected = "disp"),
      # Check if outputs are ok:
      textOutput('test'),
      plotOutput('plot')
    ),
    tags$style('
                #mymap {
                        position: relative;
                        margin: -20px;
                        padding: 0px;
                        }'
    )
  ),
  tabPanel("Stuff", "Some text here")
)
  • Related