使用闪亮的仪表板在我的传单地图上的透明框

Question

我正在开发一个Shiny App，该应用程序使用每个圆的特定经度和纬度来生成带有多个热圈的地图。我想创建一个包含多个输入的过滤器框并将其放置在地图上（而不是在地图的旁边，上方或下方），并且我还希望该框在用户不使用时变得透明（低不透明度）。使用此闪亮的应用程序可以解决此完全相同的问题的示例：https://shiny.rstudio.com/gallery/superzip-example.html

考虑到我正在使用Shinydashboard元素，但示例并非如此。到目前为止，我还无法按照我需要的方式修改它所呈现的css样式对象。

这是可复制的和平代码：

### User Interface ----
ui <- dashboardPage(
 dashboardHeader(title = "Delitos"),
 dashboardSidebar(
   sidebarMenu(
     menuItem("Mapa", tabName = "mapa", icon = icon("th"))
   )
 ),
 dashboardBody(
   tabItems(

     tabItem(tabName = "mapa",
             fluidRow(
               useShinyjs(),
               tabBox(
                 id = "tabset_mapa",
                 selected = 1,
                 width = "100%",
                 tabPanel("Mapa",

                          leafletOutput("mapa1", width = "100%",
                                               height = 565), value = 1,

                          selectInput(inputId = "tentativa_mapa",
                                      label= "Tentativa", 
                                      choices = c("Todos","Sí", "No")),

                          selectInput(inputId = "tipo_delito_mapa",
                                      label= "Presunto delito", 
                                      choices = c("assault", "robbery", "murder 1st grd", "racism")),
                          selectInput(inputId = "periodo_tipo_mapa",
                                      label= "Periodo", 
                                      choices = c("Anual", "Trimestral", "Mensual")),

                          selectInput(inputId = "provincia_mapa",
                                      label= "Nivel", 
                                      choices = c("National", "By province", "By city")),

                          downloadButton('downloadPlot_mapa','Descargar mapa'),

                          downloadButton('downloadTab_mapa','Descargar tabla')),

                 tabPanel("Tabla", tableOutput("datos_mapa"), value = 2)
               )
          )
      )
    )
)
)

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

 provinces_example<-read.table(text="province  latitude    longitude   commited_crimes
               'AZUAY' -2.977837402    -79.59862563    40
               'BOLIVAR'   -1.608160425    -79.21881726    80
               'CAÑAR' -2.62647275 -78.74661345    120
               'CARCHI'    0.497518667 -77.93454964    160
               'CHIMBORAZO'    -2.295557587    -78.74180743    180
               'COTOPAXI'  -0.689132059    -79.07517499    200
               'EL ORO'    -3.599779139    -80.08944846    40
               'ESMERALDAS'    0.788046309 -79.85938815    80
               'GALAPAGOS' -0.864657102    -91.18846265    120
               'GUAYAS'    -1.946949383    -79.54741946    160
               'IMBABURA'  0.325942394 -78.21791368    180
               'LOJA'  -4.337267466    -79.60400106    200
               'LOS RIOS'  -1.681021544    -79.66105689    40
               'MANABI'    -0.90954183 -80.03392081    80
               'MORONA SANTIAGO'   -3.364821478    -78.6528047 120
               'NAPO'  -0.732803451    -77.72780304    160
               'ORELLANA'  -0.949617383    -75.88180184    180
               'PASTAZA'   -1.267547808    -77.24877698    200
               'PICHINCHA' -0.004023516    -78.07462989    40
               'SANTA ELENA'   -2.234427504    -80.89511306    80
               'SANTO DOMINGO DE LOS TSACHILAS'    -0.042338801    -79.37282164    120
               'SUCUMBIOS' 0.145724565 -77.23283688    160
               'TUNGURAHUA'    -1.278333208    -78.74968472    180
               'ZAMORA CHINCHIPE'  -3.935345655    -78.74906701    200",h=T,strin=F)

 observeEvent(input$periodo_tipo_mapa, {
   if (req(input$periodo_tipo_mapa)=="Anual") {
     shinyjs::show("periodo_input_mapa")
     shinyjs::hide("periodo_input_mapa_t")
     shinyjs::hide("periodo_input_mapa_m")
   } else if (req(input$periodo_tipo_st)=="Trimestral") {
     shinyjs::hide("periodo_input_mapa")
     shinyjs::show("periodo_input_mapa_t")
     shinyjs::hide("periodo_input_mapa_m")
   } else if (req(input$periodo_tipo_st)=="Mensual") {
     shinyjs::hide("periodo_input_mapa")
     shinyjs::hide("periodo_input_mapa_t")
     shinyjs::show("periodo_input_mapa_m")
   }
 })

 observeEvent(input$tabset_mapa, {
   if (req(input$tabset_mapa)==1) {
     shinyjs::show("downloadPlot_mapa")
     shinyjs::hide("downloadTab_mapa")
   } else {
     shinyjs::show("downloadTab_mapa")
     shinyjs::hide("downloadPlot_mapa")
   }
 })

###MAPA----

canton_popup <- paste0("<strong>Provincia: </strong>", 
                        provinces_example$province,
                        "<br><strong>Número de denuncias: </strong>", 
                        formatC(provinces_example$commited_crimes, format="f", big.mark = ".",decimal.mark = ",", digits=0))

 output$mapa1 <- renderLeaflet({
   leaflet(provinces_example, options = leafletOptions(minZoom = 0, maxZoom = 14))%>%
     setView(lng = -80.0123274, lat = -2.3201641, zoom = 7)%>%
     addProviderTiles("CartoDB.Positron")%>%
     setMaxBounds(lng1 = -96, lat1 = 4,lng2 = -70, lat2 = -10)%>%
     addTiles()%>% addMarkers( lng = provinces_example$longitude,
                               lat = provinces_example$latitude, 
                                     popup = canton_popup) %>%
     addMiniMap(centerFixed = c(-0.4,-90.5), zoomLevelFixed = 6, toggleDisplay = TRUE)
 })
}
shinyApp(ui, server)

Answer 1

强烈建议您在相应的github上查看该应用的代码

在他们拥有的tabPanel内部

div(class="outer",

  tags$head(
    # Include our custom CSS
    includeCSS("styles.css"))

他们在哪里调用.CSS，我看不到您在代码中调用.css文件