Interactive Map of India

A modern, responsive web application featuring an interactive map of India with detailed state information and multiple viewing options.

Features

• Interactive State Map: Hover over states to see detailed information
• Multiple Map Styles: Switch between OpenStreetMap, Terrain, and Satellite views
• Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
• State Information Panel: Displays population, area, capital, and description for each state
• Fallback System: Automatically switches to Mumbai street data if main data fails to load
• Modern UI: Clean, professional interface with smooth animations

Technologies Used

• Leaflet.js: Interactive map rendering and controls
• D3.js: Data visualization and SVG manipulation
• Vanilla JavaScript: ES6+ modules for clean, maintainable code
• CSS3: Modern styling with flexbox and animations
• GeoJSON: Geographic data format for map features

Getting Started

1. Clone or download this repository
2. Open index.html in a modern web browser
3. The application will automatically load India state data and render the interactive map

No build process or package installation required - everything runs directly in the browser!

Usage

• Hover over states to see detailed information in the side panel
• Click on states to zoom in and focus on that region
• Use the Reset View button to return to the full India view
• Change map styles using the dropdown in the header
• Responsive design automatically adapts to your screen size

Browser Support

• Chrome/Chromium 80+
• Firefox 75+
• Safari 13+
• Edge 80+

Data Sources

• India state boundaries from geohacker/india
• Map tiles from OpenStreetMap, OpenTopoMap, and Esri
• State information compiled from various public sources

Architecture

The application follows a modular architecture:

• app.js - Main application controller and initialization
• map-renderer.js - Leaflet map management and D3 overlay rendering
• ui-controller.js - User interface state management
• data-service.js - Data fetching and caching
• styles.css - Complete styling and responsive design

License

This project is open source and available under the MIT License.