A dynamic web application built with Vue 3 and TypeScript that allows users to mark and manage locations on an interactive map. Perfect for creating personalized maps with custom markers, descriptions, and categorization.

• 🌓 Dark/Light theme support
• 🌐 Multi-language interface (DE/EN/PL)
• 📍 Custom markers with various icons and colors
• 📝 Detailed location descriptions with URL support
• 📱 Fully responsive design
• 💾 Local data persistence (IndexedDB)
• 📤 Export data to CSV
• 🖱️ Draggable markers with real-time updates
• 🗺️ OpenStreetMap integration

1. Adding a Location

   • Click the "Add Point" button or double-click on the map
   • Fill in the location details (name, description, URL)
   • Choose an icon and color
   • Click Save

2. Managing Locations

   • Click on markers to view details
   • Use the sidebar to browse all locations
   • Drag markers to update positions
   • Export data using the CSV export feature

3. Customization

   • Toggle between light and dark themes
   • Change the interface language (DE/EN/PL)
   • Choose from various marker icons and colors

• Vue 3 - Progressive JavaScript Framework
• TypeScript - JavaScript with syntax for types
• Vite - Next Generation Frontend Tooling
• Tailwind CSS - Utility-first CSS framework
• Leaflet - Leading open-source JavaScript library for mobile-friendly interactive maps
• IndexedDB - Low-level API for client-side storage

• Node.js (v16 or higher)
• npm or yarn

1. Clone the repository

   git clone https://github.com/sevisilex/map-points-manager.git

2. Install NPM packages

   npm install

3. Start the development server

   npm run dev

4. Build for production

   npm run build

• Leaflet for the amazing mapping library
• OpenStreetMap for providing map data
• Google Material Icons for the icons
• StackBlitz for providing the online IDE and hosting

Distributed under the MIT License.

If you're happy with this project, consider buying me a coffee! 💕☕

⭐️ Star this repository if you find it helpful!