Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Incorporate Leaflet map in revealjs presentation within R

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.

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

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")
like image 389
Derek Darves Avatar asked Mar 13 '16 18:03

Derek Darves


People also ask

How do I add leaflets to my reveal page?

Just add them to your reveal.js HTML file. I added the leaflet.css stylesheet to load after reveal.css and the theme stylesheet, etc.

How to create a reveal presentation in R with Rmarkdown?

Luckily, there’s an R package that allows you to create your Reveal.js presentation from RStudio using RMarkdown syntax. Before you can start, you need to install a couple packages. The revealjs package is the one used for the presentation, whereas plotly is used for the interactive graphs. Make sure you also load the packages once installed.

What is the difference between revealjs and plotly in R?

The revealjs package is the one used for the presentation, whereas plotly is used for the interactive graphs. Make sure you also load the packages once installed. ( Note: I’m assuming you have already installed RMarkdown ).

Is there a way to embed a map in a reveal?

EDIT #2: A better solution, it seems, is to use Polymaps instead of Leaflet.js. It seems that several Polymaps maps can be embedded into a reveal.js presentaion. No issues.


1 Answers

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;
}

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.

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

like image 149
Grant Avatar answered Nov 15 '22 06:11

Grant