CODEWITHSUNDEEP
rgithubembedleaflet
Rhonda
Rhonda

Reputation: 1721

Embed leaflet map created by R into github

I am struggling to embed leaflet map created R into my github account

The file exported into single HTML file and I can view it on my computer

  1. When I upload and then open from github, it gives raw HTML code, not the interactive map

  2. And I'm not even sure how to embed this interactive map in ReadMe.md. When I place the link to the html and click it, I get the same raw map.

Help!

Update

I created follow-up question, If HTML doesn't work well in github, how can some people make it work

Upvotes: 1

Views: 2241

Answers (2)

dieghernan
dieghernan

Reputation: 3402

Just in case anyone is still looking for a solution, I wrote a post explaning how to do it, assuming that you use Jekyll to build your website hosted on GitHub.

https://dieghernan.github.io/201905_Leaflet_R_Jekyll/

In short,you have to perform several steps:

On GitHub/Jekyll

  1. Identify the code you need to include. I already did it for you See on my GitHub

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

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

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

Upvotes: 0

jeremycg
jeremycg

Reputation: 24945

You can prepend http://htmlpreview.github.io/? to the url of where you put the html file. In your case:

http://htmlpreview.github.io/?https://github.com/Sonihal/yorbalinda_interactive_map/blob/master/web_Yorba_Linda.html

Upvotes: 2

Related Questions