将Leaflet地图纳入R

时间:2016-03-13 18:04:45

标签: r leaflet r-markdown reveal.js

我试图将带有图块的Leaflet地图添加到在R中创建的revealjs_presentation。此地图以ioslide或html格式呈现,但不是以revealjs_presentation格式呈现(主要问题:所有字体都太大而且选中时,地图在多边形边界周围有奇怪的瑕疵。因为地图在其他输出格式中运行良好,我怀疑这个问题与revealjs_presentation和leaflet之间的某种CSS不兼容性有关。

为了隔离这两组代码,我使用htmlwidgets保存了传单映射。这个地图看起来不错,但似乎没有办法在演示文稿中使用例如iframe嵌入这个本地html文件。因为我不是CSS专家,所以我很欣赏任何关于如何解决这个问题的指导。如果有人制作了一个带有弹出窗口的交互式传单地图,这些弹出窗口在R I中以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")

1 个答案:

答案 0 :(得分:3)

正如您已经猜到的,您可以通过包含一些自定义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 
---

现在您的字体大小合适。

P.S。我怎么知道使用“.leaflet-popup-content”和“.leaflet-control”CSS选择器?通过右键单击地图的相关元素 - 即在Chrome浏览器中以HTML格式呈现 - 然后选择“检查”。