For this project, I wanted to create an interactive map about the Pacific Crest Trail (PCT). A lot of resources for the PCT are limited because the Pacific Crest Trail Association wants to limit liablity associated with the trail. For this reason, a lot of hikers have to search lots of different resources to find information. In this map, I created an opportunity for hikers to hear sounds, see sights, and learn about things associated with the PCT.

The process of creating this website started with ideation. I began the process by brainstorming what kinds of resources hikers would want out of an interactive map. I decided that hikers would want to be able to calculate their water usage and calorie intake need. In order to do this, I created the fixed counter, which tells the user the mileage, water, and calories. This feature utilizes Javascript and jQuery. I also wanted to feature the sounds of different sections in the map. This part was difficult because Chrome and Safari recently disabled the autoplay of sounds on their browsers. To overcome this, I made it so that the user had to click on the submot button with their weight, which then triggered the sound function to be able to play on scroll. I utilized Javascript to create trivia questions for each section of the trail. Other features, such as the dots and refill stations utilize jQuery to reveal the descriptions and pictures of locations. I also utilized the anime.js library to create the animated arrows on the top of the page.