https://github.com/hananemirzaee/mapty-project
An interactive workout tracker app using Leaflet.js and Geolocation API to log running and cycling workouts on a map. Built with HTML, CSS, and JavaScript as part of an OOP learning project.
https://github.com/hananemirzaee/mapty-project
css geolocation-api html javascript leaflet-map oop-in-javascript
Last synced: about 1 month ago
JSON representation
An interactive workout tracker app using Leaflet.js and Geolocation API to log running and cycling workouts on a map. Built with HTML, CSS, and JavaScript as part of an OOP learning project.
- Host: GitHub
- URL: https://github.com/hananemirzaee/mapty-project
- Owner: hananemirzaee
- Created: 2025-05-08T09:33:23.000Z (5 months ago)
- Default Branch: master
- Last Pushed: 2025-05-08T12:32:42.000Z (5 months ago)
- Last Synced: 2025-05-12T04:38:41.685Z (5 months ago)
- Topics: css, geolocation-api, html, javascript, leaflet-map, oop-in-javascript
- Language: JavaScript
- Homepage: https://mapty-hanane.netlify.app/
- Size: 1.88 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🗺️ Mapty – Workout Tracker with Geolocation
Mapty is an interactive workout tracking application that allows users to log running and cycling workouts by clicking on a map. Built with HTML, CSS, and JavaScript, it utilizes the Leaflet library for map rendering and the Geolocation API to determine user location. This project was developed as part of the "Object-Oriented Programming (OOP)" section of Jonas Schmedtmann's JavaScript course on Udemy.
## ✨ Features
Geolocation Integration: Automatically detects and centers the map on the user's current location.
Workout Logging: Click on the map to add a new workout with details like distance, duration, and cadence or elevation.
Interactive Map: Workouts are displayed as markers on the map with popups showing workout details.
Workout List: A sidebar lists all workouts with relevant information.
Data Persistence: Workouts are stored in the browser's local storage, ensuring data remains after page reloads.
## 🛠️ Technologies Used
HTML5: Structuring the application.
CSS3: Styling and layout.
JavaScript (ES6+): Application logic and interactivity.
Leaflet.js: Open-source JavaScript library for mobile-friendly interactive maps.
Geolocation API: To fetch the user's current location.
Local Storage API: For storing workout data persistently in the browser.