Встраивание карты R - Leaflet на сайт jekyll, размещенный на Github

У меня есть веб-сайт здесь, размещенный на страницах Github с использованием Beautiful Jekyll. См. здесь фактический код блога на Github.

Я хотел бы вставить карту буклета в один из моих постов в блоге. Я использую листовку пакета R.

Скажем, например, я делаю карту:

library(htmlwidgets)
library(leaflet)

m <- leaflet() %>% #basic map
     addTiles() %>%

Как вставить это на свою страницу? Одна вещь, которую я пытался сделать, это сохранить html-файл, используя:

saveWidget(widget = m, file="your_map.html", selfcontained = FALSE)

Это работает и сохраняет файл html локально. Я попытался скопировать и вставить html-код в один из _posts на Github, но это не сработало. Какие-либо предложения?


person Alexandru Papiu    schedule 13.02.2016    source источник


Ответы (3)


Вы можете посмотреть, как они это делают, на официальной странице брошюры R по адресу их страницу на github (ту, что для веб-сайта, а не для кода листовки).

Я не вижу на вашем сайте, что вы используете R-markdown для создания страниц уценки. Это действительно стоит попробовать! Взгляните на пример jekyll от yihui. В основном вы используете knitr для создания своих страниц. Это означает, что вы пишете уценку и можете встроить свой R-код на страницу уценки. Например:

```{r}
plot(runif(10))
```

То же самое вы можете сделать с листовкой:

```{r}
library(leaflet)
leaflet() %>% addTiles() %>% setView(10, 51, zoom = 8)
```

htmlwidgets должен автоматически загружаться вязалкой.

Например, вы можете посмотреть, как работает страница базовой карты для Страница листовки R сделана в R-уценке.

Одна важная вещь, если вы включаете карты буклетов на свою страницу, это включить все сценарии в заголовок страницы. На своей странице я вставил его в папку head.html в папке _includes.

Мне пришлось добавить следующее:

{% 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 %}

Я добавил опцию maps: true во вступительную часть страниц с картами, чтобы часть {% if page.maps %} удостоверилась, что весь этот код загружается только для тех страниц, которым он нужен.

Я скопировал все скрипты из папки, созданной Knitr, когда я компилировал страницу R-markdown без jekyll. Поэтому мне пришлось установить

output: 
  html_document: 
    self_contained: no

во вступительной части (иначе код встраивается в страницу и не может быть так легко скопирован).

Команда разработчиков листовки R включает библиотеки в свой index.html. как это:

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

Вы можете скопировать библиотеки из папки их библиотек.

Я вижу на вашей странице, что вы уже заставили его работать другим методом. Я просто хотел включить это, потому что я просто работал над той же темой...

person nnn    schedule 12.03.2016
comment
О, я вижу, это довольно круто, спасибо! что я сделал, так это опубликовал карту в Rpubs, затем посмотрел там html-код, скопировал iframe с картой и вставил его в свой пост. Это немного окольным путем, но это работает. И у меня есть способ опубликовать rmarkdown, но способ, который вы предложили, кажется лучше. - person Alexandru Papiu; 26.03.2016

Основываясь на ответе @nnn, я составил для этого учебник:

ПОЛНОЕ РУКОВОДСТВО ПО ЭТОЙ ССЫЛКЕ

Короче:

На GitHub/Jekyll

  1. Определите код, который необходимо включить. Я уже сделал это для вас см. на моем GitHub

  2. Скопируйте/вставьте его в код, который создает ваш файл <head>. Это будет зависеть от вашей реализации Jekyll. После этого необходимые библиотеки будут загружаться каждый раз, когда Jekyll создает веб-сайт.

В Rstudio

  1. Создайте карту из leaflet и свяжите ее с github_document. Важно вязать его с помощью always_allow_html: yes лицевой материи.

В уценке

  1. Убедитесь, что каждая leafletmap создала код html в файле .md. Что-то вроде этого:
<!--html_preserve-->

  <script type="application/json" data-for="htmlwidget-SOMEIDNUMBER">
    {"x":{"options": ...
<!--more funky code here-->
  1. Вставьте этот фрагмент перед частью <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, библиотеки загружаются, и карта буклета отображается правильно. Обратите внимание, что на локальном или уцененном карта по-прежнему не видна.

После того, как вы сделаете это пару раз, вы увидите, что это в основном копирование/вставка/изменение фрагмента, который я представил на шаге 5.

person dieghernan    schedule 21.05.2019

Я нашел решение здесь https://jayrobwilliams.com/posts/2020/09/jekyll-html

Сохраните вывод saveWidget в каталоге вашего веб-сайта.

оберните относительный путь в iframe и стилизуйте его по своему усмотрению.

<iframe src="/interactiveDocs/map.html" height="600px" width="100%" style="border:none;"></iframe>

Это хорошо сработало для моих целей

person carverd    schedule 07.04.2021