This storymap ‘Vosakos geotrail’ is a part of the Psiloritis geopark storymaps website and combines most of the elements I have learned the previous year.
It is an interplay and interconnection of a WordPress website, with a Pano2VR virtual tour and a Leaflet map. The interactions are made using javascript.
The Vosakos folds 3D model
As for the assets used, other than the photographic spheres and videos there is a 3D asset as well, loaded in a Three js scene that can be viewed in VR mode by using WebXR API. This asset was created by a lidar scanner and it is the main geosite and attraction of the trail and can be found in its standalone viewer at https://tours.panotours.gr/giltf-vosakos/. The asset itself is a 23Mbytes glb 3d object so it can take a while to load when the internet connection is slow.
The map and the spatial data
The map can be found here https://tours.panotours.gr/storymaps/vosakos
All the data are stored in a Posgis enabled Postgresql database. These data are fed to the leaflet map by converting them to geojson objects by using php that connects to the database.Data filtering can either occur in the geojson convertion or by using Leaflet javascript API, or both.
The line that represents the trail is a z enabled feature class, where the z values was derived from a DTM of Crete. Each vertex of the line has a z value as well that represents this vertex point altitude. From these xyz values, in the Leaflet map, the altitude profile is produced dinamically by calculating the distance of each vertex to the next and the altitude and the distance from the start is plotted in a chart.js line chart where it can be seen at the top right of the map in wide screens. This happens once when the map is loaded.
There is also a Leaflet function that will plot a part of the trail when called, on top of the trail with this subpart having more weight and different color in order to be visible. This function is called when the user is scrolling down the story map in order to visualise the trails parts better. This will trigger when certain div id is reached by the page scrolling and is accomplished by using waypoints.js library.
The virtual tour
The virtual tour is a Pano2VR tour with a custom template that more or less I used to many of my projects. It features deep linking capabilties in order to give the users and other applications the opportunity to bookmark a specific field of view of a specific panorama. The tour have a number of aerial panoramas that give a better look to the route from above and each of these panoramas have the route drawn onto them for easier navigation. The point of interest are enumarated and follow the logic of the maps that exist in the info signs and the leaflets.
