A powerful interactive mapping application built with Next.js, Leaflet, Tailwind CSS, and Dexie.js. This project allows users to draw shapes, place markers, calculate distances, switch base maps, view weather-based heatmaps, export data, and retrieve information about the selected geographic area.
You can view the live version here:
- Draw shapes (polygons, polylines, circles) on the map
- Place and Delete markers
- Store all shapes and markers using Dexie.js (IndexedDB)
- View saved shapes and markers even after page refresh
- Get the user's current geolocation
- Pan/zoom controls
- Move to specific coordinates
- Calculate distance between two selected points
- Display distance in kilometers
- Switch between multiple base maps (street, satellite, terrain, etc.)
- Weather-based heatmaps
- Toggle shape layers
- Customizable overlay layers
- View information about the area currently under the cursor or viewport
- Export shapes, markers, or map state
- Download data as JSON
- Clean, responsive UI
- Custom controls styled using Tailwind
- Next.js – App framework
- React Leaflet / Leaflet.js – Map engine
- Dexie.js – Local database (IndexedDB wrapper)
- Tailwind CSS – UI styling
- TypeScript – Type-safe development
npm installnpm run devShapes and markers are stored locally using Dexie.js:
- Drawn shapes are saved automatically
- Markers persist between sessions
Distance between two points is calculated using the Haversine formula and displayed in a custom UI panel.
- Weather overlays (temperature, wind, rain, etc.)
- Heatmaps based on selected datasets
Users can:
- Switch maps
- Toggle layers
- View heatmaps
- Export data
- Inspect region information
You can export:
- All shapes
- All markers
- The full map state (JSON)
Ensure you are running a patched version of Next.js due to CVE-2025-66478. Recommended:
npm install next@latest