An Interactive Leaflet-Based Mapping Tool with Custom Tile Upload Support
The Global Map Application is an advanced, interactive mapping tool built using Leaflet.js, TypeScript, and Tailwind CSS. It enables users to:
🌎 Search for any global location
🗺️ Upload custom map tiles
📍 Automatically detect coordinates
➕ Overlay tiles accurately on a base map
The project integrates several Leaflet plugins to provide drawing, editing, and enhanced map interactions.
🔍 Global Search
Search for locations worldwide with a smooth and responsive search interface.
🗺️ Upload Custom Map Tiles
Supports formats such as .tif, .png, .jpg, and more
Automatic coordinate detection
Perfect overlay alignment via refined projection settings
🧭 Leaflet Enhancements
Includes multiple Leaflet controls and plugins:
Zoom controls
Layer toggles
Image overlays
Drawing & editing tools
Interactive popups
💨 Modern Frontend Stack
Built with:
TypeScript for type safety and maintainable code
Tailwind CSS for clean, responsive UI styling
Leaflet.js for robust geospatial visualization
🛠️ Technologies Used Core
TypeScript
Leaflet.js
Tailwind CSS
Leaflet Plugins
Leaflet Draw
Layer Controls
Search plugin
Image Overlay tools
Build Tools
Vite (if applicable—let me know and I will include it!)
🚀 Getting Started ✔️ Installation git clone https://github.com/e-maa/Map-Application.git cd global-map-application npm install
✔️ Development
Run the development server:
npm run dev
✔️ Build for Production npm run build