Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gitericsson/mapty
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.
https://github.com/gitericsson/mapty
api css3 dom-manipulation javascript jonas-schmedtmann leaflet-api mapty mapty-application mapty-challenge oop-in-javascript openmeteo-api
Last synced: 6 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/gitericsson/mapty
- Owner: gitEricsson
- Created: 2024-04-09T18:49:05.000Z (7 months ago)
- Default Branch: master
- Last Pushed: 2024-06-17T12:02:43.000Z (5 months ago)
- Last Synced: 2024-06-17T13:29:07.535Z (5 months ago)
- Topics: api, css3, dom-manipulation, javascript, jonas-schmedtmann, leaflet-api, mapty, mapty-application, mapty-challenge, oop-in-javascript, openmeteo-api
- Language: JavaScript
- Homepage: https://ericsson-mapty.netlify.app/
- Size: 5.55 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Mapty
## Table of contents
- [Overview](#overview)
- [About](#about)
- [The Challenge](#the-challenge)
- [Features](#features)
- [Updates](#updates)
- [Screenshots](#screenshots)
- [Links](#links)
- [My process](#my-process)
- [Built with](#built-with)
- [Author](#author)
- [Acknowledgments](#acknowledgments)
## Overview
### About
With the fitness tracking software Mapty, users can annotate and log their workouts on an interactive map powered by the [Leaflet API](https://leafletjs.com/index.html). 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](https://open-meteo.com/) 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
### Links
- Code URL: [Github Repo here](https://github.com/gitEricsson/Mapty)
- Live Site URL: [Live site here](https://ericsson-mapty.netlify.app/)
## My process
### Built with
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- JavaScript
- MVC Architecture
- AJAX
- API
## Author
- Website - [Ericsson Raphael](https://github.com/gitEricsson)
- LinkedIn - [@ericsson](www.linkedin.com/in/ericssonraphael)
- Gmail - [@ericsson]([email protected])
## Acknowledgments
[Jonas Schmedtmann](https://github.com/jonasschmedtmann)