The Inca Trail 3d interactive tour is a map-based website that can be used to view the Inca Trail in a guided three dimensional experience. 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.
MapboxGL Js is a Javascript library for developing full interactive web maps. It is very powerful, flexible and easy to use. We used the latest MapboxGL Js version (2.7.0) which can be found here: https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js
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[1], bearing[2], pitch[3] and zoom[4].
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[5]
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[6]
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 did only use TurfJs (version 6) for one small function which is to define the bounding box of Geojson Inca trail layer in order to determine the fitting bounds of the second map. We used lineString, bbox and fitBounds (with a padding value of 15 for this latter).
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[7] (Boolean), theme[8] (String), title[9] (String), bgOpacity[10] (from 0 to 1), container[11] and animationSpeed[12]. 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[13] to prevent
panning and zooming by user.
The second map helps
users locating themselves on this 3D visualization. We used [case, Boolean,
feature-state][14]
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 Alex & Luciana Awesome from their adventures on the trail in 2012. The data was captured with a Garmin handheld GPS and primary imagery was provided from Trek team members, with supplementary imagery sourced from Shutterstock.