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

score 2 · Answer 1 · answered Jan 28 '21 at 05:30

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)
    })
  }
)

If you enable the vertical layout:scroll in the beginning then it won't work. I am still facing the same issue. — kav, Jan 28 '21 at 09:43
Please look at my code again above. The vertical scroll thing creates an issue. I can't disable the vertical layout because it'll then cause chaos on the other web pages that I have in my dasboard. — kav, Jan 28 '21 at 09:56
Where are you running this? Is it a markdown document? How do I reproduce this? — Ronak Shah, Jan 28 '21 at 10:26
@kav It seems to work fine for me when I use it in markdown document. — Ronak Shah, Jan 28 '21 at 10:38
and when you run this code chunk it opens a new browser window? — Ronak Shah, Jan 28 '21 at 10:44
@Ronak Shah, In top left of map, there is a button to select points in the map that draw a rectangle. Is it possible to select points on map by circle or lasso like https://github.com/zakjan/leaflet-lasso without using shiny? — Masoud, Jul 15 '21 at 20:51
@Ronak Shah, For more information please see https://stackoverflow.com/questions/68342915/use-lasso-instead-rectangle-for-select-reign-in-leaflet — Masoud, Jul 15 '21 at 21:44

Flexdashboard - leaflet not full screen

1 Answers1