Олександр Мацібора. Веб-ГІС локацій зйомок туристських відео на платформі YouTube, розроблена засобами Quasar Framework та MapLibre GL JS

“Подорожі Юліуса” — веб-ГІС застосунок, головною метою розробки якого є динамічне відображення місць фільмування YouTube відео. Потреба в такому інтерактивному інструменті виникає через те, що автор каналу часто знімає декілька відео про різні мікрорайони одного і того ж міста для повноти уявлення про населений пункт. А також, веб-карта — це значно зручніший і більш вдалий спосіб візуалізації просторово координованої інформації ніж звичайний плейлист на YouTube.

Використані фреймворки і бібліотеки:

• Quasar Framework (на основі Vue.js). Окрім підтримки Vue3 з Composition API – Quasar Framework забезпечує повноцінну імплементацію Google Material Design в програмну логіку Vue.js. В результаті, ефективне управління даними на фронтенді поєднується із готовими до використання кросс-браузерними веб-компонентами. Два з яких варті особливої уваги:
  1) QSkeleton — зазвичай використовується як тимчасовий візуальний контент, який відображається до повного завантаження справжніх даних з REST API (списки, таблиці і т.п.)
  2) QIntersection — ефективний компонент для відображення великих обсягів даних, оскільки в DOM-дерево завантажуються лише видимі елементи довгих списків чи таблиць в області прокручування
  3) Pinia — сховище даних веб-ГІС застосунку, яке використовується як “єдине джерело правди” і для списків, і для карти одночасно
• MapLibre GL JS — сучасна картографічна бібліотека, була обрана завдяки підтримці WebGL за замовчуванням, що гарантує швидкість та ефективність роботи навіть на мобільних пристроях, а це було визначальним для проекту
• Lodash.js — допоміжна бібліотека для сортування, фільтрування та агрегації масивів (чи колекцій)
• Moment.js — одна з найбільш популярних JavaScript бібліотек для маніпуляцій даними дати і часу

Основні функції веб-ГІС застосунку:

• більше ніж 90 маркерів на карті — більше ніж 90 відео на YouTube
• багатомовний інтерфейс — доступна підтримка 5 мовами (за винятком географічних назв)
• 5 растрових базових карт, провайдерами яких виступають OSM, ESRI та Stadia Maps
• прямі посилання на YouTube відео в спливаючих підказках маркерів
• “живий” пошук по назвам населених пунктів (трьома мовами)
• адаптивний дизайн — підтримка повної функціональності на мобільних пристроях

Заходи з оптимізації швидкодії:

• найбільш ефективним способом додавання спливаючих підказок із фото до базових маркерів “maplibregl.Marker()” є їх прив’язка до “onclick” подій на карті; що дозволить уникнути завантаження всіх спливаючих підказок з усіма сотнями зображень одночасно у веб-браузері
• наполегливо рекомендується використовувати сучасні формати зображень “.webp”, які зменшують розмір файлів і підвищують швидкодію
• встановлення точних розмірів зображень у спливаючих підказках “maplibregl.Popup()” замість адаптивного стилю заощаджує ресурси веб-браузера, які не будуть використовуватись на додаткові динамічні обчислення під час рендерингу
• додатковим способом оптимізації може бути налаштування параметрів кешування у відповідях HTTP-запиту “Cache-Control: max-age=2592000” (60 секунд * 60 хвилин * 24 години * 30 днів = 2592000 секунд)

Розчарування:

• MapLibre GL JS не підтримує відображення geoJSON шару у вигляді базових маркерів “maplibregl.Marker()”; є лише можливість створити власний символ у форматі .png або додавати базові маркери в циклі .forEach((marker) => {...})
• MapLibre GL JS не підтримує кластеризацію базових маркерів “maplibregl.Marker()”; лише для точок (тип шару: “circle”) або власних маркерів (тип шару: “символ”)

Веб-ГІС доступна за посиланням: https://julius-rou.com