Embedding a R - Leaflet map on a jekyll site hosted on Github - r

Question

I have a website here hosted on Github Pages using Beautiful Jekyll. See here for the actual code behind the blog on Github.
I'd like to embed a leaflet map into one of my blog posts. I am using the R package leaflet.
So say for example I make a map:
library(htmlwidgets)
library(leaflet)
m <- leaflet() %>% #basic map
addTiles() %>%
How do I embed this on my page? One thing I tried to do is save the html file using:
saveWidget(widget = m, file="your_map.html", selfcontained = FALSE)
This works and saves the html file locally. I tried copying and pasting the html code into one of _posts on Github but that didn't work.
Any suggestions?

Answer 1

You can have a look at how they are doing this for the official R leaflet page at their github page (the one for the website, not for the leaflet-code).
I don't see on your site that you are using R-markdown to create your markdown pages. It is really worth a try! Have a look at yihui's jekyll example. Basically you use knitr to generate your pages. This means you write markdown and are able to embed your R-Code into the markdown page. Like for example:
```{r}
plot(runif(10))
```
The same you can do with leaflet:
```{r}
library(leaflet)
leaflet() %>% addTiles() %>% setView(10, 51, zoom = 8)
```
htmlwidgets should be automatically loaded by knitr.
For example you can have a look how the basemap page for the R leaflet page is done in R-markdown.
One important thing if you include leaflet maps in your page is though to include all the scripts in the page head. On my page I inserted it in the head.html in the _includes folder.
I had to add the following:
{% if page.maps %}
<script src="/assets/jquery-1.11.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="/assets/bootstrap-3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="/assets/bootstrap-3.3.1/js/bootstrap.min.js"></script>
<script src="/assets/bootstrap-3.3.1/shim/html5shiv.min.js"></script>
<script src="/assets/bootstrap-3.3.1/shim/respond.min.js"></script>
<script src="/assets/htmlwidgets-0.5/htmlwidgets.js"></script>
<link href="/assets/leaflet-0.7.3/leaflet.css" rel="stylesheet" />
<script src="/assets/leaflet-0.7.3/leaflet.js"></script>
<link href="/assets/leafletfix-1.0.0/leafletfix.css" rel="stylesheet" />
<script src="/assets/leaflet-binding-1.0.1/leaflet.js"></script>
{% endif %}
I added an option maps: true into the front matter of pages with maps so that the part {% if page.maps %} makes sure that all this code is only loaded for pages that need it.
I copied all the scripts from a folder that was created by knitr when I compiled the R-markdown page without jekyll. Therefore I had to set
output:
html_document:
self_contained: no
in the front matter (otherwise the code is embedded in the page and can't be copied so easily).
The team behind R leaflet include the libs in their index.html like this:
<script src="libs/jquery/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="libs/bootstrap/css/flatly.min.css" rel="stylesheet" />
<script src="libs/bootstrap/js/bootstrap.min.js"></script>
<script src="libs/bootstrap/shim/html5shiv.min.js"></script>
<script src="libs/bootstrap/shim/respond.min.js"></script>
<script src="libs/htmlwidgets/htmlwidgets.js"></script>
<link href="libs/leaflet/leaflet.css" rel="stylesheet" />
<script src="libs/leaflet/leaflet.js"></script>
<link href="libs/leafletfix/leafletfix.css" rel="stylesheet" />
<script src="libs/leaflet-binding/leaflet.js"></script>
You can copy the libs from their libs folder.
I see on your page that you already got it to work with a different method. I just wanted to include this because I was just working on the same topic...

Answer 2

Based on #nnn answer I put together a tutorial for doing so:
FULL TUTORIAL ON THIS LINK
In short:
On GitHub/Jekyll
Identify the code you need to include. I already did it for you See on my GitHub
Copy/paste it in the code that builds your <head>. This would depend on your Jekyll implementation. After doing that, the needed libraries would be loaded every time that Jekyll builds the website.
On Rstudio
Create a map with leaflet and knit it to a github_document. It is important to knit it using always_allow_html: yes in the front matter.
On Markdown
Check that every leafletmap has produced an html code in the .mdfile. Something like this:
<!--html_preserve-->
<script type="application/json" data-for="htmlwidget-SOMEIDNUMBER">
{"x":{"options": ...
<!--more funky code here-->
Paste this chunk before the <script> part:
<div id="htmlwidget-SOMEIDNUMBER" style="width:100%;height:216px;" class="leaflet html-widget"></div>
So you got something like this for each leaflet map:
<!--html_preserve-->
<div id="htmlwidget-SOMEIDNUMBER" style="width:100%;height:216px;" class="leaflet html- widget"></div>
<script type="application/json" data-for="htmlwidget-SOMEIDNUMBER">
{"x":{"options": ...
<!--more funky code here-->
Now publish it on GitHub. Now when Jekyll builds your blog/web hosted on GitHub the libraries are loaded and the leaflet map displays correctly. Note that on local or markdown the map is still not visible.
Once that you have done it a couple of times you will see that is basicaly copy/paste/modify the chunk that I presented on step 5.

Answer 3

I found a solution here https://jayrobwilliams.com/posts/2020/09/jekyll-html
Store the output from the saveWidget in your website directory.
wrap the relative path in an iframe and style as you please.
<iframe src="/interactiveDocs/map.html" height="600px" width="100%" style="border:none;"></iframe>
It has worked well for my purposes