Mapty is a location-based workout tracking application designed to help users log and visualize their outdoor workout activities, such as running and cycling, on an interactive map. This project leverages the power of geolocation and local storage. Mapty is a location-based workout tracking application designed to help users log and visualize their outdoor workout activities, such as running and cycling, on an interactive map. This project leverages the power of geolocation and local storage to provide a seamless experience for users to monitor and keep track of their fitness progress over time.
Key Features: Geolocation Integration: Automatically detects and logs the user’s current location using the browser’s geolocation API. Interactive Map: Displays the user's workouts directly on a map (using Leaflet.js), allowing them to visualize where each activity took place. Custom Workouts: Allows users to choose between running or cycling workouts, input key workout data (distance, duration, etc.), and logs this information. Data Persistence: Workout data is saved in the browser's local storage, ensuring that user information persists even after the page is refreshed. Custom Pop-ups: Provides dynamic pop-ups on the map to display workout details, including the type of activity, distance, and time. Responsive Design: Adaptable across various devices ensuring a smooth user experience whether on desktop or mobile. Technologies Used: HTML5, CSS3, and JavaScript for the core structure, styling, and functionality of the app. Leaflet.js: A lightweight and open-source library for rendering interactive maps. Geolocation API: Used to retrieve the user's location for logging workout positions. LocalStorage: Browser-based data storage for persisting workout details across sessions.
Inspired from project of Jonas Schmedtmann.