Leaflet map tiles not visible in reveal.js presentation within R?

Question

Intro:

I am trying to embed a leaflet map into a revealjs presentation within an RMarkdown file. My example below is pretty close, but it is (1) missing tiles, (2) the popups are not displaying, and (3) the legend and font are way too big!

I am not too concerned with how the code blocks look at the moment. I'm planning on using the results = "hide" slide option for my final product.

Thanks in advance!

Reproducible Example:

---
title: "My Presentation"
author: Me
date: 2017-06-23
output:
    revealjs::revealjs_presentation:
        theme: black

---

## Loading in necessary packages:
```{r}
library(dplyr)
library(sp)
library(rgdal)
library(rgeos)
library(RColorBrewer)
library(classInt)
library(leaflet)
library(htmlwidgets)
```

## Defining our data:
```{r}
lat <- c(45.51158000, 45.50431159, 45.496539)
lon <- c(-122.548056, -122.54775, -122.54788)
no2 <- c(17.37, 25.61, 24.69)

dta <- data.frame(lat, lon, no2)
colnames(dta) <- c("lat","lon","no2")
```

## Create layer of spatial points:
```{r}
points <- SpatialPointsDataFrame(data.frame(x=dta$lon, y=dta$lat), data = data.frame(dta$no2))

plotclr <- (brewer.pal(7, "RdYlGn"))
class <- classIntervals(dta$no2, n = 7, style = "fixed", fixedBreaks = c(0,5,10,15,20,25,30))
colcode <- findColours(class, rev(plotclr))
plot(points, col=colcode, pch=19)

pop1<-paste0("<b>NO2:</b> ", dta$no2, " ppb", 
         "<br /> <b>Lat:</b> ", dta$lat, 
         "<br /> <b>Lon:</b> ", dta$lon) 
```

## Creating the leaflet map:
```{r}
no2_map <-leaflet()%>%
  addTiles('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png') %>%
  addCircleMarkers(data=points, color = "black", radius = dta$no2, fillColor = colcode, fillOpacity=0.7, weight=1, popup=pop1) %>%
  addLegend(position = "bottomright", colors = rev(plotclr), labels = rev(c("30","25","20","15","10","5","0")), opacity = 0.9, title = "NO2 (ppb)")
```

---
```{r}
no2_map

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

```

score 1 · Accepted Answer · answered Jun 23 '17 at 22:05

1

Unfortunately, reveal.js and Leaflet don't play very well together, and the slide with your maps might be missing layers. This is due to Leaflet not being able to discern the size of the DOM element which serves as the container of the map, because reveal.js resizes all elements dinamically.

The easiest workaround is to just refresh the page when you're in a slide with a Leaflet map. You can also try a deferred call to map.invalidateSize() (by using setTimeout() in plain Javascript)

answered Jun 23 '17 at 22:05

IvanSanchez

18,272
3
30
45

I've seen it done well before [here](http://www.jacksonvoelkel.com/presentations/sar/GIA.html#/section-65). But have no experience in Javascript. If there's no clear way to get the map looking right, then I may abandon this approach for something easier. – philiporlando Jun 24 '17 at 02:18
2

As a note for others looking at the last comment: the presentation linked actually used an iframe to embed the respective map. So no direct leaflet-map inside reveal presentations it seems. – Sirko May 20 '18 at 13:22

Leaflet map tiles not visible in reveal.js presentation within R?

1 Answers1