リーフレットマップタイルはR内のreveal.jsプレゼンテーションに表示されません。

Question

イントロ：

私はRMarkdownファイル内revealjsプレゼンテーションにリーフレットマップを埋め込むしようとしています。下の例はかなり近いですが、（1）タイルがない、（2）ポップアップが表示されていない、（3）伝説とフォントが大きすぎます！

私はあまりにもコードブロックが現時点でどのように見えるのか心配していません。最終製品にresults = "hide"スライドオプションを使用する予定です。

ありがとうございます！

再現例：

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

``` 

Answer 1

残念ながら、reveal.jsとリーフレットが一緒に非常によくプレーしていない、とあなたのマップとのスライドは層が欠落している可能性があります。これは、リーフレットが、マップのコンテナとして機能するDOM要素のサイズを識別できないためです.eleal.jsはすべての要素を動的にサイズ変更するためです。

最も簡単な回避策は、リーフレットマップがあるスライドにいるときにページを更新することです。 map.invalidateSize()への延期を試すこともできます（平易なJavaScriptでsetTimeout()を使用して）