在 R 中修改传单弹出窗口答案

【问题标题】：Modifying Leaflet Popups in R在 R 中修改传单弹出窗口
【发布时间】：2018-06-22 06:34:20
【问题描述】：

我想修改 R 中传单弹出窗口的外观。

帮助文件指出popupOptions() 函数中的... 采用 “传递给底层 Javascript 对象构造函数的额外选项。”

在this example 中，style 选项设置为修改标记外观的 CSS 参数列表：

  addMarkers(
    lng = -118.456554, lat = 34.075,
    label = "Label w/ custom CSS style",
    labelOptions = labelOptions(noHide = T, direction = "bottom",
      style = list(
        "color" = "red",
        "font-family" = "serif",
        "font-style" = "italic",
        "box-shadow" = "3px 3px rgba(0,0,0,0.25)",
        "font-size" = "12px",
        "border-color" = "rgba(0,0,0,0.5)"
      )))

但是，同样的方法似乎不适用于弹出窗口，正如这个最小的工作示例所示：

if (!require("pacman")) install.packages("pacman")
pacman::p_load(leaflet, eurostat, dplyr)

map <- get_eurostat_geospatial() %>% subset(., .$NUTS_ID == "AT11")

leaflet() %>%

  addPolygons(data = map , 
              group = map$NUTS_ID,
              fillColor = "grey",
              weight = 1,
              color = "black") %>%

  addPopups(lng = 16.3, lat = 47, popup = "Paint it black!",
            options = popupOptions(closeButton = FALSE,
                                   opacity = 0.5,
                                   style = list("background" = "black",
                                                "padding" = "2px",
                                                "border-radius" = "0px")))

一些网页使用 javascript 版本的 Leaflet（例如 here）解释了使用 CSS 自定义标签。关键似乎是编辑.leaflet-popup-tip 和.leaflet-popup-content-wrapper。但是我如何在R 中做到这一点（不使用 Shiny）？

相关：this 问题，但它只解决了弹出窗口中的修改元素，而不是弹出窗口本身。

我欢迎任何建议。

【问题讨论】：

标签： css r leaflet r-leaflet

【解决方案1】：

也许你可以使用包htmltools 来获得你想要的东西。

map2 <- leaflet() %>%
    addPolygons(data = map , 
                group = map$NUTS_ID,
                fillColor = "grey",
                weight = 1,
                color = "black") %>%
    addPopups(lng = 16.3, lat = 47, popup = "Paint it black!")

library(htmltools)
browsable(
  tagList(list(
    tags$head(
      tags$style(
        ".leaflet-popup-content-wrapper {
    background: black;
    color: #ffffff;
    padding: 2px;
border-radius: 0px;
    }
        "
      )
    ),
    map2
  ))
)

【讨论】：