Incorporate Leaflet map in revealjs presentation within R

Question

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

Answer 1

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