/mapty-app

A nice map application using Geolocation API, Leaflet an open-source JavaScript library and using the local storage API workout data persist across multiple page reloads.

Primary LanguageJavaScript

Mapty App

A nice map application where you can add your workouts.

Table of contents

Overview

The app

Users should be able to:

  • View the optimal layout depending on their device's screen size
  • See their current location at first
  • By clicking on the map open a new workout form
  • Choose the workout type
  • Create list of workouts by filling values
  • Create a nice marker on the map
  • Move to map position by the clicking forms
  • Access the same data when they refresh the page.

You can check the flow chart

Screenshot

Built with

  • Semantic HTML5 markup
  • CSS custom properties
  • Flexbox
  • CSS Grid
  • JavaScript
  • Geolocation API

What I learned

I learned using Geolocation API, Leaflet an open-source JavaScript library for mobile-friendly interactive maps for the marker exct and using the local storage API workout data persist across multiple page reloads.

Additional Feature Ideas

  • Ability to edit a workout
  • Ability to delete a workout
  • Ability to delete all workouts
  • Ability to sort workouts by a certain field

Useful resources

  • Leaflet Site - This helped me for create nice popups and markers by looking at the options..

Author