I Built an Open-Source SVG Map Library with 212+ Maps 🌍

#programming #showdev #webdev

I'm excited to share svg-world-maps v1.0.1 a lightweight, zero-dependency SVG map library for modern JavaScript applications.

What started as a project to make SVG maps easier to use has grown into a library featuring 212+ maps, including a world map and 211 country and regional maps.

🚀 What's inside?

🌍 212+ Maps: World, USA, Germany, Japan, Afghanistan, Brazil, and many more.
⚡ Zero Dependencies: Generate SVG maps without adding runtime dependencies.
🛠️ Framework Agnostic: Works with React, Next.js, Vue, Svelte, Angular, and vanilla JavaScript.
📦 Tree-Shakeable: Include only the maps your application needs.
🖱️ Interactive Features: Hover effects, native tooltips, labels, and click handling through data attributes.
💙 TypeScript Ready: Strict type definitions included out of the box.

💻 Get started

Install the package using your preferred package manager:

npm install svg-world-maps

Then generate your first map:

import { createMap } from "svg-world-maps";

const worldMap = createMap("world", {
  background: "#e6f3ff",
  borders: "#2c3e50",
  hoverColor: "rgba(59, 130, 246, 0.3)",
  showTooltip: true,
  showLabels: true,
  size: "lg",
});

export default function App() {
  return (
    <div dangerouslySetInnerHTML={{ __html: worldMap }} />
  );
}

That's it! You can generate an SVG map with just a few lines of code and integrate it into your existing UI.

🗺️ Add only the maps you need

To keep your production bundle lightweight, the world map is included by default. You can add other maps on demand using the CLI.

npx add-map usa
npx register-map

This makes it easier to work with country and regional maps without importing everything into your application.

🔗 Explore the project

GitHub: https://github.com/homayounmmdy/svg-world-maps
npm: https://www.npmjs.com/package/svg-world-maps
Documentation: https://svg-world-maps.vercel.app/

🤝 I'd love your feedback!

If you work with dashboards, data visualization, analytics, or interactive interfaces, I'd love to hear your thoughts.

What features would you like to see in an SVG map library?

Contributions, feedback, and GitHub stars are always appreciated!

Built with ❤️ by an independent developer.

DEV Community