This project visualizes hiking trails using Mapbox GL JS. It includes features like real-time distance and elevation updates as the camera moves along the hiking trail.

Technologies and Links

• React
• Mapbox
• Node.js
• JavaScript
• HTML/CSS
• Vite
• Turf.js

Project Structure

/public
  ├── coastline.geojson
  ├── oceans.geojson
  ├── Trails.json
/src
  ├── components
  │   ├── map.jsx
  │   ├── MapContainer.jsx
  │   ├── SideBar.jsx
  ├── helpers
  │   ├── loadHandler.js
  │   ├── styleLoadHandler.js
  ├── hooks
  │   ├── useTrails.js
  ├── utils
  │   ├── cameraUtils.js
  |   ├── haversineDistance.js
  |   ├── mapboxAccessToken.js
  ├── App.jsx
  ├── App.css
  ├── main.jsx
  └── index.css

Features

• Real-time Distance Tracking: As the camera moves along the trail, the distance covered is calculated and displayed.

• Elevation Display: The elevation at each point is shown in a popup.

• Mapbox Integration: Utilizes Mapbox's terrain and satellite streets layers for a rich visual experience.

How it Works

• Map Initialization: The map is initialized with Mapbox's satellite streets style, centered on the starting point of the trail.

• Animation: The camera moves along the trail, showing the current position's altitude and the distance covered so far.

• Distance Calculation: The distance is calculated using the Haversine formula, which takes into account the curvature of the Earth.

• Side Panel: The side panel displays the trail's name, click on the trail to start the animation.

Haversine formula

Built With Mapbox

3D Terrain Elevation Map was derived from the following articles and added custom code.

• Query terrain elevation

• Building Cinematic Route Animations with MapboxGL

Preview

Trail Walkthrough