Публікація карти з географічною прив’язкою за допомогою KnightLab’s StoryMap JS
Авторки: Еріка Гейз та Мія Партлов Переклали на українську: Юлія Голубінка, Софія Голубінка Оригінал уроку: https://programminghistorian.org/en/lessons/displaying-georeferenced-map-knightlab-storymap-js
У цьому уроці ви дізнаєтеся, як створити карту з географічною прив'язкою з Map Warper в StoryMap JS від KnightLab - інтерактивній вебплатформі для карт і створення історій.
Цілі уроку
Географічна прив’язка це процес присвоєння географічних координат відсканованій карті або растровому зображенню. На сьогоднішній день значна частина істориків використовує географічно прив’язані історичні карти, щоб вивчати зміни місцевості з плином часу. До того ж, щоб поділитися своїми дослідженнями або ж наочно зобразити певний історичний епізод, географічно прив’язані історичні карти можна поширювати у мережі інтернет. У цьому уроці ми покажемо вам, як поділитися географічно прив’язаною картою в інтернеті за допомогою StoryMap JS, інтерактивної вебкартографічної платформи. StoryMap JS — це інструмент із відкритим кодом від Knight Lab Північно-Західного університету (приватний дослідницький університет в Еванстоні, Іллінойс, США), який дозволяє інтегрувати історичні та сучасні карти в інтерактивні історії. Якщо ви вперше створюєте карту з географічною прив'язкою, ознайомтеся з іншими уроками з нашого посібника, зокрема "Географічна прив’язка за допомогою QGIS 2.0" і "Вступ до Map Warper", в яких подано докладні пояснення.
Створення наративу за допомогою StoryMap JS
Перш ніж перейти до створення вашої карти, продумайте структуру та організуйте зміст, щоб якомога зрозуміліше подати ваш наратив. Інтерфейс StoryMap JS дозволяє пов’язати текст та медіаелементи, до прикладу, зображення, відео чи аудіозаписи, з місцями на карті в лінійному порядку. До кожного позначеного місця на карті можна додати слайд, який потенційно міститиме медіаелементи, заголовок, коментар, чи описовий текст. Наполегливо рекомендуємо перед створенням карти зібрати всю цю інформацію в один документ чи електронну таблицю:
місце розташування кожного слайду
заголовок чи підзаголовок слайду
текст для кожного слайду
медіаелементи (зображення, посилання на відео чи аудіо), у тому числі й назву файлу і джерело, з якого було взято медіа
Щоб мати змогу користуватися онлайн-інструментом Story Map JS, вам знадобиться обліковий запис Google. Якщо у вас немає облікового запису Google і ви б воліли розмістити власну версію StoryMap JS на вебсервері, перегляньте технічні інструкції Knight Lab і репозиторій GitHub для ознайомлення з їхнім відкритим кодом. У цьому уроці ми будемо використовувати інструмент StoryMap JS через обліковий запис Google.
Крок 1: Експорт URL-адреси для вашої карти з географічною прив’язкою
Щоб досягнути мети цього уроку, вам потрібно спершу експортувати карту з географічною прив'язкою з Map Warper. Map Warper пропонує кілька картографічних сервісів для експорту вашої карти з географічною прив'язкою, зокрема KML (для використання в Google Планета Земля тощо), URL-адресу Web Map Services (WMS) і Tiles (схема Google/OSM).
URL-адреса експорту Map Warper, яка вам знадобиться для цього уроку, - це функція Tiles (схема Google/OSM). Це URL-адреса, яку ви будете використовувати для додавання вашої базової історичної карти до StoryMap JS; це URL-адреса карти територій України у XVIII столітті авторства Тобіаса Конрада Лоттера, яку вже було ректифіковано та експортовано з Map Warper. Щоб дізнатися більше про експорт географічно прив'язаної карти з Map Warper, також дивіться наш переклад уроку Ентоні Пікон Родріґеса та Міґеля Куадроса "Вступ до Map Warper". Зверніть увагу, що ви не зможете перейти за URL-адресою у веб-браузері, але зможете завантажити її в StoryMap JS. URL буде відформатовано таким чином:
Ця URL-адреса генерує набір картографічних фрагментів вашої географічно прив'язаної карти для розміщення в мережі інтернет. Картографічні фрагменти це, по суті, маленькі квадратні зображення, які в сукупності утворюють одну інтерактивну карту. Загальне зображення вашої карти формується шляхом об'єднання окремих фрагментів у єдиний набір відповідно до широти (Y), довготи (X) та рівня масштабування (Z) кожного фрагменту. Картографічні фрагменти зазвичай використовуються для подання зображень або попередньо відредагованих наборів картографічних даних у вебсередовищі і часто є альтернативою до векторних даних, коли кількість даних стає надто великою.
URL-адресу Tiles (схема Google/OSM) можна знайти в розділі Map services (Картографічні сервіси) на вкладці Export (Експорт) вибраної вами географічно прив’язаної карти у Map Warper. Збережіть копію цього URL-посилання, щоб скопіювати і вставити її в StoryMap JS.
Крок 2: Доступ до StoryMap JS
Щоб отримати доступ до інструменту StoryMap JS, перейдіть на вебсайт StoryMap JS і натисніть на зелену кнопку підписану як "Make a StoryMap" (Створити інтерактивну карту).
Вам буде запропоновано увійти за допомогою облікового запису Google. Якщо у вас його немає, ви можете створити його за допомогою gmail.com.
Введіть назву для вашої інтерактивної карти та натисніть "Create" (Створити).
Після входу в систему і натискання кнопки "Створити" ви побачите інструмент StoryMap JS, готовий до додавання вмісту на титульний слайд. Ось короткий огляд розділів інтерфейсу StoryMap JS:
Map Location (Розташування карти): Тут ви можете вказати місце розташування на карті. Оскільки це титульний слайд, рядок пошуку для додавання місцезнаходження до цього слайда не відображається.
Add Slide (Додати слайд): У цьому стовпчику відображаються піктограми слайдів. Титульний слайд позначено червоним кольором. Кнопка "Додати слайд" дає змогу додати більше слайдів (локацій) до вашої інтерактивної карти.
Media (Медіа): Розділ "Медіа" дозволяє завантажувати зображення або посилання на зображення, чи сервіси потокового відео (наприклад, YouTube, Vimeo, SoundCloud тощо) і додавати їх на слайд.
Headline and Text (Заголовок та текст): Тут ви можете додати заголовок або назву для кожного слайду разом з певним описовим текстом для створення вашого наративу. У текстовому полі є можливість виділяти текст жирним шрифтом чи курсивом, а також додавати гіперпосилання. Там також присутня функція "Редагувати HTML" ("</>"), щоб ви могли переглянути текст, який ви додали за допомогою тегів HTML.
Marker and Background Options (Параметри позначок і фону): Тут ви можете додати власні позначки для кожної точки на карті. У розділі "Параметри фону" ви можете змінити колір фону або додати зображення для заголовка і тексту. Оскільки на прикладі титульна сторінка і ви ще не позначили локації на карті, "Параметри позначок" неактивні. Після того, як ви додасте ще один слайд і місце розташування, ви отримаєте доступ до кнопки "Параметри позначок", щоб налаштувати точки на карті.
У верхньому лівому куті інтерфейсу інструменту розробки StoryMap JS ви побачите кнопку "Options" (Параметри).
Діалогове вікно "Options" (Параметри) містить кілька налаштувань для публікації та поширення вашої інтерактивної карти. У наступному кроці ми розглянемо діалогове вікно "Options" (Параметри) і навчимося змінювати "Map types" (Типи карти) або базову карту та завантаження, щоб згодом ви могли застосувати це у вашій географічно прив’язаній карті.
Крок 3: Завантаження карти з географічною прив’язкою у StoryMap JS
У діалоговому вікні "Options" (Параметри) в розділі "Map types" (Типи карти) ви побачите кілька варіантів шару базової карти (Stamen Maps: Toner Lite, Stamen Maps: Toner, Stamen Maps: Toner Lines тощо). Stamen – відома картографічна компанія, яка займається візуалізацією геоданих, часто використовуючи у своїх проектах дані OpenStreetMap (OpenStreetMap — це відкритий проєкт, спрямований на збір, зберігання та розповсюдження загальнодоступних геопросторових даних, створення інструментів для роботи з ними силами спільноти волонтерів). Розробники компанії випустили три стилі для OSM – Toner, Terrain та Watercolor – та розмістили картографічні фрагменти у вільному доступі. Станом на 31 липня 2023 року ці стилі доступні через партнерство зі Stadia Maps. Щоб працювати з географічно прив’язаною картою в StoryMap JS, вам потрібно додати з Map Warper базову географічно прив’язану карту.
У спадному меню "Map types" (Типи карти) виберіть "custom" (власний) і введіть URL-посилання Tiles з вкладки експорту Map Warper, яке ви скопіювали і вставили ще у кроці 1.
Воно буде відформатовано таким чином:
Вміст посилання буде завантажено у вашу географічно прив'язану карту як базову. Зразок карти, який ми будемо використовувати в цьому уроці, - це карта територій України у XVIII століття авторства Тобіаса Конрада Лоттера, яка відома під заголовком "Theatrum belli Russorum Victoriis sive Nova et accurata Turcicorum Et Tartaricum Provinciarum intra fluvios Tÿras s. Niester et Tanaim s. Don, ad Oram Ponti Euxini et in Peloponneso Taurica sitarum Designatio" та знаходиться на сторінці "Internet Archive", некомерційному вебсервісі архівування.
Після завантаження географічно прив'язаної карти в StoryMap JS, помітно, що ця карта дублюється і її масштаб дуже малий — це ефект "картографічних фрагментів", який виникає під час імпорту шару з набору картографічних фрагментів, що покриває лише невелику частину земної кулі. У наступному кроці ми це виправимо!
Примітка від перекладачів: Під час підготовки цього уроку ми не зіткнулися із ефектом "картографічних фрагментів" після завантаження. Карта одразу завантажується рівномірно, потрібно лише відрегулювати масштаб. Проте ми залишили цю частину, на випадок, якби цей ефект знову виник.
Крок 4: Додавання нових слайдів
Натисніть кнопку "Add Slides" (Додати слайди) у лівій частині екрана. У полі "Search for a location" (Пошук місцезнаходження) введіть місто або область позначені на вашій карті. При цьому масштаб міста або всієї області автоматично збільшиться, а ефект "фрагментів" зникне. Проте, ви можете й вручну налаштовувати масштаб відповідно до ваших побажань.
Примітка: StoryMap JS може знадобитися деякий час щоб завантажити вашу карту. Перед попереднім переглядом додайте принаймні чотири точки (слайди) на карту, щоб StoryMap JS встигла опрацювати географічно прив'язану карту.
Тепер додайте ще один новий слайд і введіть нове місце розташування або географічні координати в поле "Search for a location" (Пошук локації). Ви можете легко отримати географічні координати будь-якої локації за допомогою Google Map або іншого вебсайту, наприклад, Latitude and Longitude Finder чи GPS Coordinates, які підтримують пошук кирилицею.
Потім ці географічні координати вам потрібно вставити в поле "Search for a location" (Пошук локації) у StoryMap JS. Зверніть увагу, що географічні координати потрібно подати у полі пошуку в долях градусів (тобто, подається ціла частина градусів, а після коми, мінути і секунди, переведені у градуси. До прикладу, візьмемо географічну широту міста Запоріжжя 47°50′16″. Щоб перевести її у долі градусів виконуємо обчислення 47+50/60+16/3600, і отримуємо 47.837778. Аналогічно обчислюємо й довготу). Додайте "lat:" (без лапок) перед широтою і "lon:" перед довготою таким чином:
Примітка: Між символом двокрапки після lat: і lon: не повинно бути пробілів, а між lat: і lon: обов’язково повинна бути кома, в іншому випадку StoryMap JS не буде зчитувати географічні координати.
Крок 5: Додавання контенту та медіа-елементів до кожної локації (слайду) в StoryMap JS
Формат StoryMap JS акцентує увагу на локації і просторовому охопленню вашого наративу. Кожен слайд в StoryMap JS пов'язаний з місцем на карті, із зображенням чи іншим медіа-об'єктом (URL-адресою відео або аудіо), на який ви можете зробити посилання або завантажити.
У розділі "Media" (Медіа) вашого слайда ви можете додати медіаоб'єкти, завантаживши зображення з вашого комп'ютера або ввести URL-адресу відео (наприклад, відео з відеохостингу Youtube) чи аудіофайлу (наприклад, mp3, wav) в Інтернеті. Крім того, ви можете вказати джерело вашого медіафайлу та додати підпис у полях "Credit" (Авторство) та "Caption" (Додаткова інформація) на кожному слайді. Необхідно використовувати зображення та медіа дотримуючись авторських прав.
Продовжуйте додавати нові слайди і локації на ваш смак, додаючи заголовки, зображення, інформацію про авторство і описи, які відповідають задуму вашої інтерактивної карти.
З додаванням нових точок на карту, ви зможете перевірити, чи збігаються точки на вашій карті з містами чи географічними точками, які ви будете наносити, а отже наочно побачити, наскільки точною є ваша карта з географічною прив'язкою.
Одним з інструментів StoryMap JS є персоналізовані налаштування (описані в Кроці 6, нижче), що дозволяє перемикатися між режимами редагування і попереднього перегляду (Edit and Preview) після кожної внесеної зміни. Не забувайте регулярно зберігати свою роботу за допомогою кнопки "Save" (Зберегти) розташованої у верхньому лівому куті.
Крок 6: Налаштування інтерактивної карти
Видалення ліній маршруту між точками
Створивши кілька слайдів, у попередньому перегляді ви побачите, що слайди з'єднані між собою пунктирними лініями. Проте, можливо, у вашому наративі такі лінії не передбачені.
Щоб усунути їх, натисніть кнопку "Options" (Параметри). Потім виберіть у розділі "Treat As" (Обробляти як) виберіть "Image" (Зображення), ця дія видалить всі лінії маршруту між точками.
Налаштування піктограми локацій
Ще однією перевагою StoryMap JS є можливість завантажувати власні піктограми і додавати їх до вашої інтерактивної карти. Кожну піктограму потрібно завантажити окремо для кожної точки (слайду), що також дає вам можливість створити окрему відмітку для однієї або декількох точок.
Для цього виберіть "Marker Options" (Параметри позначок) в правому нижньому куті екрана і завантажте підходяще зображення для вибраної відмітки. Використовуйте файл формату PNG з прозорим фоном. Щоб знайти відповідний файл, використайте інструмент пошуку зображень. Рекомендуємо використовувати зображення або піктограми з відповідною ліцензією Creative Commons (ліцензії Creative Commons надають усім, від індивідуальних авторів до великих установ, стандартизований спосіб надання публічного дозволу на використання їхніх творчих робіт відповідно до закону про авторське право).
Попередній перегляд та збереження змін
Якщо ви хочете переглянути внесені зміни, перейдіть на вкладку "Preview tab" (Попередній перегляд). Якщо ви задоволені результатом вашої роботи, не забудьте натиснути кнопку "Save" (Зберегти).
Підсумки
Ось ми й підійшли до завершення нашого уроку. Вміння прив'язувати карти до місцевості дозволяє перенести історичну картографію у сучасний контекст і відкрити нові можливості для дослідження історичних даних. Ми заохочуємо вас подумати про те, як ви можете використовувати StoryMap JS для візуалізації географічно прив'язаних карт на заняттях, оскільки це чудова вправа для покращення розуміння студентами географічних і картографічних методів, а також ролі простору і місця в історичному мисленні. У цьому уроці ми продемонстрували вам, як публікувати і налаштувати вашу географічну карту за допомогою StoryMap JS. Існує кілька інших варіантів публікацій географічних карт онлайн, у тому числі ArcGIS Online, MapBox або більш професійні інструменти, такі як Leaflet (який, до слова, розробив українець Володимир Агафонкін), для створення користувацьких вебкарт, або QGIS, для публікації карт з QGIS в Інтернеті.
Про авторок
Еріка Гейз, бібліотекарка цифрового навчання в університеті Вілланова. Міа Партлов, бібліотекарка з обміну ресурсами в університеті Північної Кароліни.
Переклад українською: Юлія Голубінка, доцентка кафедри картографії та геопросторового моделювання, Інституту геодезії, Національного університету "Львівська політехніка", к.т.н. Софія Голубінка, студентка Львівського національного університету імені Івана Франка
Переклад рецензували: Марія Мелешко-Судьїна, аспірантка, Центр сучасної та цифрової історії в Університеті Люксембурга Орися Віра, PhD, викладач кафедри історії в Українському Католицькому Університеті
Рекомендоване цитування: Гейз, Еріка та Партлов, Мія, "Публікація карти з географічною прив’язкою за допомогою KnightLab’s StoryMap JS," Programming Historian, переклали Юлія Голубінка та Софія Голубінка, Посібник з цифрової історії, 2024. DOI: https://doi.org/10.69915/dh003
Last updated
