Romania Map Kit

Reusable Romania county map data, SVG helpers, and framework wrappers for Svelte, React, Vue, and server-rendered HTML.

Use it to build interactive Romania maps, heatmaps, regional dashboards, election views, sales territory maps, internal analytics, or any UI that needs county-level visualization.

Features

• Romania county SVG geometry with stable county IDs.
• Framework-neutral core helpers.
• Svelte 5 component.
• React and Next.js component.
• Vue 3 component.
• Server-side SVG string generation.
• Numeric data, custom fills, custom strokes, disabled counties, selected counties, hover state, and color scales.
• TypeScript types included.
• No required runtime dependencies from this package. React, Svelte, and Vue are optional peer dependencies depending on the wrapper you use.

Install

npm install romania-map-kit

You can also use pnpm or bun:

pnpm add romania-map-kit
bun add romania-map-kit

Import Paths

Use the framework-specific entry point when possible:

import { RomaniaMap } from "romania-map-kit/svelte";
import { RomaniaMap } from "romania-map-kit/react";
import { RomaniaMap } from "romania-map-kit/vue";

Use the core entry point for data, color helpers, and SVG string generation:

import {
	ROMANIA_COUNTIES,
	ROMANIA_COUNTY_IDS,
	createLinearColorScale,
	createRomaniaMapSvg
} from "romania-map-kit/core";

The root export is also available:

import { RomaniaMap, createLinearColorScale } from "romania-map-kit";

Quick Start

County data is keyed by Romanian vehicle-style county IDs. For example, B is Bucharest, CJ is Cluj, and TM is Timis.

import { createLinearColorScale, type RomaniaMapData } from "romania-map-kit/core";

const data: RomaniaMapData = {
	B: 96,
	CJ: 82,
	TM: 78,
	VS: 22
};

const colorScale = createLinearColorScale({
	min: 0,
	max: 100,
	from: "#ef4444",
	to: "#22c55e"
});

Svelte

<script lang="ts">
	import {
		RomaniaMap,
		createLinearColorScale,
		type RomaniaMapData
	} from "romania-map-kit/svelte";

	let selectedCounty = $state<string | null>(null);

	const data: RomaniaMapData = {
		B: { value: 96 },
		CJ: { value: 82 },
		TM: { value: 78 },
		VS: { value: 22 }
	};

	const colorScale = createLinearColorScale({
		min: 0,
		max: 100,
		from: "#ef4444",
		to: "#22c55e"
	});
</script>

<RomaniaMap
	{data}
	{colorScale}
	selectedCounty={selectedCounty}
	onCountyClick={(county) => (selectedCounty = county.id)}
	formatTooltip={(county) => `${county.name}: ${county.value ?? "n/a"}`}
/>

React or Next.js

import { useState } from "react";
import {
	RomaniaMap,
	createLinearColorScale,
	type RomaniaMapData
} from "romania-map-kit/react";

const data: RomaniaMapData = {
	B: { value: 96 },
	CJ: { value: 82 },
	TM: { value: 78 },
	VS: { value: 22 }
};

const colorScale = createLinearColorScale({
	min: 0,
	max: 100,
	from: "#ef4444",
	to: "#22c55e"
});

export function RomaniaMapExample() {
	const [selectedCounty, setSelectedCounty] = useState<string | null>(null);

	return (
		<RomaniaMap
			data={data}
			colorScale={colorScale}
			selectedCounty={selectedCounty}
			onCountyClick={(county) => setSelectedCounty(county.id)}
		/>
	);
}

In Next.js, add "use client" at the top of the file when using event handlers such as onCountyClick or onCountyHover.

"use client";

import { RomaniaMap } from "romania-map-kit/react";

Vue 3

<script setup lang="ts">
import { ref } from "vue";
import {
	RomaniaMap,
	createLinearColorScale,
	type RomaniaMapData
} from "romania-map-kit/vue";

const selectedCounty = ref<string | null>(null);

const data: RomaniaMapData = {
	B: { value: 96 },
	CJ: { value: 82 },
	TM: { value: 78 },
	VS: { value: 22 }
};

const colorScale = createLinearColorScale({
	min: 0,
	max: 100,
	from: "#ef4444",
	to: "#22c55e"
});
</script>

<template>
	<RomaniaMap
		:data="data"
		:color-scale="colorScale"
		:selected-county="selectedCounty"
		@county-click="(county) => (selectedCounty = county.id)"
	/>
</template>

Vanilla HTML and Server Rendering

Use createRomaniaMapSvg when you want a plain SVG string. This works in Node, static site generation, server rendering, or a simple browser script.

import { createRomaniaMapSvg } from "romania-map-kit/core";

const svg = createRomaniaMapSvg({
	data: {
		B: 96,
		CJ: 82,
		VS: 22
	},
	selectedCounty: "CJ",
	defaultFill: "#e5e7eb",
	selectedFill: "#38bdf8"
});

document.querySelector("#map")!.innerHTML = svg;

You can add safe custom attributes with getCountyAttributes:

const svg = createRomaniaMapSvg({
	getCountyAttributes: (county) => ({
		"id": `county-${county.id.toLowerCase()}`,
		"data-value": county.value
	})
});

Attribute values are escaped, and invalid attribute names are ignored.

Data Format

You can pass a number:

const data = {
	CJ: 82
};

Or a richer object:

const data = {
	CJ: {
		value: 82,
		fill: "#22c55e",
		stroke: "#111827",
		label: "Cluj county",
		disabled: false,
		meta: {
			population: 691106
		}
	}
};

Supported fields:

| Field | Type | Description | | --- | --- | --- | | value | number | Numeric value used by color scales and tooltips. | | fill | string | Direct county fill color. Overrides the color scale. | | stroke | string | Direct county stroke color. | | label | string | Accessible label and default tooltip text. | | disabled | boolean | Disables interaction and applies disabled styling. | | meta | Record<string, unknown> | Extra user-defined metadata carried through callbacks. |

County IDs

The package uses Romanian county vehicle-style IDs:

AB, AG, AR, B, BC, BH, BN, BR, BT, BV, BZ, CJ, CL, CS, CT, CV, DB, DJ, GJ, GL, GR, HD, HR, IF, IL, IS, MH, MM, MS, NT, OT, PH, SB, SJ, SM, SV, TL, TM, TR, VL, VN, VS.

Useful imports:

import {
	ROMANIA_COUNTIES,
	ROMANIA_COUNTY_IDS,
	ROMANIA_COUNTY_BY_ID
} from "romania-map-kit/core";

Color Scales

Linear Scale

import { createLinearColorScale } from "romania-map-kit/core";

const colorScale = createLinearColorScale({
	min: 0,
	max: 100,
	from: "#fee2e2",
	to: "#dc2626",
	fallback: "#e5e7eb"
});

Threshold Scale

import { createThresholdColorScale } from "romania-map-kit/core";

const colorScale = createThresholdColorScale([
	{ max: 25, color: "#dcfce7" },
	{ max: 50, color: "#fef9c3" },
	{ max: 75, color: "#fed7aa" },
	{ max: 100, color: "#fecaca" }
]);

Styling

The Svelte, React, and Vue wrappers expose the same common styling props:

<RomaniaMap
	defaultFill="#e5e7eb"
	defaultStroke="#64748b"
	hoverFill="#facc15"
	selectedFill="#38bdf8"
	selectedStroke="#0f172a"
	disabledFill="#f3f4f6"
	strokeWidth={1}
	selectedStrokeWidth={2.5}
/>

Direct colors in data override the default fill and color scale:

const data = {
	CJ: {
		value: 82,
		fill: "#2563eb",
		stroke: "#172554"
	}
};

Svelte Component Props

| Prop | Type | Default | | --- | --- | --- | | data | RomaniaMapData | {} | | selectedCounty | string \| null | null | | hoveredCounty | string \| null | null | | width | string \| number | "100%" | | height | string \| number | "100%" | | interactive | boolean | true | | showTooltip | boolean | true | | ariaLabel | string | "Romania counties map" | | colorScale | RomaniaColorScale | undefined | | formatTooltip | (county) => string | county label/value | | onCountyClick | (county, event) => void | undefined | | onCountyHover | (county, event) => void | undefined |

React and Vue expose the same core concepts, with framework-native event naming.

Public API

import {
	RomaniaMap,
	ROMANIA_COUNTIES,
	ROMANIA_COUNTY_IDS,
	ROMANIA_COUNTY_BY_ID,
	ROMANIA_VIEW_BOX,
	createLinearColorScale,
	createThresholdColorScale,
	createRomaniaMapSvg,
	resolveRomaniaCounties,
	type RomaniaCounty,
	type RomaniaCountyDatum,
	type RomaniaMapData,
	type RomaniaResolvedCounty,
	type RomaniaColorScale
} from "romania-map-kit";

Preferred imports:

import { RomaniaMap } from "romania-map-kit/svelte";
import { RomaniaMap } from "romania-map-kit/react";
import { RomaniaMap } from "romania-map-kit/vue";
import { createRomaniaMapSvg } from "romania-map-kit/core";

Development

This project requires Node ^20.19.0 || >=22.12.0.

npm install
npm run dev

Run checks:

npm run check
npm run build
npm run package

Preview what would be published:

npm pack --dry-run

Publishing

Before publishing, rename the package in package.json if you want a scoped package such as @your-name/romania-map.

npm install
npm run check
npm run package
npm publish --access public

Source and Attribution

The county SVG path structure in this package was adapted from the HTML/SVG map structure published by the Romanian National Institute of Statistics on the INSSE Atlas Statistic page:

https://insse.ro/cms/ro/content/atlas-statistic

This package is not affiliated with, endorsed by, or maintained by INSSE.

If you redistribute this package or use the geometry in another project, review the original INSSE source and applicable terms to make sure your use is permitted.

License

MIT. See LICENSE.