r - Flexdashboard - leaflet not full screen

Question

I am working on the uber dataset. I want the map to fit completely on screen. This is how my code currently looks like:

The issue is that if u enable vertical layout: scroll then the leaflet creates the issue.

title: "random"
output: 
  flexdashboard::flex_dashboard:
    orientation: rows
    vertical_layout: scroll
runtime: shiny

shinyApp(
    fluidPage(
        leafletOutput(outputId = "df_map",height = 1300),
        absolutePanel(
            draggable = TRUE, top = "15%", left = "auto", right = "5%", class = "card",bottom = "auto",
            width = '20%', height = 'auto', fixed = TRUE,
            p(strong("Please select the parameters")),
            pickerInput(inputId = "BaseInput", label = "Base selection:", choices = unique(yr_2014$Base), 
                             multiple = F,options = list(`actions-box` = TRUE), selected =unique(yr_2014$Base) ),
            pickerInput(inputId = "MonthInput", label = "Month selection:", choices = unique(yr_2014$month), 
                             multiple = F,options = list(`actions-box` = TRUE), selected = unique(yr_2014$month)),
            sliderInput(inputId = "DayInput", "Day Selection", min=1, max=31, 
                value=c(1, 31), sep=""),
            sliderInput(inputId = "HourInput", "Hour Selection", min=0, max=23, 
                value=c(0, 23), sep="")
            
        )
    ),
    server = function(input, output, session) {
       
      df_maps <- reactive({
  yr_2014 %>%
    dplyr::filter(Base %in% input$BaseInput,month %in% input$MonthInput, day >= input$DayInput[1],
                   day <= input$DayInput[2], hour>=input$HourInput[1],hour<=input$HourInput[2])
       })

        output$df_map <- renderLeaflet({
        leaflet() %>% 
            addTiles() %>% 
            addFullscreenControl(pseudoFullscreen   =F) %>%
            addCircles(data = df_maps(), lng = ~Lon, lat = ~Lat, weight = 15, radius = 15)
        })
    }
)

Please let me know how to fix it

question from:https://stackoverflow.com/questions/65929992/flexdashboard-leaflet-not-full-screen

Answer 1

You can adjust the height and width in leafletOutput as per your choice.

leafletOutput(outputId = "df_map",height = 800, width = 1000),

Complete code :

library(shiny)
library(leaflet.extras)
library(shinyWidgets)

shinyApp(
  fluidPage(
    leafletOutput(outputId = "df_map",height = 800, width = 1000),
    absolutePanel(
      draggable = TRUE, top = "15%", left = "auto", right = "5%", class = "card",bottom = "auto",
      width = '20%', height = 'auto', fixed = TRUE,
      p(strong("Please select the parameters")),
      pickerInput(inputId = "BaseInput", label = "Base selection:", choices = unique(yr_2014$Base), 
                  multiple = F,options = list(`actions-box` = TRUE), selected =unique(yr_2014$Base) ),
      pickerInput(inputId = "MonthInput", label = "Month selection:", choices = unique(yr_2014$month), 
                  multiple = F,options = list(`actions-box` = TRUE), selected = unique(yr_2014$month)),
      sliderInput(inputId = "DayInput", "Day Selection", min=1, max=31, 
                  value=c(1, 31), sep=""),
      sliderInput(inputId = "HourInput", "Hour Selection", min=0, max=23, 
                  value=c(0, 23), sep="")
      
    )
  ),
  server = function(input, output, session) {
    
    df_maps <- reactive({
      yr_2014 %>%
        dplyr::filter(Base %in% input$BaseInput,month %in% input$MonthInput, day >= input$DayInput[1],
                      day <= input$DayInput[2], hour>=input$HourInput[1],hour<=input$HourInput[2])
    })
    
    output$df_map <- renderLeaflet({
      leaflet() %>% 
        addTiles() %>% 
        addFullscreenControl(pseudoFullscreen   =F) %>%
        addCircles(data = df_maps(), lng = ~Lon, lat = ~Lat, weight = 15, radius = 15)
    })
  }
)