Хотите создать виртуальное путешествие по городам и странам, рассказать о жизни известных личностей, составить путевой дневник? Нет ничего невозможного!

Создать такое виртуальное путешествие можно с помощью замечательного сервиса StoryMap JS, который разрешает смастерить неограниченное количество красочных интерактивных карт.

В итоге получается оригинальная презентация «три в одном»: карта, на которой показано место события, слайд с рассказом и дополнительные медиабонусы — фотографии, видео или аудио. Для работы в сервисе всего лишь нужен аккаунт Google.

Вот мой небольшой пример, который лучше смотреть в полноэкранном виде.

Создаём карту

 Чтобы создать интерактивную карту, заходим на сайт сервиса и нажимаем “Make a StoryMap”.

Далее подключаем сервис к аккаунту Google, нажав “Sign in with Google”.

Чтобы создать проект, нажимаем “New”.

Теперь придумываем название проекту. Его можно будет изменить в процессе работы, просто переименовав титульный слайд. Нажимаем «Create» и переходим к творческой части.

Украшаем слайды

После создания проекта откроется рабочее поле для редактирования. Для начала осмотримся. Слева — список слайдов, из которых состоит интерактивная карта. Сверху — карта с маршрутом.

В центре — поле для добавления текста и медиаобъектов. Доступно два режима работы : “Edit” — режим редактирования и “Preview” — просмотр. Новый слайд создается с помощью кнопки “Add Slide”.

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

Чтобы добавить карту, вводим в поисковую строку название населённого пункта, улицы. Кириллица поддерживается. Выбираем из списка нужный объект — на карте появляется метка. На каждом слайде может быть только одна метка на карте.

Чтобы добавить медиа, вносим в соответствующее поле ссылку. На слайд можно добавлять видео и аудио из YouTube, Vine, материалы из Wikipedia. Фото и изображения можно загрузить с ПК (Upload an image).

В графе “Credit” можно добавить подписи к картинкам или видео. Небольшой сопроводительный текст к медиа можно добавить в поле “Caption”.

Справа находится раздел для редактирования текста. Верхнее поле — для заголовка, ниже — поле для редактирования текста. Можно изменить шрифт (сделать его полужирным или наклонным), добавить ссылку на веб-ресурс.

Кнопка “Background Options” вызывает меню с настройками фона для слайда. Цвет фона поменять, используя предложенную палитру цветов. Кстати, как фон можно использовать любое изображение, загрузив его с ПК или по ссылке.

Кнопка «Marker Options» меняет вид маркера на карте: можно загрузить свой маркер по ссылке или с ПК.

Настраиваем просмотр

На верхней панели инструментов находятся кнопки для управления созданным проектом. Кнопка “Mу Maps” в правом верхнем углу служит для навигации между разными материалами, если создано несколько интерактивных карт. “Save” помогает сохранить созданную карту. “Publish Changes” публикует изменения.

Кнопка “Options” позволяет настроить проект с точки зрения просмотра и оформления. И вот об этом поподробнее.

Нажимаем кнопку — и попадаем во вкладку “Display”. А здесь вот такие чудеса:

  • “StoryMap Size ” — изменение размера карты.
  • “Language ” —  выбор языка из выпадающего списка.
  • «Fonts» —  выбор шрифта из выпадающего списка.
  • “Treat As”  — выбор режима показа слайдов. Конструктор в режиме “Cartography” самостоятельно определяет масштаб слайда. Сделано это для мягкого эффекта перехода. Если нужно задать точный масштаб, включаем режим “Image”. При этом линии маршрутов и точки на карте будут доступны только при наведении курсора.
  • “Call To Action”  —  добавление текста на кнопку титульного слайда для начала просмотра. Например, “Начать просмотр”.
  • “Map Type ”—  выбор типа карты из выпадающего списка (контурные или топографические карты), также можно подключить свои, произвольные (custom).

Чтобы поделиться созданной работой, нажимаем “Share” в правом верхнем углу. 

В открывшемся окне можно получить прямую ссылку на созданную карту или код для встраивания её в блоги и на сайты.

В поле “Description” прописывается текст, с которым карта будет публиковаться в социальных сетях.

В поле “Featured Image” можно загрузить обложку для публикации карты. Оптимальный размер — 1200 х 630 пикселей. Добавить изображение можно по ссылке или с ПК.