A modern, responsive web application that allows users to interact with maps, search locations, and manage markers. Built with React, Leaflet, and Tailwind CSS.
- 🗺️ Interactive map with click-to-add markers
- 🔍 Location search functionality using OpenStreetMap's Nominatim API
- 🌓 Dark/Light mode toggle with system preference detection
- 🎯 Marker management (add/remove)
- 📱 Fully responsive design
- 💾 Persistent dark mode preference
- React + Vite
- React Leaflet for map integration
- Tailwind CSS for styling
- OpenStreetMap for map tiles and geocoding
- Clone the repository:
git clone [your-repo-url]
cd interactive-map- Install dependencies:
npm install- Start the development server:
npm run dev- Adding Markers: Click anywhere on the map
- Removing Markers: Click on a marker and use the "Remove Marker" button
- Searching: Use the search bar to find locations
- Dark Mode: Toggle using the button in the top-right corner
- react
- react-dom
- react-leaflet
- leaflet
- tailwindcss
- @vitejs/plugin-react