The Inca Trail 3d interactive tour is a map-based website that can be used to view the trail in 3D. This article will show how a 3D interactive tour of the Inca Trail was created using MapboxGL JS & Mapbox Studio, and how it can be used as an educational tool for people to learn about this historical site.
We began our script by setting GeoJson variables directly in our page, one for the trail (blue line), another for waypoints (blue circles) and another for tracking taken trails (blue line on top-right map -also developed using MapboxGL Js-).
The next step was to setup and center our first main 3D map and second top-right 2D map to fit precisely the trail bounds, with perfect coordinates, bearing, pitch and zoom.
Our first main 3D map needed to look the closest to reality (as if we looked from above Inca Trail in real world). We used Mapbox Studio to create a new 3D base map by activating 3D terrain feature which provides high-quality Digital Elevation Model -acquired by Mapbox from satellite data-, we then used satellite imagery as a base layer for our base map.
Mapbox Studio allows to edit satellite imagery layer, so we adjusted furthermore color contrast and luminosity. We used a ready set dark map style (dark-v10) by Mapbox for the second top-right map: https://www.mapbox.com/maps/dark
Also, we thought that adding sky and fog to our 3D map is a good idea, giving it a more realistic impression, so we added a sky layer which is included in Mapbox layers styles. We also added fog using setFog with [-1, 1.5] as a range, white as color and 0.1 as horizon-blend.
We used AddSource and AddLayer to add our previously declared GeoJson data to both maps.
We used JQuery-Confirm (3.3.4) to display left panels with opening/closing animation, and also because it is more handy since it allows declaring dialog variables with many options such as closeIcon (Boolean), theme (String), title (String), bgOpacity (from 0 to 1), container and animationSpeed. We needed to edit the CSS in order to get automatically a ready setup left panel.
The first 3D map starts with a smooth fly fitting it to the Inca trail extents with a bearing of -107 degree, a pitch of 42 and a zoom of 11.8, centering it to -72.44323932240363 longitude and -13.219968529326835 latitude. The second map starts with fitting the bounds of the Inca trails using fitBounds as previously mentioned.
We decided to let user choose between scrolling up/down or clicking up/down arrows to fly between Inca trail waypoints, starting from Piskacucho to Machu Picchu:
We used a simple DIV container which includes: the first 3D map div, another DIV container with a scroll overflow containing a div with a height of 1000vh, the second map div with a fixed position and the two arrow buttons with fixed position.
This allowed us to have a transparent scrollable div on the top of the main 3D map, with a fixed second map and the two arrow buttons. Their position is fixed in order not to disappear once scrolling.
We added an event listener when scrolling up or down using addEventListener(‘scroll’) calling a function that records each frame scrolled and either it was scrolled up or down.
Each waypoint was attributed a step number, Piskacucho was given step number 1, Patallacta was given step number 2 etc.. So we could easily start writing conditions as follows: If user scrolls down and step variable is 0, then the map needs to flyTo step number 1 which is Piskacucho. Once the map stops moving (meaning that user reached Piskacucho) the step variable needs to be changed to 1. We used for this map.on('moveend') event that fires once a move action stops. We also needed to disable the scrolling event listener once it has been fired, then enable it again once the move action stops in order to prevent flying instantly to two or more waypoints.
Also, we used map.on('move') event listener to fire a console.log containing actual map moving info such as zoom, bearing, pitch and centered coordinates. This was done in order to get these data while moving manually around waypoints finding the best view angle, once done, we could easily get all info in the Browser developer console log.
We disabled this developer function once we were done, we also disabled map interaction to prevent panning and zooming by user.
The second map helps
users locating themselves on this 3D visualization. We used [case, Boolean,
expression for line-opacity of Inca trail layer in order to tell the second map
to show or hide a feature on a given moment: Opacity set to 0 or 1.
Using map.on('moveend'), each step had a different setFeatureState which sets a Boolean state to our second map trail layer source. For example once the user reaches step number 3 when scrolling down, the second map is told to show the line feature number 2 (because each line has two endpoints, so the line feature number 1 connects waypoint steps 1 & 2, and line feature number 2 connects waypoint steps 2 & 3, so we need to show to user that he crossed the second line and that he reached the third step or third waypoint). The Inca trail Geojson was cut into features prior to this using QGIS 3.18 then re-exported to Geojson format.
Also, if user reaches step number 3 while scrolling up (meaning backward), the second map is told to hide line feature number 3.
IncaTrail.Vacation is the creation of FindingAwesome.com - from Alex & Luciana Awesome - the trail was originally traveled in 2012 with a handheld GPS and imagery provided from Trek team members, with supplementary imagery sourced from Shutterstock.