About This Project

Mapty is a workout-tracking app built on the browser's Geolocation API and the Leaflet mapping library. The map centers on the user's position, and clicking anywhere on it opens a form to log a running or cycling workout at that exact spot — with type-specific fields such as cadence for runs and elevation gain for rides. Each workout is pinned to the map, listed in the sidebar, and stored in localStorage so everything is restored on the next visit.

Key Highlights

  • Geolocation API and Leaflet map with a custom marker and popup per workout
  • OOP architecture: a Workout base class extended by Running and Cycling
  • Derived stats per workout type — pace for running, speed for cycling
  • localStorage persistence with complete state restore on page load

Challenges & Solutions

The interesting problems were architectural: modeling workouts as a small class hierarchy that renders both a map pin and a list entry from the same object, and restoring live class instances from the plain JSON that comes back out of localStorage.

Project Info

  • Category: Web App
  • Year: 2024
  • Status: Completed
View on GitHub

Technologies Used

JavaScript (ES6+) Leaflet.js Geolocation API localStorage