JavaScript | HTML | CSS

This was a group project for which we conceptualized a mobile app for Bike to Work Day Calgary. As a group, we noticed that the only map on the event's website was a screenshot from Google maps with pins on each of the event locations, so we decided an interactive, mobile-friendly map would make for a much better user experience for attendees of the event.

For this project, I was responsible for coding half of the app's individual pages, most significant of which was the interactive map itself. Using the SVG map created by my lovely group member Grace Calhoun, and icons created by my equally lovely group member Danielle Dunlop, I programmed an interactive webpage to highlight all of the pit-stops and their respective routes from the event's home base, as well as routes to the home base from various areas around the outskirts of Calgary.

This was a significant learning experience for me, as I had minimal experience working with SVGs in HTML, and I had never implemented interactivity using JavaScript. After countless hours of research and viewing online tutorials, I was finally able to get the map (mostly) working how I wanted it. I was unfortunately unable to implement a two-finger zoom in the timespan of the project, though this is a feature I intend to revisit in the near future.

Touching the icon in the bottom right of the map will bring up the legend. From here you can tap "Home Base" or "Pit Stops" to bring up the respective routes for these locations. Additionally, touching any pit stop icon on the map will also reveal the pit top's route, as well as additional information to guide the user on the day of the event.