在R中的revealjs演示文稿中嵌入Leaflet地图

Question

我正在尝试将一个带有瓷砖的Leaflet地图添加到R创建的revealjs_presentation中。这个地图在ioslide或html格式中呈现良好，但在revealjs_presentation格式中却存在问题（主要问题：所有字体都太大了，在选择时地图周围会出现奇怪的多边形边界伪影）。由于该地图在其他输出格式中运行良好，我怀疑问题与revealjs_presentation和leaflet之间的某种CSS不兼容性有关。

为了隔离两组代码，我使用htmlwidgets保存了leaflet地图。这张地图看起来很好，但似乎没有办法使用iframe将此本地html文件嵌入演示文稿中。由于我不是CSS专家，我希望能得到任何关于如何解决这个问题的指导。如果有人已经在R中制作了正确呈现在revealjs_presentation格式中的带有弹出窗口的交互式leaflet地图，我将非常感激能看到其中的一部分代码。对于值得一提的是，leaflet地图代码如下：

leaflet(x) %>% 
addPolygons(popup = popup, weight = 0.7, fillColor = ~pal(quintf), 
          color = 'white', fillOpacity = 1, opacity = 1, 
          smoothFactor = 0.8) %>%

addLegend(pal = pal, values = x$quintf, title = "CXI Activity", 
        position = 'bottom right')

这个文件保存正确（如下面的代码），但是在iframe中引用它会破坏编织的html文件的自包含性。

saveWidget(m, file="map.html")

- Derek Darves

Answer 1

正如您已经猜到的那样，您可以通过包含一些自定义CSS来解决字体过大的问题。假设您想要修复任何弹出窗口和地图图例的字体。首先，打开一个新的文本文件并添加以下内容：

.reveal section .leaflet-popup-content {
    font: 20px;
}

.reveal section .leaflet-control {
  font: 24px;
}

根据需要调整相对字体大小。将文件保存为leafletfont.css（或其他您想要的名称），并放在与您的RMarkdown文件相同的目录中。

现在，您只需要在演示文稿的front-matter中添加对新CSS文件的调用即可：

---
title: "Habits"
author: John Doe
date: March 22, 2005
output: 
  revealjs::revealjs_presentation
  css: leafletfont.css 
---

您的字体现在应该已经适当大小了。

P.S. 我如何知道要使用“.leaflet-popup-content”和“.leaflet-control” CSS选择器？通过在地图相关元素上右键单击——也就是一旦它在我的Chrome浏览器中以HTML呈现出来——并选择“检查”。

- Grant