Тема 1. Нанесение точек и установление границ карты

Документация библиотеки leaflet https://rstudio.github.io/leaflet/

Исходники этого примера: https://github.com/bivni/map-demo1 файл mapdemo1.Rmd

Включаем библиотеки

library(leaflet) # рисование карт
library(dplyr)   # оператор %>% (pipe) и функции манипуляций с данными
library(xtable)  # вывод таблиц в документах LaTeX и Web
library(htmltools) # вспомогательные функции при генерации web content'а

Создаем фрейм данных с координатами объектов

Загружаем данные о нескольких знаниях МГУ в формате:

  • название (name),
  • адрес сайта (url)
  • широта (latitude)
  • долгота (longitude)
geotagsMGU <- read.table(header=TRUE,
                         as.is=TRUE,
                         row.names=1,
                         sep=",",
                         text=
"name,url,latitude,longitude
Главное здание МГУ, http://www.msu.ru/info/map/gz.html, 55.703056, 37.530556
Экономический факультет МГУ, http://econ.msu.ru, 55.696040, 37.537793
Ботанический сад МГУ, http://botsad.msu.ru, 55.707701, 37.527202
Дом аспиранта и стажера МГУ <ДАС>, http://www.msu.ru/depts/host/das.html, 55.690314, 37.594432
Филиал дома студента МГУ <ФДС>, http://www.msu.ru/depts/host/fds.html, 55.707039, 37.509166
")

Форматируем таблицу координат для выдачи в аккуратном виде

Параметры xtable():

  • параметр auto=T автоматически выравнивает текстовые столбцы по левому, а числовые – по правому краю (по разрядам)
  • параметр digits=5 – 5 цифр после “запятой” в числовых полях
xtab <-  xtable(geotagsMGU,auto=T,digits=5 )
caption(xtab) <- "Таблица 1. Координаты объектов МГУ"
print(xtab,type="html", caption.placement="bottom", html.table.attributes="border='3' width='100%'")
Таблица 1. Координаты объектов МГУ
url latitude longitude
Главное здание МГУ http://www.msu.ru/info/map/gz.html 55.70306 37.53056
Экономический факультет МГУ http://econ.msu.ru 55.69604 37.53779
Ботанический сад МГУ http://botsad.msu.ru 55.70770 37.52720
Дом аспиранта и стажера МГУ <ДАС> http://www.msu.ru/depts/host/das.html 55.69031 37.59443
Филиал дома студента МГУ <ФДС> http://www.msu.ru/depts/host/fds.html 55.70704 37.50917

Для удобства добавим в фрейм данных geotagsMGU столбец name, дублирующий названия строк.

geotagsMGU$name <- rownames(geotagsMGU)

Рисуем карты и наносим объекты с всплывающими описаниями

Объекты на карте будут обозначаться маркерами, имеющими форму по умолчанию. Кликнув на них, Вы получите всплывающее окно с именем объекта и/или информацией о нем.

Пример 1. Один объект. Границы карты определяются масштабом и координатами центра

Создадим фрейм данных, состоящий только из строчки про Экономический факультет.

geotagsEF <-  geotagsMGU["Экономический факультет МГУ",]
geotagsEF %>% xtable(digits=4,auto=T) %>% print(type="html")
url latitude longitude name
Экономический факультет МГУ http://econ.msu.ru 55.6960 37.5378 Экономический факультет МГУ

Создадим объект-карту

m <- leaflet() %>% 
     addTiles()

Установим масштабный коэффициент (zoom) карты и укажем одну точку (Экономический факультет) в качестве центра карты при помощи функции setView() При помощи addMarkers() нанесем маркер со всплывающим окном в этой же точке.

Если нажать на точку, появится всплывающее окно (popup window)

m %>% 
  setView(lng=geotagsEF$longitude, lat=geotagsEF$latitude, zoom = 15) %>%
  addMarkers(lng=geotagsEF$longitude, lat=geotagsEF$latitude, 
    popup="<b>ЭФ МГУ</b><br><a href='http://www.econ.msu.ru'>сайт факультета</a>")

Пример 2. Один объект. Границы карты определяются координатами диагонали прямоугольника

Теперь указываем не масштаб, а границы. Хотим чтобы карта включала прямоугольник, диагональ которого проведена между 2-мя общежитиями ДАС и ФДС. Используем функцию fitBounds() для определения границ карты.

geotagsDAS <- geotagsMGU["Дом аспиранта и стажера МГУ <ДАС>",]
geotagsFDS <- geotagsMGU["Филиал дома студента МГУ <ФДС>",]
leaflet(geotagsEF) %>%
  addTiles() %>% 
  fitBounds(
    lng1 = geotagsFDS$longitude,
    lat1 = geotagsFDS$latitude,
    lng2 = geotagsDAS$longitude,
    lat2 = geotagsDAS$latitude
            ) %>%
    addMarkers(~longitude,~latitude,popup=htmlEscape(~name))

Пример 3. Много объектов. Границы карты определяются автоматически

В этом примере выводим сразу несколько точек и функция clearBounds() устанавливает автоматическое определение границ карты по разбросу точек.

leaflet(data=geotagsMGU) %>%
  addTiles() %>% 
  clearBounds( ) %>%
    addMarkers(~longitude,~latitude,popup=htmlEscape(~name))

Фрейм данных по умолчанию указан сразу в функции leaflet(data=geotagsMGU), а в остальных функциях пакета leaflet мы можем ссылаться на столбцы этого dataframe в форме ~имяСтолбца, но можем указывать параметром data= другой dataframe, если нужно.

Текст внутри всплывающих окон (popup) объектов верстается по правилам языка HTML. В первом примере использовались теги <b> и </b> для выделения текста полужирным (bold) шрифтом, а тег <br> (break) для ручного разделения текста на строки. Если в названии объекта есть специально трактуемые html-символы, например, символы “<” и “>” – (greater than & less than) в строке “<ДАС>”, то строку нужно подвергнуть “санитарной обработке” функцией htmlEscape() и заменить тем самым спецсимволы на их html-мнемоники &gt; и &lt;, чтобы вставляемые вместе с данными спецсимволы не ломали структуру web-страницы.

htmlEscape("<ДАС>")
## [1] "&lt;ДАС&gt;"

Пример 4. Добавление “иконки”

Если у Вас есть адрес (URL) подходящей картинки для маркера, то можно создать по нему объект icon и использовать его.

iconEFURL <-  "http://www.econ.msu.ru/images/EFLogo-130.png"
iconEF <- makeIcon(iconUrl = iconEFURL,iconWidth =60,iconHeight = 40)
m %>% 
  setView(lng=geotagsEF$longitude, lat=geotagsEF$latitude, zoom = 15) %>%
  addMarkers(lng=geotagsEF$longitude, lat=geotagsEF$latitude, 
    popup="<b>ЭФ МГУ</b><br><a href='http://www.econ.msu.ru'>сайт факультета</a>",icon=iconEF)

В этом примере изображение “лежит” на земле. Если вы хотите “приподнятое” изображение, то нужно указать еще и иконку, изображающую тень основного маркера.