Skip to content

With the fitness tracking software Mapty, users can annotate and log their workouts on an interactive map powered by the Leaflet API. Whether you're cycling or walking, it records elevation, pace, and duration to provide you a complete picture of your fitness progress.

Notifications You must be signed in to change notification settings

gitEricsson/Mapty

Repository files navigation


Logo

Mapty

Table of contents

Overview

About

With the fitness tracking software Mapty, users can annotate and log their workouts on an interactive map powered by the Leaflet API. Whether you're cycling or walking, it records elevation, pace, and duration to provide you a complete picture of your fitness progress.

The Challenge

My goal was to recreate Jonas' Mapty WebApp from scratch and make some updates to it. It was especially taxing having to assign each weather code from the Open Meteo API to a weather icon.

Features

  • Map where user clicks to add new workout
  • Geolocation to display map at current location
  • Form to input distance, time, pace, steps/minute
  • Form to input distance, time, speed, elevation gain
  • Display all workouts in a list
  • Display all workouts on the map
  • Store workout data in the browser using local storage API
  • On page load, read the saved data from local storage and display

Updates

  • Responsive Web Design across all Devices
  • Display or hide Mobile Menu Functionality
  • Ability to edit a Workout
  • Ability to delete a Workout
  • Ability to delete all Workouts
  • Ability to sort Workouts by a certain field (e.g. distance)
  • Re-build Running and Cycling objects coming from Local Storage
  • More realistic error and confirmation messages
  • Ability to position the map to show all Workouts
  • Ability to draw lines and shapes instead of just points
  • Geocode location from coordinates (“Run in Cairo, Egypt”)
  • Display Weather data for Workout time and place

Screenshots

screenshot1 screenshot2 screenshot3 screenshot4 screenshot5

Links

My process

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • JavaScript
  • MVC Architecture
  • AJAX
  • API

Author

Acknowledgments

Jonas Schmedtmann

About

With the fitness tracking software Mapty, users can annotate and log their workouts on an interactive map powered by the Leaflet API. Whether you're cycling or walking, it records elevation, pace, and duration to provide you a complete picture of your fitness progress.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published