将宣传单地图合并到R中的revealjs演示文稿中

我试图在tile中添加一个Leaflet地图到revealjs_presentation中。这张地图在ioslide或者html格式中表现得很好，但是在revealjs_presentation格式中没有表现出来（主要问题：所有字体太大，地图有奇怪的工件在选择时围绕多边形边界）。 由于地图在其他输出格式中运行良好，我怀疑这个问题与revealjs_presentation和leaflet之间的某种CSS不兼容有关。

为了隔离两组代码，我使用htmlwidgets保存了传单地图。 这张地图看起来不错，但似乎没有办法在演示文稿中使用例如iframe嵌入此本地html文件。 由于我不是CSS专家，因此我非常感谢有关如何对此进行排序的指导。 如果有人制作了一个交互式传单映射，其中包含弹出窗口，它可以在R中以revealjs_presentation格式正确呈现，所以我很高兴看到该代码的某些部分。 对于它的价值，小册子地图代码是：

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")

---

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

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

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

根据需要调整相对字体大小。 将文件另存为leafletfont.css（或任何您想调用它的文件）与您的RMarkdown文件位于同一目录中。

您现在需要做的就是在演示文稿的前面添加一个对新CSS文件的调用：

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

现在你的字体大小应该适当。

PS我怎么知道使用“.leaflet-popup-content”和“.leaflet-control”CSS选择器？ 通过右键单击地图的相关元素（即，一次在我的Chrome浏览器中以HTML格式呈现）并选择“检查”。

链接地址: http://www.djcxy.com/p/32771.html

上一篇: Incorporate Leaflet map in revealjs presentation within R

下一篇: (Console) Output?