SnapMap is a premium, client-side interactive map generator built on React, D3.js, TopoJSON, and geoBoundaries APIs. It gives developers, designers, and cartographers the power to generate, customize, and export highly precise vector maps down to local administrative levels.
Unlike standard map generators, SnapMap supports deep multi-level drill-downs: Global (World) ➔ Country (ADM1 - States/Provinces) ➔ State (ADM2 - Districts/Counties/Departments).
To track community engagement, we utilize real-time visual counters directly in this README.
| Metric | Badge | Description |
|---|---|---|
| Total Documentation & Repo Views |  |
Increments every time a visitor views this GitHub repository. |
| Live App Visitors & Map Sessions |  |
Tracks unique client sessions loaded on the hosted GitHub Pages site. |
| Interactive Map Exports (Estimation) |  |
Estimated download tracking (increments based on unique client export requests). |
Deploy and customize maps immediately:
👉 Live Hosted Application
- 🌐 Projections & Coordinate Systems: Toggle between Equirectangular, Mercator, Orthographic (Globe), and Albers Equal Area projections on the fly.
- 🔍 Deep Hierarchical Drill-down:
- Level 0 (World): View global datasets with responsive country bounds.
- Level 1 (Country/ADM1): View states, provinces, or regions (e.g. Bavaria in Germany, Karnataka in India).
- Level 2 (State/ADM2): View districts, departments, or counties (e.g. San Francisco County in California).
- 🗺️ Geopolitically Tailored Views: Choose specific contested border variants (India, China, Russia, Morocco view) or filter by Continent/Region.
- 🖌️ Interactive Paint Bucket Tool: Paint individual country or district polygons with custom color overrides by clicking directly on the canvas.
- 📐 Client-Side Boundary Simplification: Dynamically reduce coordinate vertices using the Douglas-Peucker or Visvalingam-Whyatt algorithms, reducing exported SVG weights by up to 90% without breaking topographies.
- 🏷️ Adaptive Labels: Toggle text labels with font styling, sizing, and Adaptive Fitting that adjusts text size dynamically to stay within polygon bounds (hides microscopic labels).
- 💾 High-Res Exports: Export your cartographic creation to a clean, production-ready SVG (vector) or a 2x scaled PNG for crisp high-dpi presentations.
- Framework: React 19 (Functional Hooks & States)
- Bundler: Vite 8 (Hot Module Replacement)
- Map & Projections Engine: D3.js (d3-geo, d3-zoom)
- Vector Data Formats: TopoJSON & GeoJSON (simplified client-side)
- Boundaries Sources: amCharts Geodata (World) & geoBoundaries API (Administrative Levels 1 & 2)
To run the project locally on your machine, follow these simple steps:
git clone https://github.com/princepal-kpmg/SnapMap.git
cd SnapMapnpm installnpm run devOpen http://localhost:5173/ in your browser to view the application.
npm run buildCompiled production-ready assets will be generated in the dist/ folder.
This project is configured to build and deploy to GitHub Pages automatically via GitHub Actions.
- Create a repository on GitHub named
SnapMap. - Push your local files to GitHub (see the step-by-step instructions below).
- On GitHub, navigate to Settings ➔ Pages.
- Under Build and deployment ➔ Source, select GitHub Actions.
- Once selected, the workflow defined in
.github/workflows/deploy.ymlwill automatically build and publish the app to your custom URL.
This project is open-source and available under the MIT License. Boundary datasets belong to their respective creators (geoBoundaries and amCharts).