Skip to main content
SimilarExport ZIP
100%

Fork of Derive India map - Open street

✓ Published1🌍 Public
NNita
Last edited Jul 28, 2025
Created on Jul 28, 2025

This interactive map of India combines Leaflet.js with a D3.js SVG overlay to display state boundaries and street-level fallback data. Users can hover over states to reveal population, area, capital, and description details in a side panel, or click to zoom into regions. The application supports multiple tile styles including OpenStreetMap, terrain, and satellite views. D3’s geoTransform projection and geoPath render GeoJSON state data from the geohacker/india repository, while the Leaflet map API handles panning, zooming, and view resets.

AI-generated description

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.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Derive India map - Open street

This interactive map overlays Indian state boundaries from a GeoJSON file onto an OpenStreetMap tile layer using Leaflet and D3 v6. The visualization renders each state as a D3-generated SVG path through `d3.geoTransform` and `d3.geoPath`, with mouseover interactions highlighting states and displaying a tooltip with the state name. The map updates state paths dynamically on zoom or view reset using Leaflet’s `zoomend` and `viewreset` events.

NNita
95% match
Loading thumbnail…

Fork of Fork of Derive India map - Open street

This interactive map of India overlays D3-rendered state boundaries onto a Leaflet map, displaying crime statistics from a local CSV when hovering over regions. Built with D3 v6 and Leaflet 1.7.1, it uses d3.geoPath with a custom projection that syncs geographic coordinates to Leaflet’s tile layer. The application includes state metadata, a fallback street network for Mumbai, and supports switching between OpenStreetMap, terrain, and satellite basemaps.

NNita
94% match
Loading thumbnail…

Derive India map - Open street

This example combines Leaflet with D3 to create an interactive map of India using OpenStreetMap tiles. Following the D3 geoPath projection, it renders state boundaries from a GeoJSON source, with states highlighted in red on mouseover while the map pans and zooms. When the primary data fails to load, the code falls back to displaying hand-drawn street segments in Mumbai, using the same Leaflet overlay and D3 geoTransform projection to keep vector paths synchronized with the tile layer during zoom events.

NNita
90% match
Loading thumbnail…

Fork of Fork of Derive India map - Open street

An interactive choropleth map visualizes crime rates per 100,000 population across Indian states and Union Territories, with hover tooltips, click-to-select, search filtering, and union territory toggling. Built with D3.js v7 for data processing and SVG rendering, it uses Leaflet for the base map, d3.geoPath for shape projection, and a d3.scaleSequential color scale. Crime data comes from a local CSV file, while state boundaries load from a GeoJSON URL.

NNita
87% match
Loading thumbnail…

Fork of Fork of Derive India map - Open street

This interactive map visualizes clean energy adoption rates across Indian states and union territories, using a green sequential color scale where darker shades indicate higher percentages. Users hover over any region to view its specific adoption rate in a side panel and tooltip. Built with D3.js v6 and Leaflet 1.7.1, the visualization layers SVG paths generated via d3.geoPath with a custom geographic projection on top of an OpenStreetMap tile layer. State boundaries come from an external GeoJSON file, while the adoption data is loaded from a local CSV.

AAmrit Adhikari
86% match
Loading thumbnail…

Fork of Derive India map - Open street

This interactive choropleth map displays crime rates across Indian states and union territories, with a color scale from yellow to red and a legend showing rates per 100,000 population. Hovering over a state reveals its specific crime rate in an information panel. The visualization combines D3.js (v6) for data parsing and geoPath rendering with Leaflet.js for map interaction and OpenStreetMap tile layers. State boundaries come from external GeoJSON data, while crime statistics are loaded from a local CSV file.

NNita
85% match
Loading thumbnail…

Fork of Fork of Derive India map - Open street

This interactive map shows crime rates for Indian states and union territories, with a yellow-to-red gradient indicating rate severity per 100,000 people. Hovering over a region reveals the state name, crime rate, and capital city in an information panel and tooltip. The visualization combines Leaflet.js for map rendering with OpenStreetMap tiles, while D3.js (v6) uses a `geoTransform` projection to overlay state boundaries from a GeoJSON file onto the map. Crime data is loaded from a CSV file and mapped to a sequential color scale using `d3.scaleSequential`.

Sskmriyaz0786@gmail.com
84% match
Loading thumbnail…

Fork of india map

This interactive visualization displays India’s administrative divisions, using distinct colors for districts and dark green highlighting on hover. It also marks state boundaries with a black stroke. The map is rendered as SVG using `d3.geoPath` with a Mercator projection, and supports zoom and pan via `d3.zoom`. District and state boundaries come from TopoJSON files, with district names and states shown as tooltips. The code also loads a CSV of Indian cities, though city markers are not rendered.

Bbindhureddy98
81% match