Storymaps — интерактивные карты и не только они

Storymaps набор приложений для создания интерактивны карт-историй

 

Что такое ESRI?

 

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

Аббревиатура ESRI с главной страницы storymaps.arcgis.com расшифровывается как «Институт исследования систем окружающей среды», компания, которая была основана еще в 1969 году. Именно ей и принадлежат те сервисы, которы мы сегодня рассмотрим. Она является одним из мировых лидеров на рынке геоинформационных систем и даже имеет своего представителя на постсоветском пространстве.

Профессиональные решения arcgis.com ориентированы на корпоративный уровень. В отличие от них, «Карты историй» рассчитаны на массового пользователя, и с ними можно делать самые разнообразные мультимедийные интерактивные материалы — от презентаций до почти лонгридов, причем в очень простом и дружелюбном интерфейсе.

Карты здесь — только один из видов контента, в некоторых случаях вместо них можно вставить практически любой иной мультимедийный элемент: embed-коды, видео, изображения, полноценные iframe веб-сайтов, которые будут загружаться, соответственно, со всеми работающими ссылками и иным контентом. Именно такой подход существенно расширяет возможное поле для использования «Storymaps».

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

Технологическое ограничение, которое объединяет все приложения «Карт историй» — то, что любой контент, который вы планируете в них использовать, должен быть размещен на внешних ресурсах. Загрузить сюда даже фотографии не получится. Кроме того, если в качестве внешнего ресурса вы выберите облачные хранилища, «Storymaps» может не понравиться то, что ссылка не оканчивается на .jpeg или .png, а значит, контент может и не отобразиться. В идеале фотография должна быть доступна как любая файл в сети, по прямой ссылке.

Как создать интерактивную карту?

 

Ключевое слово, которое объединяет все сервисы «Storymaps» — история. А истории, как известно, можно рассказывать по-разному. При нажатии на кнопку «Создать историю» вам предложат целых восемь вариантов.

Storymaps создаем интерактивные карты истории

Map tour — это простая интерактивная карта. К маркерам на ней привязаны иллюстрации — фото или видео, и, благодаря навигатору, мы можем перемещаться по ней от точки «А» до точки «Б». Логика ее построения напоминает популярный Storymap от Knight Lab. Здесь заменить карту на что-либо другое не получится, именно вокруг нее уже выстраивается весь остальной контент.

Map journal — вот здесь карту можно заменить на видео и изображения. По сути этот формат немного напоминает презентацию. Слева — текст и описание, справа — карта или что-либо иное. Точная географическая привязка, маркеры — не обязательны.

Storymaps - создаем интерактивные карты истории

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

Map Series — еще один способ представления карт. Окно поделено на вкладки, в каждой из которых либо отдельная карта с описанием, либо другой контент.

Crowdsourse — на бесплатном аккаунте недоступен, позволяет аудитории добавлять на карту интересующий контент.

Shortlist — еще один вариант организации привязанного к картам контента. Здесь по вкладкам можно сгруппировать различные маркеры с соответствующими иллюстрациями.

Swipe / Spyglass отсылает нас сразу же к популярному Juxtapose. Только здесь сравнивать нужно две карты со «Storymaps», подставить вместо них любой другой тип контента не получится.

Наконец, Basic — одна карта. Вариант для визуализации статистики, имеющей географический характер.

Разберем подробнее алгоритм работы с каждым вариантом.

Map Tour

 

Первым шагом при создании тура нужно указать источник иллюстраций. Как видно, в роли него могут выступать либо облачные хранилища для фото и видео, либо произвольные URL, которые кроются под значком шестеренок. Выбираем последний вариант и нажимаем «Начать новый тур».

Storymaps - создаем интерактивные карты истории

Окно создания тура поделено на две части. Справа — карта, ее внешний вид можно изменить по кнопке «Изменить базовую карту». Вверху слева сразу же уберем тестовые заголовок и подзаголовок «Отредактируйте меня», поставим свои и начнем добавлять маркеры по кнопке «Добавить».

В появившемся окне нужно будет указать url изображения или видео и превью для картинки, вписать заголовок и подзаголовок и, конечно же, найти нужное местоположение, куда отправится маркер. Ваша точка на карте добавлена. Дальше — по тому же принципу добавляем и остальные.
Если ошиблись или хотите поменять местам последовательность точек на карте — поможет кнопка «Организовать». А в «Настройках» можно задать оформление элементов страницы — иными словами, поработать над тем, как она будет выглядеть в итоге:

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

Ваша карта готова. Не забываем «Сохранить», и можно закрывать вкладку в браузере. Возвращаемся в админку сервиса, в список созданных вами историй.

На панели «Мои истории» «Storymaps» стоит остановиться отдельно. Прежде всего, потому что здесь собрана вся детальная информация по каждому проекту — заголовки, количество меток, стиль оформления и другая сводная информация. Здесь же есть и пиктограмма гиперссылки, по клику на которой можно получить embed-код для вставки истории — его размеры также можно скорректировать и в режиме предпросмотра оценить на некоей условной веб-странице.

Map Journal

 

Storymaps - создаем интерактивные карты-истории

Этот тип истории чем-то напоминает по формату презентацию. Экран здесь поделен на две части (их соотношение можно поменять): справа — иллюстрация, которой может быть и карта, и встроенный веб-сайт, и видео, слева — описание. Причем для описания доступен полноценный визуальный редактор со всеми функциями, включая embed.

Каждая подобная страница здесь называется «Разделом». Новую добавляем через кнопку «Добавить» в левом нижнем углу. И после того, как будет выстроена их последовательность, на черном поле слева появится навигация в виде точек, которая будет показывать текущее положение в истории. Также стоит обратить внимание на кнопку «Настройки» в верхнем меню — здесь можно выбрать один из доступных шрифтов, цветовую гамму оформления и настройки логотипа истории.

Shortlist

 

Здесь все отметки на карте структурированы по вкладкам, соответственно, каждая вкладка предполагается для отдельной карты. Рабочее пространство построено по уже привычной схеме: справа — карта и маркеры, слева — их содержание. К маркеру в этом типе истории можно прикрепить только изображение и описание с базовым форматированием (курсив, подчеркивание, ссылка и т. д.). Остальные настройки — примерно те же, что и в типах выше.

Cascade

 

Наверное, один из наиболее интересных типов историй «Storymaps». По сути — это сервис для публикации мультимедийных страниц. Конечно, сравнивать его, например, с «Тильдой» было бы не очень уместно, просто потому лонгриды — это совсем не главный для ERSI формат. Однако со своей задачей Cascade справляется неплохо. В настоящий момент приложение работает только в браузерах Chrome и Safari.

Создаваемая страница строится в Cascade по привычному по «Тильде» и подобным сервисам алгоритму — из блоков, все они по умолчанию верстаются во всю ширину страницы. Каждый новый элемент добавляется по клику на значке «+» по центру экрана.

Типов блоков здесь всего четыре — текст, в широком смысле — медиа, заголовок и immersive section. С текстом доступны все базовые операции форматирования. По клику на «Media» можно добавить множество вариантов контента — от интерактивных карт (включая те, которые уже были созданы пользователями на сервисе ранее), до видео и embed. Интересно, что поверх этого контента также доступно наложение текстового поля, причем с различными эффектами его появления на странице и некоторыми возможностями оформления. Более того, в рамках блока «Media» можно добавить сразу несколько элементов, в том числе и различных типов — например, карту, видео и встроенную страницу сайта. В этом случае они будут пролистываться в горизонтальной плоскости.

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

Если же по традиции зайти в раздел «Settings» и пройти по вкладке «Bookmarks», то к созданной истории очень легко добавить верхнее меню. В него будут внесены заголовки всех блоков. Меню автоматически фиксируется на самом верхнем поле страницы и не смещается при пролистывании.

Таким образом, в случае с Cascade по сути мы имеем дело с очень функциональным приложением для создания красивых мультмедийных материалов. Конечно, здесь не хватает, например, возможностей настройки шрифтов, больше свободы в размещении элементов на странице — например, верстки в несколько колонок и необязательно во всю ширину. Но если вспомнить, что основное предназначение «Storymaps» — все-таки карты, наверное, об этих замечаниях можно забыть. Впрочем, возможно, в будущем эти функции и появятся.

Остается только разместить подготовленную страницу через embed на вашем сайте. Да-да, эта функция здесь тоже есть.

Еще

 

Стоит отметить, что мы рассмотрели лишь часть функций приложений «Storymaps», сделав акцент только на мультимедийной составляющей, и не рассказали непосредственно том, как можно визуализировать массивы данных на картах в режиме Basic. Но об этом — позже, в связке с другими аналогичными приложениями. А пока попробуйте создать лонгрид в Cascade и поделиться своим творчеством с нами.

Эксперты в теме

Используя это, были реализованы проекты

Анастасия Черепанова
Координатор модераторов и волонтеров "Карты помощи"

В поиске волонтеров и модераторов здорово помогают социальные сети и ЖЖ. На проекте "Карта помощи" нам активно писали люди, которые ранее вообще не занимались благотворительностью.