Multiple leaflet maps in separate tabs do not appear in R Shiny Dashboard

Question

I am trying to render maps in separate tab items. When I render maps individually, it works perfectly. But I do not get any maps when I want the maps in separate tab items each is associated with a sidebar menu item. I tried using leafletProxy but it did not work as well.

Here is the code that illustrates my case:

library(tidyverse)
library(shiny)
library(leaflet)
library(shinydashboard)

ui <-  dashboardPage(


dashboardHeader(title = 'Interactive Maps'),
  dashboardSidebar(
    sidebarMenu(
      menuItem("1st Map", tabName = "my_map1"),
      menuItem("2nd Map", tabName = "my_map2")
    )
  ),
dashboardBody(

## Create tabs
tabItems(
  
  # mapping
  tabItem('my_map1',
          fluidPage(
            
            # Application title
            titlePanel("Here is map 1"),
            
            # Top panel with county name
            verticalLayout(
               wellPanel(textOutput("zip")),
              
              # the map itself
              mainPanel(
                leafletOutput("map1", width = 700, height = 700)
              )
            )
          )
  ),
  tabItem("my_map2",
          fluidPage(
            
            # Application title
            titlePanel("Here is map 2"),
            
            # Top panel with county name
            verticalLayout(
              wellPanel(textOutput("zip")),
              
              # the map itself
              mainPanel(
                leafletOutput("map2", width = 700, height = 700)
              )
            )
          )
   ) 
  ) 
 )  
)



server <- function(input, output, session) {
  
  output$map1 <- renderLeaflet(
    leaflet() %>% addCircleMarkers(
    lng = runif(10),
    lat = runif(10),
    layerId = paste0("marker", 1:10)))
  
  observeEvent(input$map1_marker_click, {
    leafletProxy("map1", session) %>%
      removeMarker(input$map1_marker_click$id)
  })
  
  output$map2 <- renderLeaflet(
    leaflet() %>% addCircleMarkers(
    lng = runif(20),
    lat = runif(20),
    layerId = paste0("marker", 1:20)))
  
  observeEvent(input$map2_marker_click, {
    leafletProxy("map2", session) %>%
      removeMarker(input$map2_marker_click$id)
  })
  
  
}

shinyApp(ui, server)

Answer 1

The problem is caused by the duplicated wellPanel(textOutput("zip")) - just assign the result of your render function to two different outputs to avoid it:

library(tidyverse)
library(shiny)
library(leaflet)
library(shinydashboard)

ui <-  dashboardPage(
  
  
  dashboardHeader(title = 'Interactive Maps'),
  dashboardSidebar(
    sidebarMenu(
      menuItem("1st Map", tabName = "my_map1"),
      menuItem("2nd Map", tabName = "my_map2")
    )
  ),
  dashboardBody(
    
    ## Create tabs
    tabItems(
      
      # mapping
      tabItem('my_map1',
              fluidPage(
                
                # Application title
                titlePanel("Here is map 1"),
                
                # Top panel with county name
                verticalLayout(
                  # wellPanel(textOutput("zip")), # <- issue
                  wellPanel(textOutput("zip1")),

                  # the map itself
                  mainPanel(
                    leafletOutput("map1", width = 700, height = 700)
                  )
                )
              )
      ),
      tabItem("my_map2",
              fluidPage(
                
                # Application title
                titlePanel("Here is map 2"),
                
                # Top panel with county name
                verticalLayout(
                  # wellPanel(textOutput("zip")), # <- issue
                  wellPanel(textOutput("zip2")),
                  
                  # the map itself
                  mainPanel(
                    leafletOutput("map2", width = 700, height = 700)
                  )
                )
              )
      ) 
    ) 
  )  
)



server <- function(input, output, session) {
  
  output$map1 <- renderLeaflet(
    leaflet() %>% addCircleMarkers(
      lng = runif(10),
      lat = runif(10),
      layerId = paste0("marker", 1:10)))
  
  observeEvent(input$map1_marker_click, {
    leafletProxy("map1", session) %>%
      removeMarker(input$map1_marker_click$id)
  })
  
  output$map2 <- renderLeaflet(
    leaflet() %>% addCircleMarkers(
      lng = runif(20),
      lat = runif(20),
      layerId = paste0("marker", 1:20)))
  
  observeEvent(input$map2_marker_click, {
    leafletProxy("map2", session) %>%
      removeMarker(input$map2_marker_click$id)
  })
  
  output$zip2 <- output$zip1 <- renderText({"Something useful"})
  
}

shinyApp(ui, server)