Создание интерактивных карт с Google Fusion Tables и BatchGeo

© О.С.Хоменок

Журналистика данных: Нанесение на карты массивов

данных при помощи Google Fusion Tables и BatchGeo

Вебинар 30 апреля 2015 года

© О.С.Хоменок

О чем будем говорить?

• Какую информацию мы можем визуализировать с помощью карт?

• В каком формате нам нужны данные для нанесения на карту?

• Интеграция данных в таблицы Fusion Tables или BatchGeo.

• Отображение данных на картах и размещение их на собственных сайтах.

© О.С.Хоменок

Что мы можем визуализировать?

• Базу данных в виде картотеки изображений, линков, текстовой информации, видео, с адресами или географическими координатами.

© О.С.Хоменок

Что мы можем визуализировать?

© О.С.Хоменок

Что мы можем визуализировать?

http://911sevastopol.org/articles/Zhizn_prervannaja_na_doroge_Chast_I_Neuteshitelnaja_bezopasnost/

© О.С.Хоменок

Данные в таблице Excel

• Необходимые для геолокации колонки в таблице:– Страна– Город– Адрес

• ИЛИ– Географические координаты объекта,

наносимого на карту

© О.С.Хоменок

Информация об объекте

• Текст, например:

• Название,

• Телефон,

• E-mail

• Адрес сайта в виде гиперлинка

• Фотография или рисунок (линк на изображение размещенное в сети)

• Видео (линк на Youtube)

© О.С.Хоменок

Сбор и обработка информации

• Копируем информацию с сайта

• Преобразуем ее в формат электронной таблицы

© О.С.Хоменок

Шаг 1: Загрузка в BatchGeo

© О.С.Хоменок

Шаг 2: Назначение колонок

© О.С.Хоменок

Шаг 3: Геокодирование

© О.С.Хоменок

Шаг 4: Сохранение карты

© О.С.Хоменок

Размещение на сайте

• Код для вставки приходит на почту

© О.С.Хоменок

Второй путь…

Используем Google Fusion Tables

© О.С.Хоменок

Сбор и обработка информации

• Собираем информацию в таблице:– Объект (заглавие для метки)– Адрес или географические координаты– Линк на фото– Текст– Гиперссылку на публикацию– Встраиваемый код для видео из Youtube или Vimeo– Код сортировки (иконки)

Объект Место расположения

Фото Текст Статья Видео Сортировка

© О.С.Хоменок

Добавляем иконки

https://www.google.com/fusiontables/DataSource?docid=1BDnT5U1Spyaes0Nj3DXciJKa_tuu7CzNRXWdVA#map:id=3

© О.С.Хоменок

Чтобы присвоить определённому адресу нужную иконку, нужно проделать несколько шагов.

Шаг первый: кликаем на саму иконку. Во всплывающем окне видно её имя (Icon Name):

© О.С.Хоменок

Импорт в Google Fusion Tables

© О.С.Хоменок

Редактирование колонкок

© О.С.Хоменок

Визуализация

© О.С.Хоменок

Изменяем внешний вид маркеров

© О.С.Хоменок

Убираем лишнее

© О.С.Хоменок

Размещение на сайте• Достигается с

помощью html-кода, который нужно встроить в админ-панель своего сайта (блога, etc.)

• Чтобы получить этот код, сначала нужно сделать карту общедоступной

© О.С.Хоменок

В правом верхнем углу есть голубая кнопка «Share» - нажимаем на неё и делаем карту общедоступной в интернете. Затем нажимаем «Сохранить» и «Готово».

После этого отправляемся во вкладку «Tools» и открываем подвкладку «Publish».

Появятся две ссылки: первая из них является адресом карты в Сети, вторая представляет собой html-код для вмонтирования на наш сайт или блог. Можно изменить размеры карты в соответствующих окнах в том же разделе (изменив число пикселей, мы сделаем её больше или меньше)

© О.С.Хоменок

Размещение на сайте

• Появятся две ссылки: первая из них является адресом карты в Сети, вторая – html-код для встраивания на сайт или блог.

• Можно изменить размеры карты на сайте в том же разделе (изменив число пикселей, мы сделаем её больше или меньше)

© О.С.Хоменок

Домашнее чтение

• Примеры визуализации https://sites.google.com/site/fusiontablestalks/stories

• Карты с картинками внутри• http://earth.google.com/outreach/

tutorial_fusion_sample.html • Карты с встроенными таймлайнами • https://sites.google.com/site/

instituteworkshopft2012/

© О.С.Хоменок

Спасибо за внимание!

Олег Хоменок,

oleg.khomenok@gmail.com

https://www.facebook.com/oleg.khomenok