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.
This is add on Map for my Oregon Hikes Project.
- React
- Mapbox GL JS
- Node.js
- JavaScript
- HTML/CSS
-
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.
- A Mapbox API access token. You can sign up for free at Mapbox.
-
Clone the repository.
git clone https://github.com/rbrown29/TrailMapReact.git cd trail-map -
Install dependencies:
npm install # or yarn install -
Create a
.envfile in the root of the project and add your Mapbox access token:REACT_APP_MAPBOX_ACCESS_TOKEN=your-access-token
-
Start the development server:
npm start # or yarn start -
Open http://localhost:3000 to view it in your browser.
-
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.