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
When I upload and then open from github, it gives raw HTML code, not the interactive map
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
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
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
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.
Related
Has anyone any suggestions on how to embed or host Jupyter notebooks, or Jupyter notebooks saved as .html, on 11ty websites?
I've tried downloading notebooks as .html, storing them in ./src/_includes/ and trying to embed them in a markdown page like this:
{% include "notebook.html" %}
Unfortunately, it publishes as raw code:
/-----------------------------------------------------------------------------
| Copyright (c) Jupyter Development Team.
| Distributed under the terms of the Modified BSD License.
|----------------------------------------------------------------------------/
/*
The following CSS variables define the main, public API ...
I tried an iframe shortcode:
eleventyConfig.addShortcode('getNotebook', (arg) => `<iframe src="${arg}">`);
But it seems the system doesn't care for iframes: Content Security Policy: The page’s settings blocked the loading of a resource at inline (“default-src”).
I tried downloading the notebook as markdown but that doesn't work that awfully well - the formatting quickly goes haywire, and interactive graphs are a disaster. If anyone has any suggestions I would greatly appreciate them.
I have found a way around this. It's a bit of a hack, but it works.
My original problem was that using {% include "notebook.html" %} in a markdown file caused the html to render as raw code, rather than html. However, that doesn't happen if the include is in the .njk template, rather than markdown.
So, every notebook I post now has to have its own special template, which is an include directive to an individual notebook. The markdown file contains only the front matter. All the action is in the template, and in a notebooks folder in the src/_includes folder.
It's very McGyver, but as long as it works I'm prepared to live with the loss of elegance.
I would use global data files (i.e. jupyter.js) to fetch the data and create the collection which can then be rendered as html anywhere on the site using any template you fancy.
I and attempting to render a single jpg image using the minimal Bookdown setup.
Everything builds and knits fine in the original minimal bookdown state. When I add this one line of code just below '# Prerequisites,' the book incurs errors during the build process.
I've researched the error solutions to extent of my brain cells but cannot seem to locate the solution. The line of code works perfectly fine in R markdown, so it's not a file or directory does not exist issue.
When I knit the book, it produces the image in the proper position.
/__bookdown_dfc/__derivations/flow_diagram.jpg)
Error messages are provided in linked image[![enter image description here][1]][1].
[1]: https://i.stack.imgur.com/K0u4B.jpg
Try to use HTML instead <img src= "/Users/brianlee/Dropbox (Personal)/__bookdown_dfc/__derivations/flow_diagram.jpg">
I have an .rmd file containing working code for a Shiny interactive knitr/rmarkdown doc. I want this doc to run via GitHub pages.
How do I do this? (Can someone walk me through the steps clearly and fully).
I understand I have to create a gh-pages branch and upload the files there. However, I don't understand what to do with my .rmd file. Do I simply just resave it as an .html file? Or does an html file have to contain something in addition to the rmd file?
Please help explain this to me -- I've spent all day trying to figure this out, but I can;t get anything to work right :(.
Prior effort: I tried following the lead given by this SO.post, but the best I can get is a screen full of block text. No formatting, code or images show up. Just the whole document's text.
Is it possible to include dygraphs chart or some of other js-object supported by htmlwidgets.org to Jekyll-run site from R?
I've tried different variants (Rmd -> Md or Rmd -> html) with no success. The best outcome I have, dyghraphs is included into html-code but doesn't show up on the page (example: http://quantviews.github.io/dygraphs-test/).
Is there any working examples of Jekyll-run site with dygraphs included from Rmd-files?
I think Jekyll is skipping the "libs" directory that's in your _posts folder. (I'm pretty sure it's designed not to process sub directories under "_posts".) The fix is to move the libs folder up and then update the links to point to the new location. For example:
Move the "_posts/libs" folder up one directory so it's sitting next to "_posts".
Add a "/" to the front of the URLs for all the <script src="libs/... links so they call from the docroot. Should look like: <script src="/libs/....
Add a "/" to the front of the URLs for all the <link href="libs/... links so they call from the docroot. Should look like: <link href="/libs/.....
That's it for the main fix. But, there is another bug too. In the _posts/2015-05-15-dygraphs-test.html file, there is a call to:
<script src="libs/dygraphs-binding-0.4.1/dygraphs.js"></script>
But the version 'dygraphs-binding' version in your current libs directory is 0.4.3. I tried just changing the directory name and that worked for me. (i.e. "/libs/dygraphs-binding-0.4.3/dygraphs.js" becomes "libs/dygraphs-binding-0.4.1/dygraphs.js"). It would probably be better to actually line everything up, but that will at least get you working.
my solution:
render with rmarkdown::html_output, copy dygraph dependencies from header
create a new jekyll layout in _layouts/ with the dygraphs dependencies (changing libs to /libs as mentioned before)
run rmarkdown again, this time with rmarkdown::html_fragment to generate html without header
copy html fragment to _includes/
create a new blog post using layout specified in [2]
include html fragment in body of blog post using {% include html_fragment.html %}
I create a R Markdown file in RStudio , then I click on the Knit HTML button on the top of the screen to create and save an HTML page which I want to use elsewhere, say store it on my server.
The problem with the HTML file, is that it contains
<script type="text/javascript" src="https://c328740.ssl.cf1.rackcdn.com/mathjax/2.0-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
which is not valid anymore, and when I edit the HTML and change the source to the following it works.
https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML
Any way I don't have to edit every time the HTML, but have the correct source from RStudio?
This was changed in the rmarkdown package just about a month ago (see this commit). You just need to install the latest version of the rmarkdown package:
> devtools::install_github("rstudio/rmarkdown")
(of course, you'll also need to install.packages("devtools") if you don't have devtools.)
Incidentally, even without this step, you can tell rmarkdown where you want to get MathJax from. This is useful if you want to point to a different CDN.
output:
html_document:
mathjax: https://d3eoax9i5htok0.cloudfront.net/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML
Finally, you can eliminate your MathJax CDN dependency entirely by using mathjax: local to use a built-in copy of MathJax in rmarkdown (note that you'll also need to set self_contained: no to do this).