将 R 创建的传单地图嵌入 github

Question

我正在努力将创建 R 的传单地图嵌入 my github account

文件导出为单个HTML文件，我可以在我的电脑上查看它

当我上传然后从 github 打开时，it gives raw HTML code, not the interactive map
而且我什至不确定如何嵌入这个 interactive map in ReadMe.md。当我将 link 放置到 html 并单击它时，我得到了相同的原始地图。

求助！

更新

我创建了后续问题，If HTML doesn't work well in github, how can some people make it work

Answer 1

你可以在前面加上http://htmlpreview.github.io/？到放置 html 文件的 url。你的情况：

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

Answer 2

以防万一有人还在寻找解决方案，我写了一篇 post 解释了如何去做，假设您使用 Jekyll 来构建托管在 GitHub 上的网站。

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

简而言之，您必须执行几个步骤：

上GitHub/Jekyll

确定您需要包含的代码。我已经帮你做了 See on my GitHub
Copy/paste 它在构建您的 <head> 的代码中。这取决于您的 Jekyll 实现。这样做之后，每次 Jekyll 构建网站时都会加载所需的库。

在 Rstudio 上

用 leaflet 创建地图并将其编织成 github_document。重要的是在前面使用always_allow_html: yes编织它。

降价

检查每个 leaflet 地图是否在 .md 文件中生成了 html 代码。像这样：

<!--html_preserve-->

  <script type="application/json" data-for="htmlwidget-SOMEIDNUMBER">
    {"x":{"options": ...
<!--more funky code here-->

将此块粘贴到 <script> 部分之前：

<div id="htmlwidget-SOMEIDNUMBER" style="width:100%;height:216px;" class="leaflet html-widget"></div>

所以每个 leaflet 地图都有这样的东西：

<!--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-->

现在在 GitHub 上发布。现在，当 Jekyll 构建托管在 GitHub 上的 blog/web 时，库会加载并且传单地图会正确显示。请注意，在本地或降价时，地图仍然不可见。

完成几次后，您会发现这基本上是 copy/paste/modify 我在第 5 步中介绍的块。

将 R 创建的传单地图嵌入 github

Embed leaflet map created by R into github

r

github

embed

leaflet

更新