将Leaflet映射合并到R中的manifest.js演示文稿中 [英] Incorporate Leaflet map in revealjs presentation within R

问题描述

我正在尝试将带有磁贴的Leaflet地图添加到在R中创建的Revealjs_presentation中.此地图可以以ioslide或html格式很好地呈现，但不能采用Revealjs_presentation格式呈现(主要问题:所有字体都太大了，并且该地图选中时，在多边形边界周围有奇异的伪像).因为地图可以在其他输出格式下很好地工作，所以我怀疑问题与Revealjs_presentation和Leaflet之间的某种CSS不兼容有关.

I'm trying to add a Leaflet map with tiles to a revealjs_presentation created in R. This map renders fine in ioslide or html format, but not in the revealjs_presentation format (main problems: all fonts are much too large and the map has strange artifacts around polygon boundaries when selected). Because the map works well in other output formats I suspect the issue has to do with some kind of CSS incompatability between revealjs_presentation and leaflet.

为了隔离两组代码，我使用htmlwidgets保存了传单地图.该地图看起来不错，但是似乎无法使用例如iframe将本地html文件嵌入到演示文稿中.由于我不是CSS专家，所以我希望您能获得有关如何解决此问题的任何指导.如果有人用R生成了带有弹出窗口的交互式传单地图，并且该地图正确显示了Reveals_presentation格式，那么我将不胜感激看到该代码的某些部分.就其价值而言，传单地图代码为:

In order to isolate the two sets of code I saved the leaflet map using htmlwidgets. This map looks fine but it seems that there is no way to then embed this local html file within the presentation using, e.g., an iframe. As I'm not a CSS expert I'd appreciate any guidance on how to sort this out. If someone has produced an interactive leaflet map with popups that renders correctly in revealjs_presentation format within R I'd be grateful to see some part of that code. For what it's worth, the leaflet map code is:

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文件的自包含特性.

This file saves correctly (e.g. the code below) but referencing it in an iframe breaks the self-contained nature of the knitted html file.

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

推荐答案

您已经猜到，可以通过添加一些自定义CSS来解决字体过大的问题.假设您要修复所有弹出窗口和地图图例的字体.首先，打开一个新的文本文件并添加以下内容:

As you have already guessed, you can fix the oversized font problem by including a bit of custom CSS. Let's say you want to fix the font for any pop-ups and the map legend. First, open up a new text file and add the following:

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

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

根据需要调整相对字体大小.将文件另存为RMarkdown文件所在目录中的leafletfont.css(或任何您想调用的文件).

Adjust the relative font size as needed. Save the file as leafletfont.css (or whatever you want to call it) within the same directory as your RMarkdown file.

您现在要做的就是在演示文稿的开头添加对新CSS文件的调用:

All you need to do now is add a call to the new CSS file in the front-matter of your presentation:

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

您的字体现在应调整大小.

Your fonts should now be appropriately sized.

P.S.我怎么知道使用".leaflet-popup-content"和".leaflet-control" CSS选择器?右键单击地图的相关元素-即在我的Chrome浏览器中将其渲染为HTML之后，然后选择检查".

P.S. How did I know to use the ".leaflet-popup-content" and ".leaflet-control" CSS selectors? By right-clicking on the relevant elements of the map -- i.e. once it was rendered in HTML in my Chrome browser -- and choosing "Inspect".

这篇关于将Leaflet映射合并到R中的manifest.js演示文稿中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！