Mapora is a map-based location management application that enables users to save their favorite locations, add notes, and categorize them under different types such as "Want to go," "Travel plans," and "Favorites." Users can interact with a map to add, view, and delete saved locations. The app features a modern, responsive UI, making it accessible on various screen sizes.
- Desktop View
- Mobile View
-
Map Interaction:
- Add locations directly by clicking on the map.
- Save locations with notes and categorize them.
- View all saved locations and navigate to them.
-
Responsive UI:
- Designed for both desktop and mobile screens.
- Sidebar adjusts dynamically based on the screen size.
-
Location Management:
- Filter saved locations by category using tabs.
- Delete saved locations from the map and tabs dynamically.
-
Locate Me Button:
- Center the map on the user's current location with a single click.
-
Frontend:
- HTML, CSS (responsive design with media queries).
-
JavaScript:
- Core functionality and event handling.
- DOM manipulation for a dynamic user interface.
-
Libraries:
- Leaflet.js for map rendering and interaction.
- Documentation: Leaflet Official Documentation
- Installation:
- CDN Installation: Add the following lines to your
<head>section in your HTML file:<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-xwE8rjbIuKeRzUVsoWqZmucw9pIXt9Aw5XQQBsmtwH0=" crossorigin="" /> <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-XQoYMqMTKnB1K4/YmgBxHu5Nht/6vltM01A3bsZxj6w=" crossorigin=""></script>
- NPM Installation: Install Leaflet using npm for better integration in modular projects:
Then import it in your JavaScript:
npm install leaflet
import L from 'leaflet';
- CDN Installation: Add the following lines to your
- Leaflet.js for map rendering and interaction.
1- Clone the repository:
git clone [email protected]:2- Open index.html in your browser to view the website.
This project is licensed under the MIT License.
You are free to use, modify, and distribute this project as long as proper credit is given to the original author.
-
Inspiration: This project was inspired by a feature demonstrated in a The Complete JavaScript Course 2024 on Udemy. In the course, the trainer used the map functionality to display running and cycling locations. I reimagined this concept and created a unique application focused on saving favorite locations with added customizations, showcasing my own skills.
-
Author Feel free to connect with me for feedback, suggestions, or collaboration opportunities.
-
LinkedIn: My LinkedIn Profile
-
GitHub: My GitHub Profile
If you find this project helpful, don’t forget to give it a ⭐ on GitHub!