R shiny how to make separate working tabs

Question

I have an interactive map but I want to create a homepage and be able to have a nav bar so the user can tab over to the interactive map. This code is all under app.R. I am unsure if I have to create another .R file or if I am able to use the tabpanel function and display the map only underneath that tab. Here is my code:

ui <- bootstrapPage(
  
  titlePanel("Nitrogen Use Efficiency Interactive Map"),
  
  mainPanel(
    tabsetPanel(
      tabPanel("Home Page"),
      tabPanel("Interactive Map"),
      
      
    )
  ),
  
  leafletOutput("map", width = "100%", height = "100%"),
  
  tags$style(type = "text/css", "html, body {width:100%;height:100%}"),
  
  absolutePanel(top = 10, right = 10,
                pickerInput("countries", label = "Select a Country:",
                            choices = list("All countries", 
                                           `Group A` = c("Egypt", "Russia", "Saudi Arabia", "Uruguay"),
                                           `Group B` = c("Iran", "Morocco", "Portugal", "Spain"),
                                           `Group C` = c("Australia", "Denmark", "France", "Peru"),
                                           `Group D` = c("Argentina", "Croatia", "Iceland", "Nigeria"),
                                           `Group E` = c("Brazil", "Costa Rica", "Serbia", "Switzerland"),
                                           `Group F` = c("Germany", "Mexico", "South Korea", "Sweden"),
                                           `Group G` = c("Belgium", "England", "Panama", "Tunisia"),
                                           `Group H` = c("Colombia", "Japan", "Poland", "Senegal")),
                            options = list(
                              
                              `live-search` = TRUE)
                )
  )
)

server <- function(input, output, session) {
  
  filteredData <- reactive({
    if (input$countries == "All countries") {
      Players_df
    } else {
      filter(Players_df, Countries == input$countries)
    }
  })
  
  output$map <- renderLeaflet({
    leaflet(filteredData()) %>%
      addProviderTiles(providers$Esri.WorldTopoMap) %>%
      addMarkers(~lon_final, ~lat_final, 
                 #icon = filteredIcon(), 
                 label = ~Player, 
                 labelOptions = labelOptions(textsize = "12px"),
                 popup = ~popup_text)
  })
  
}

Answer 1

I recommend using navbarPage instead of bootstrapPage. Below is a minimal example. Also, you might want to consider the shinydashboard package.

library(shiny)
library(shinyWidgets)

ui <- navbarPage(

  title = "Nitrogen Use Efficiency Interactive Map",

  tabPanel(title = "Main page",
           h2("Main page content")),
  tabPanel(title = "Interactive Map",
           
                         pickerInput("countries", label = "Select a Country:",
                                     choices = list("All countries", 
                                                    `Group A` = c("Egypt", "Russia", "Saudi Arabia", "Uruguay"),
                                                    `Group B` = c("Iran", "Morocco", "Portugal", "Spain"),
                                                    `Group C` = c("Australia", "Denmark", "France", "Peru"),
                                                    `Group D` = c("Argentina", "Croatia", "Iceland", "Nigeria"),
                                                    `Group E` = c("Brazil", "Costa Rica", "Serbia", "Switzerland"),
                                                    `Group F` = c("Germany", "Mexico", "South Korea", "Sweden"),
                                                    `Group G` = c("Belgium", "England", "Panama", "Tunisia"),
                                                    `Group H` = c("Colombia", "Japan", "Poland", "Senegal")),
                                     options = list(
                                       
                                       `live-search` = TRUE)

           ),
           h4("Place map here"))
)


server <- function(input, output, session) {

}

shinyApp(ui = ui, server = server)