Mapty

 

🚧 Mapty 🟢 Completed 🚀 🚧

 

Project description 📚

This project was developed in Jonas Schmedtmann's JavaScript course, where OOP, Geolocalization API, leaflet js and localStorage were used.

Project's goal:

The user can add the workouts after selecting the workout location on the map. Only running and cycling workouts are allowed

 

What I learned

The basics to plan a WEB project.

1. USER STORIES - Description of the application's functionality from the user's perspective.

2. FEATURES - The features that I will implement according to user stories

3. FLOWCHART - Flowchart of what will be implemented in the project

 

OOP (Object-Oriented Programming)

- In this project I used OOP to organize my code structure, with classes, objects, inheritance and methods according to architecture.

 

Geolocation API

- to find user's location

 

...
 navigator.geolocation.getCurrentPosition(this._loadMap.bind(this), () => {
        alert('Could not get your position');
      });

leaflet js

to show the application map and from that the user will be able to mark the training, documentation of this library leafletjs

 

this.#map = L.map('map').setView(coords, this.#mapZoomLevel);

L.tileLayer('https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
  attribution:
    '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
}).addTo(this.#map);

localStorage

- was also used to store the client's workouts in the browser, so even if the user reloads the page, the workouts will be saved

 

localStorage.setItem('workouts', JSON.stringify(this.#workout));

Links

• Preview Site

 

My process

Built with

• HTML
• CSS
• Vanilla js
• OOP with JavaScript
• leaflet js
• API geolocalization
• LocalStorage

 

👨‍💻 Author

• Frontend Mentor
• Linkedin