Everything you need. Nothing you don't.
A batteries-included SVG map library designed for modern web development.
Massive Map Library
212+ SVG maps out of the box — World, USA, Germany, India, Brazil, Europe, Canada, and many more. All lightweight, pure SVG output.
Interactive & Clickable
Built-in hover tooltips, region labels, and click support via data-code and data-name attributes.
Framework Agnostic
Works seamlessly with React, Vue, Svelte, Vanilla JS, and more. Full TypeScript support with zero runtime dependencies.
Fully Customizable
Control every visual — background, borders, hover colors, tooltips, labels, and 8 preset sizes or a custom scale factor.
Tiny Bundles
Add only the maps you need via npx add-map. Keep your bundle small and lean — no bloat.
One Simple API
One function to rule them all — createMap(). That's it. Generate stunning maps with a single call.
Build interactive maps in seconds.
One function call. A handful of options. Instant beautiful SVG maps with tooltips, labels, hover effects, and click handling — ready to drop into any project.
- ✅ Tooltips & labels built-in
- ✅ Click handlers via data attributes
- ✅ 8 preset sizes + custom scaling
- ✅ Full TypeScript support
import { createMap } from "svg-world-maps";
const map = createMap("world", {
background: "#e6f3ff",
borders: "#2c3e50",
hoverColor: "rgba(6, 182, 212, 0.3)",
tooltip: true,
showLabel: true,
size: "lg",
});
// Drop into React, Vue, Svelte, or vanilla JS!
document.getElementById("map")!.innerHTML = map;
Ready to build amazing maps?
Get started in less than a minute. Open source, MIT licensed, and loved by developers worldwide.