212 Interactive SVG Maps for JavaScript – svg-world-maps

svg-world-maps is a Vanilla JavaScript library for generating interactive SVG world, country, and regional maps.

It currently contains 212 country and regional maps that can be installed individually.

Maps support native region tooltips, optional static labels, configurable colors, eight size presets, custom scaling, and region data attributes for app interactions.

Features

• World, country, and regional SVG maps.
• Optional per-map installation for country and regional data.
• Native SVG tooltips and static region labels.
• Configurable fill, border, and hover colors.
• Eight size presets plus custom numeric scale factors.
• TypeScript definitions for map configuration and geographic data.
• SVG string output for browser frameworks and server rendering.

How To Use svg-world-maps

Installation

Install the package with package managers:

npm install svg-world-maps
yarn add svg-world-maps
pnpm add svg-world-maps

Basic Usage

Import createMap(), generate the World map, and insert the returned SVG string into a container.

<div id="world-map"></div>

import { createMap } from "svg-world-maps";
const mapSVG = createMap("world", {
  background: "#f8fafc",
  borders: "#64748b",
  hoverColor: "#93c5fd",
  showTooltip: true,
  size: "lg"
});
document.getElementById("world-map").innerHTML = mapSVG;

Direct Browser Use

The JavaScript file can be loaded as an ES module. No stylesheet is required for the basic map.

<div id="map-container"></div>
<script type="module">
import { createMap } from "https://cdn.jsdelivr.net/npm/[email protected]/dist/index.min.js";
const container = document.getElementById("map-container");
container.innerHTML = createMap("world", {
  background: "#f8fafc",
  borders: "#64748b",
  hoverColor: "#bfdbfe",
  showTooltip: true
});
</script>

Load A Country Or Regional Map

Only the World map is registered by default. Download an optional map with the CLI before calling createMap() for that geography.

npx add-map usa

Run the registration utility when you want the library to generate a central registration file for installed maps:

npx register-map

Manual registration uses registerMapData() before the first createMap() call. Adjust the import location to match the map file generated in your project.

import {
  createMap,
  registerMapData
} from "svg-world-maps";
import usaData from "./src/maps/usa";
registerMapData("usa", usaData);
const usaMap = createMap("usa", {
  background: "#f8fafc",
  borders: "#475569",
  hoverColor: "#bfdbfe",
  showTooltip: true
});
document.getElementById("usa-map").innerHTML = usaMap;

The current map identifiers, region counts, CLI commands, and label status are maintained in the Maps Information Report.

Handle Region Clicks

Every geographic <path> includes data-code and data-name. One delegated event listener can identify the selected country, state, or province.

const container = document.getElementById("map-container");
container.innerHTML = createMap("world", {
  hoverColor: "#bfdbfe",
  showTooltip: true
});
container.addEventListener("click", function (event) {
  const region = event.target.closest("path");
  if (!region) {
    return;
  }
  const code = region.dataset.code;
  const name = region.dataset.name;
  if (code && name) {
    console.log(`${name}: ${code}`);
  }
});

Display Native Tooltips

showTooltip defaults to true. Set it explicitly when the configuration should document that behavior.

const map = createMap("world", {
  showTooltip: true
});

Display Region Labels

showLabels defaults to false.

Label coordinates are currently unavailable for these map types:

• africa
• europe
• iran
• russia
• usa

For other maps with label data:

const map = createMap("germany", {
  showLabels: true
});

Customize Map Colors

const map = createMap("world", {
  background: "#0f172a",
  borders: "#64748b",
  hoverColor: "#38bdf8",
  showTooltip: true
});

Responsive Maps

The size option establishes the generated SVG dimensions. Use CSS when the SVG also needs to scale with its container.

#map-container svg {
  max-width: 100%;
  height: auto;
}

Custom Scale Factors

Pass a positive number to size when none of the preset values matches the required dimensions.

const map = createMap("world", {
  size: 1.25
});

All Configuration Options

• background (string, default "#f0f0f0"): Sets the region fill color.
• borders (string, default "#333333"): Sets the region border stroke color.
• hoverColor (string, default "#d0e0ff"): Sets the fill color applied to a region during pointer hover.
• showTooltip (boolean, default true): Inserts native SVG tooltips containing region names.
• showLabels (boolean, default false): Renders region labels when coordinate data exists for the selected map.
• size (string | number, default "lg"): Accepts one of the eight preset sizes or a positive numeric scale multiplier.

Size Presets

Public API

createMap()

Generates the complete SVG string for a registered map.

function createMap(
  mapType: MapType,
  options?: MapOptions
): string

Parameters:

• mapType (MapType): Geographic map identifier. "world" is always registered. Other map types require registration first.
• options (MapOptions, optional): Map style, interaction, label, tooltip, and size configuration.

registerMapData()

Registers optional geographic map data before that identifier is passed to createMap().

function registerMapData(
  type: MapType,
  data: MapData
): void

Parameters:

• type (MapType): Geographic map identifier such as "usa", "germany", or "japan".
• data (MapData): Imported data object for that map.

Region Data Attributes

Each geographic region exposes two data attributes.

TypeScript Types

The package exports public types for its API and map data structures.

• MapType: Valid geographic map identifiers.
• MapOptions: Configuration accepted by createMap().
• MapData: Imported map data structure.
• MapState: Individual geographic region data within MapData.
• MapSize: Size presets or a custom numeric scale.
• PathData: SVG geographic path data.

import type {
  MapType,
  MapOptions,
  MapData,
  MapState,
  MapSize,
  PathData
} from "svg-world-maps";

Framework Rendering

createMap() returns an SVG string rather than a framework component. Render that string through the framework’s raw HTML mechanism.

React

import { createMap } from "svg-world-maps";
const svg = createMap("world", {
  hoverColor: "#bfdbfe",
  showTooltip: true
});
export default function WorldMap() {
  return <div dangerouslySetInnerHTML={{ __html: svg }} />;
}

Vue 3

<script setup>
import { createMap } from "svg-world-maps";
const svg = createMap("world", {
  showTooltip: true
});
</script>
<template>
  <div v-html="svg"></div>
</template>

Svelte

<script>
import { createMap } from "svg-world-maps";
const svg = createMap("world", {
  showTooltip: true
});
</script>
<div>
  {@html svg}
</div>

Server-Side Rendering

createMap() generates a string and does not access window or document, so map generation can run during server rendering.

DOM listeners for data-code and data-name interactions belong in client-side lifecycle code.

Alternatives & Related Resources

• Interactive SVG World Map Library – svgMap.js
• jsvectormap: JavaScript Library For Interactive Vector Maps
• SVG World Map With All Countries, Provinces, And States
• Cobe: 3D Globe With Dotted World Map Using WebGL