传单地图作为流体行背后的背景答案

【问题标题】：Leaflet map as background behind fluidRows传单地图作为流体行背后的背景
【发布时间】：2021-12-18 02:42:48
【问题描述】：

我正在开发一个由两个 fluidRows 组成的 R Shiny 应用程序，其中包含一些内容。其中一个包含跨越一些列的传单地图。到目前为止，一切都很好。现在，想法是将背景中的地图扩展到其他列以及上方的fluidRow。最后，整个网站都可以看到地图：columns 不透明，另一个columns 和上面的fluidRow 半透明。

这是该应用目前的样子：

这是我理想中的样子：

这是应用程序的代码：

library(leaflet)
library(shiny)
library(shinythemes)


ui <- navbarPage(
  title = "The app",
  tabPanel("Reproducible examples are great :)",
           fluidPage(
             fluidRow(
               column(2,
                      selectInput("city", "Select city:",
                                  c("Beirut", "Cairo", "Bagdad"),
                                  selected = "Beirut"
                      ),
                      actionButton("start", "Start",
                                   style = "color: black;
                                           background-color: #ffcc00;")
                      ),
               column(5,
                      "Content is here ...",
                      br(),
                      sliderInput("slider1", "",
                                  min = 1,
                                  max = 100,
                                  value = 30,
                                  ticks = TRUE)
                     ),
               column(5,
                      "... and there and ...",
                      br(),
                      sliderInput("slider2", "",
                                  min = 1,
                                  max = 100,
                                  value = 30,
                                  ticks = TRUE)
                      ),
             ),
             fluidRow(
               column(7,
                      leafletOutput("map",
                                    height = "67vh"
                      )
               ),
               column(5,
                      "... also here ...",
                      br(),
                      sliderInput("slider3", "",
                                  min = 1,
                                  max = 500,
                                  value = 30,
                                  ticks = TRUE),
                      "... and even down there",
                      br(),
                      sliderInput("slider4", "",
                                  min = 1,
                                  max = 500,
                                  value = 30,
                                  ticks = TRUE)
                     )
             )
           )
           ),
  theme = shinytheme("cosmo")
  )

server <- function(input, output) {
  output$map <- renderLeaflet({
    leaflet(data = NULL,
            options = leafletOptions(zoomControl = FALSE,
                                     dragging = TRUE)) |>
      addTiles(
        options = providerTileOptions(noWrap = TRUE)) |>
      setView(lng = 35.5051, lat = 33.889, zoom = 14) |>
      addScaleBar(position = "bottomleft")
  })
  }

shinyApp(ui, server)

我试图在网上寻找解决方案，但失败了，甚至没有找到真正的灵感:(所以，如果你们中的任何人知道解决方案或提示，我就更加好奇了！提前谢谢你:)

【问题讨论】：

标签： r shiny leaflet

【解决方案1】：

tada :)

library(leaflet)
library(shiny)
library(shinythemes)


ui <- navbarPage(
    title = "The app",
    tabPanel("Reproducible examples are great :)",
             div(
                 absolutePanel(
                     top = "50px", left = 0, right = 0, height = "125px",
                     style = "opacity: 0.6; background-color: white; z-index: 1",
                     column(2, 
                            selectInput("city", "Select city:",
                                        c("Beirut", "Cairo", "Bagdad"),
                                        selected = "Beirut"
                            ),
                            actionButton("start", "Start",
                                         style = "color: black;
                                           background-color: #ffcc00;")
                     ),
                     column(5,
                            "Content is here ...",
                            br(),
                            sliderInput("slider1", "",
                                        min = 1,
                                        max = 100,
                                        value = 30,
                                        ticks = TRUE)
                     ),
                     column(5,
                            "... and there and ...",
                            br(),
                            sliderInput("slider2", "",
                                        min = 1,
                                        max = 100,
                                        value = 30,
                                        ticks = TRUE)
                     )
                 ),
                 absolutePanel(
                     top = "50px", left = 0, right = 0, bottom = 0,
                     fixed = TRUE, cursor = "default",
                     style = "z-index: 0",
                     leafletOutput("map", height = "calc(100vh - 50px)")
                 ),
                 absolutePanel(
                     right = 0, top = "175px", width = "40vw",
                     "... also here ...",
                     style = "opacity: 0.6; background-color: white; height: calc(100vh - 175px);",
                     br(),
                     sliderInput("slider3", "",
                                 min = 1,
                                 max = 500,
                                 value = 30,
                                 ticks = TRUE),
                     "... and even down there",
                     br(),
                     sliderInput("slider4", "",
                                 min = 1,
                                 max = 500,
                                 value = 30,
                                 ticks = TRUE)
                 )
             )
    ),
    theme = shinytheme("cosmo")
)

server <- function(input, output) {
    output$map <- renderLeaflet({
        leaflet(data = NULL,
                options = leafletOptions(zoomControl = FALSE,
                                         dragging = TRUE)) |>
            addTiles(
                options = providerTileOptions(noWrap = TRUE)) |>
            setView(lng = 35.5051, lat = 33.889, zoom = 14) |>
            addScaleBar(position = "bottomleft")
    })
}

shinyApp(ui, server)

在较小的屏幕上响应：

library(leaflet)
library(shiny)
library(shinythemes)


ui <- navbarPage(
    title = "The app",
    tabPanel("Reproducible examples are great :)",
             div(
                 style = "margin-top: -70px;",
                 tags$style(
                     '
                     .top-panel {
                        position: relative;
                        width: 50%;
                        display: inline-block;
                        margin-top: 52px;
                     }
                     .right-panel {
                        position: relative;
                        width: 50%;
                        display: inline-block;
                        margin-top: 52px;
                        margin-left: -3px;
                        vertical-align: top;
                     }
                     .panels {
                        opacity: 0.6; 
                        background-color: white;
                        z-index: 1;
                     }
                     .panel-map {
                        position: absolute;
                        top: 50px;
                        left: 0;
                        right: 0; 
                        bottom: 0;
                        z-index: 0;
                     }
                    @media (min-width: 750px) {
                        .top-panel {
                            position: absolute;
                            top: 0px;
                            left: 0;
                            right: 0;
                            height: 125px;
                            width: 100%
                        }
                         .right-panel {
                            position: absolute;
                            top: 125px;
                            right: 0;
                            width: 40vw;
                            height: calc(100vh - 175px);
                            z-index: 1
                         }
                    }
                    '
                 ),
                 div(
                     class = "top-panel panels",
                     column(2, 
                            selectInput("city", "Select city:",
                                        c("Beirut", "Cairo", "Bagdad"),
                                        selected = "Beirut"
                            ),
                            actionButton("start", "Start",
                                         style = "color: black;
                                           background-color: #ffcc00;")
                     ),
                     column(5,
                            "Content is here ...",
                            br(),
                            sliderInput("slider1", "",
                                        min = 1,
                                        max = 100,
                                        value = 30,
                                        ticks = TRUE)
                     ),
                     column(5,
                            "... and there and ...",
                            br(),
                            sliderInput("slider2", "",
                                        min = 1,
                                        max = 100,
                                        value = 30,
                                        ticks = TRUE)
                     )
                 ),
                 div(
                     class = "panel-map",
                     top = "50px", left = 0, right = 0, bottom = 0,
                     fixed = TRUE, cursor = "default",
                     style = "z-index: 0",
                     leafletOutput("map", height = "calc(100vh - 50px)")
                 ),
                 div(
                     "... also here ...",
                     class = "right-panel panels",
                     br(),
                     sliderInput("slider3", "",
                                 min = 1,
                                 max = 500,
                                 value = 30,
                                 ticks = TRUE),
                     "... and even down there",
                     br(),
                     sliderInput("slider4", "",
                                 min = 1,
                                 max = 500,
                                 value = 30,
                                 ticks = TRUE)
                 )
             )
    ),
    theme = shinytheme("cosmo")
)

server <- function(input, output) {
    output$map <- renderLeaflet({
        leaflet(data = NULL,
                options = leafletOptions(zoomControl = FALSE,
                                         dragging = TRUE)) |>
            addTiles(
                options = providerTileOptions(noWrap = TRUE)) |>
            setView(lng = 35.5051, lat = 33.889, zoom = 14) |>
            addScaleBar(position = "bottomleft")
    })
}

shinyApp(ui, server)

细节太多，需要学习一些CSS。我不会解释所有这些。这里的关键是 @media 查询，一旦屏幕尺寸达到/低于某些值，它就会在内部使用不同的 CSS 集。

小屏时：

【讨论】：

确实是多田！谢谢，真的很棒！ :) 唯一的一点是，我应该强调一点，该应用程序也需要在较小的显示器上运行（因此是 fluidRows）。对不起，如果我在这里不具体......使用当前的解决方案，面板在智能手机上重叠。您是否也看到了扩展到响应式版本的可能性？
@bathyscapher 查看我的更新
你是最棒的！太感谢了！ :) 我确实需要学习 CSS（实际上才刚刚开始 :)）。