Oleksandr Matsibora. Web-GIS of YouTube travel videos filming locations developed with Quasar Framework and MapLibre GL JS

“Julius travelings” – is a web-GIS app, which was mainly developed to show dynamically the locations where YouTube videos were filmed. It is important to know for audience because as usual JuliusRou films several videos about different districts of the same city. And of course a map – is much better way of data visualization than traditional playlist in YouTube.

Used frameworks and libraries:

• Quasar Framework (Vue.js based). In addition to support of Vue3 with Composition API – Quasar Framework provides full implementation of Google Material Design to Vue.js programming logic. As a result, efficient data management on frontend side is combined with ready-to-use cross-browser compatible web-components. More details about 2 the most interesting of them:
  1) “Skeleton” – is usually used as a placeholder for preview of content before actual data loading (for lists, tables, etc)
  2) “Intersection” – is very efficient for rendering of huge amounts of data because the DOM tree is freed up of hidden nodes (not visible items in the lists with scrolling).
  Also, we used Pinia store as a “single source of truth” to keep all spatial data of application.
• MapLibre GL JS – was mainly our choice as a modern cartographic library because of default support of WebGL, which means that it is fast end efficient even on mobile devices, what was crucial for the project
• Lodash.js – is a supporting library for sorting, filtering and aggregation of the arrays (collections)
• Moment.js – one of the most popular JS library for date and time formatting

The main features of application:

• 95 markers on the map – 95 videos on YouTube
• multilingual user Interface – 5 languages are available (except geographical names)
• 5 raster layers, including OSM, free tiles of ESRI and Stadia Maps
• direct links to YouTube videos in popups
• live search by cities (all languages), search by countries
• responsive design – fully featured on mobile devices

Useful tips:

• the most efficient way to add popups with images to default markers “maplibregl.Marker()” is to listen to “onclick” events and render popup only for selected feature; it will prevent loading of all(!) popups with all(!) images to the client at once
• highly recommended to use modern images formats as “.webp” which reduce images size and improve performance
• setting of explicit width and height of images in “maplibregl.Popup()” elements instead of responsive styles saves web browser from additional calculations during rendering
• additional layer of optimization could be configured by setting cache parameters in HTTP response headers for static content “Cache-Control: max-age=2592000” (60 seconds * 60 minutes * 24 hours * 30 days = 2592000 seconds)

Disappointments:

• MapLibre GL does not support rendering of geoJSON layer with default markers “maplibregl.Marker()”; there are options only to create our own .png icon or to add default markers to map in a loop .forEach((marker) => {...})
• MapLibre GL does not support clustering of default markers “maplibregl.Marker()”; only for points (layer type: “circle”) or custom markers (layer type: “symbol”)

A huge amount of positive comments in several social networks and stable quantity of 1.8-2k unique visitors per month could be considered as a reliable evidence of the great potential of web-GIS even in such social media field.

Web-GIS app: https://julius-rou.com