css 将单张Map放入R中的“相框”中

4sup72z8 于 2022-12-15 发布在其他

关注(0)|答案(1)|浏览(99)

我目前正在开发一个R package，它允许用户制作他们的航班、公路旅行和他们访问的城市的定制纪念Map。
我正在试图弄清楚如何将自定义标题和框架添加到传单Map的过程中。
□ □ □我目前拥有的

library(leaflet)
library(htmltools)
library(htmlwidgets)

# Custom CSS
tag.map.title <-  tags$style(HTML("
  .leaflet-control.map-title { 
    transform: translate(-30%,850%);
    position: fixed !important;
    left: 50%;
    text-align: center;
    font-weight: bold;
    font-size: 60px;
    font-family: 'Brush Script MT'
  }
"))

# Adding a title
title <- tags$div(
  tag.map.title, HTML("New York, New York!")
)  

# Using my custom package
# devtools::install_github("benyamindsmith/mapBliss")
mapBliss::plot_city_view("New York City",
                         #mapBoxTemplate ="mapbox-template-link",
                         zoomControl = c(0.15, 0.05, 0.04, -0.003)) %>% 
  addControl(title, position = "topright", className="map-title")

∮我想要的∮
我想知道什么是CSS的要求，如果我想有这样的框架？理想情况下，他们将保持自己的立场时，调整大小也。
(For现在，忽略MapBox主题）

css

来源：https://stackoverflow.com/questions/74708437/putting-a-leaflet-map-in-a-picture-frame-in-r

1条答案

按热度按时间

ki0zmccv1#

如果map和title共享一个共同的父容器（例如<div>），您可以相对于它们的父容器定位它们。记住在子容器的CSS中设置position:relative。示例：

library(shiny)
library(leaflet)
ui <- fluidPage(
    ## see various ways of including CSS: https://shiny.rstudio.com/articles/css.html
    tags$head(
             tags$style(HTML("
                  #greetings{top:-8rem;
                   position:relative;
                   z-index:1000;
                   background-color:#f0f0f099;
                   }

                  .fancy_border{border:dotted 5em green}           
                  
      ")
      )
      ),

    div(class = 'fancy_border', ## set CSS class to style border
        div(leafletOutput('map')),
        div(id = 'greetings', uiOutput('message'))
        )
)
                                        
server <- function(input, output) {
    output$map <- renderLeaflet({
        leaflet() %>%
            addProviderTiles(providers$Stamen.TonerLite,
                             options = providerTileOptions(noWrap = TRUE)
                             ) %>%
            addMarkers(data = cbind(c(16, 17), c(46, 48)))
    })
    ## note that you can also add CSS classes here:
    output$message <- renderUI(h1('Hello from here', class='text-success'))

}
shinyApp(ui, server)

**编辑：**你可以通过设置一个class作为传单Map和标题的父DIV来设置“图片框架”的样式。或者让用户选择几个CSS类中的一个。或者，你可以从用户输入（颜色，宽度等）中组成一个CSS样式字符串（style="..."），然后重新设置renderUI。如果UI呈现的开销很大，您也可以选择set CSS classes/styles client-side。

赞(0）回复(0）举报 2022-12-15

我来回答

css 将单张Map放入R中的“相框”中

1条答案

相关问题

热门标签

最新问答