react-svg-maps

v1.3.0

Published

15 days ago

Interactive SVG maps for all the countries in the world as react-components(every countries added incrementally)

Downloads

262

0High
0Medium
0Low

rishiji

react-svg-maps

A React component library for interactive SVG maps, covering 23 countries so far — each a separate import path, listed under Components.

Live Demo: https://reactsvgmaps.com GitHub: https://github.com/rishi064/reactsvgmaps

Installation

npm install react-svg-maps

Usage

import { NepalDistrictMap, NepalProvinceMap } from "react-svg-maps/np";

function App() {
  const handleSelect = (region) => {
    if (region) {
      console.log(`Selected: ${region.name} (ID: ${region.id})`);
    }
  };

  return (
    <div>
      <NepalDistrictMap
        color="#e2e8f0"
        hoverColor="#93c5fd"
        activeColor="#3b82f6"
        onSelect={handleSelect}
      />
    </div>
  );
}

Components

Each country is a separate import path, so your bundler only pulls in the map data you actually use.

`react-svg-maps/np`

`react-svg-maps/in`

`react-svg-maps/de`

`react-svg-maps/at`

Three Bezirke share a name with the Statutarstadt they surround, so they carry a suffix: "Krems (Land)", "St. Pölten (Land)" and "Wiener Neustadt (Land)". The cities themselves are "Krems an der Donau", "St. Pölten" and "Wiener Neustadt".

`react-svg-maps/ch`

Cantons are named in their own official language — "Ticino", "Genève", "Graubünden", not the English or German exonyms. Switzerland stops at canton level: its districts vary too much between cantons to make one map meaningful.

`react-svg-maps/fr`

Régions are the post-2016 ones: "Grand Est", "Occitanie", "Nouvelle-Aquitaine" and the rest, thirteen in metropolitan France and five overseas. The five overseas ones — "Guadeloupe", "Martinique", "Guyane", "La Réunion" and "Mayotte" — are each a département as well, and carry the same name in both maps.

Both maps are drawn on the same canvas, overseas included: those five are insets down the sides at their own scale, which is how French official maps show them. The two maps line up region for département, so a hover on one can highlight the other.

Paris and the three inner-ring départements around it — "Hauts-de-Seine", "Seine-Saint-Denis", "Val-de-Marne" — are a dozen units across on a 1000-unit map, so they are small targets at default strokeWidth. The source's magnified inset of them is not part of the data.

Names are the official French ones, accents included: "Côte-d'Or", "Hautes-Pyrénées", "Territoire de Belfort". Corsica is its two départements, "Corse-du-Sud" and "Haute-Corse". "Rhône" covers the Métropole de Lyon as well — the source predates the 2015 split, and INSEE's separate 69M and 69D codes have no outline of their own here.

`react-svg-maps/dk`

Both levels are the ones the 2007 reform created, and both are named in Danish without their administrative word: "Hovedstaden" rather than "Region Hovedstaden", "København" and "Aarhus" rather than "Københavns Kommune" or the English "Copenhagen". Bornholm is a kommune of its own and belongs to "Hovedstaden".

`react-svg-maps/pl`

Names are Polish: voivodeships as the adjective alone, "Mazowieckie" rather than "województwo mazowieckie" or the English "Masovian". Land powiaty keep the word, "powiat tatrzański"; the 66 cities with powiat rights are just the city, "Warszawa", "Kraków", "Gdańsk".

Ten powiat names occur twice in Poland, so those twenty carry their voivodeship to tell them apart — "powiat brzeski (małopolskie)" and "powiat brzeski (opolskie)". The other 360 names are bare.

`react-svg-maps/sct`

Scotland is a constituent country of the UK and has no ISO 3166-1 code of its own, so the subpath is its ISO 3166-2 subdivision code, GB-SCT, shortened the way the others are.

Names are the official council area ones: "City of Edinburgh", "Glasgow City", "Aberdeen City" and "Dundee City" rather than the bare city names, and "Na h-Eileanan Siar" for the council area also known as the Western Isles or Outer Hebrides.

`react-svg-maps/fi`

`react-svg-maps/jp`

Prefectures are romanised without the suffix — "Tokyo", "Osaka", "Hokkaido" — and the regions are the conventional eight: "Hokkaido", "Tohoku", "Kanto", "Chubu", "Kansai", "Chugoku", "Shikoku", "Kyushu". Regions are not an administrative level in Japan and no boundary source publishes them, so they are the prefectures merged: Mie sits in Kansai and Okinawa in Kyushu, which is the usual grouping but not the only one in use.

The map covers all of Japan's territory, which includes Tokyo's Pacific islands — Ogasawara, and Minamitorishima 1,800 km further out. They set the east and south edges of the canvas, so the archipelago sits in its upper-left portion with open sea below and to the right.

`react-svg-maps/ru`

This map follows the same rule the India map does: it draws the boundaries as the mapped country's own government defines them. For Russia that means 89 subjects, including Crimea, Sevastopol and the four Ukrainian oblasts annexed in 2022, which are shown under the names Russia gives them. Those six are not recognised as Russian by Ukraine or by most of the world, and a Ukraine map added here later will draw the same ground as Ukrainian.

Names are the source's English forms — "Bashkortostan", "Sakha Republic", "Khanty-Mansiysk Autonomous Okrug – Ugra" — not transliterations of the Russian. Chukotka is drawn past 180° rather than wrapping to the other edge of the map.

`react-svg-maps/br`

The 27 are the 26 states plus the "Distrito Federal". Municipality names are bare where they are unique and carry the state's two-letter code where they are not: there are five "Bom Jesus" and five "São Domingos", so all of those read "Bom Jesus (PI)" and so on. 505 of the 5,570 are suffixed this way.

IBGE lists 5,571 municipalities; the 5,571st, Boa Esperança do Norte in Mato Grosso, is too new to have a published boundary and so is not on the map.

`react-svg-maps/us`

County names carry their state, because 1,922 distinct names are shared out across 3,142 counties — "Washington" alone is used 31 times. So the keys read "Harris, Texas", "Los Angeles, California", "District of Columbia". The six independent cities that share a name with the county around them take a city: "Baltimore city, Maryland" against "Baltimore, Maryland", and likewise for Fairfax, Franklin, Richmond and Roanoke in Virginia and St. Louis in Missouri.

Alaska and Hawaii are drawn as insets below the southwest, scaled and moved the way printed US maps place them, and identically on both levels so the two still line up. Alaska is at 35% of its true size. The uninhabited Northwestern Hawaiian Islands are left off so the Hawaii inset is the main chain rather than 2,400 km of empty ocean. Territories — Puerto Rico, Guam, the US Virgin Islands, American Samoa and the Northern Marianas — are not included at either level.

`react-svg-maps/af`

Names follow the official romanisation rather than the commonest English spelling: "Hirat" and "Hilmand" rather than Herat and Helmand, and likewise "Nimroz", "Paktya", "Maidan Wardak" and "Sar-e-Pul".

Eleven district names are each used by two districts in different provinces, so those 22 carry the province in brackets — "Fayzabad (Badakhshan)" against "Fayzabad (Jawzjan)", "Surobi (Kabul)" against "Surobi (Paktika)". The other 379 are bare.

The districts are the 401 the humanitarian community uses. The de-facto authorities designate 457, but no boundaries are published for the additional units, so they are not drawn here and their territory stays inside the districts it was split from.

`react-svg-maps/al`

Names are Albanian, with their diacritics and without the Bashkia prefix the source carries — "Tiranë", "Shkodër", "Korçë", "Malësi e Madhe". The municipalities are the 61 of the 2014 territorial reform, under their current names: "Dimal" rather than the source's "Ura Vajgurore", renamed in 2021, and "Has" rather than "Krumë", which is that municipality's seat rather than its name.

Both levels come from the same release, so they line up: every municipality sits inside the county the source assigns it to.

`react-svg-maps/dz`

Wilayas carry their official French names with diacritics — "Béjaïa", "Médéa", "Aïn Témouchent", "M'Sila". The 58 are the division in force since December 2019: the 48 of the 1984 law plus the ten southern wilayas promoted from wilaya déléguée in February 2021, "Timimoun", "Bordj Badji Mokhtar", "Ouled Djellal", "Béni Abbès", "In Salah", "In Guezzam", "Touggourt", "Djanet", "El M'Ghair" and "El Meniaa".

Commune names are the source's own romanisation, which is plainer than the wilaya names — "Ain Beida" rather than Aïn Beïda. 85 of the 1,541 share a name with another commune, and those carry their wilaya in brackets: "Ain Beida (Ouargla)" against "Ain Beida (Oum El Bouaghi)".

The wilaya boundaries are the communes merged, so the two levels agree exactly: every commune sits inside its wilaya with no sliver between them.

`react-svg-maps/ad`

Catalan names with their accents: "Sant Julià de Lòria", "Escaldes-Engordany", "Andorra la Vella".

`react-svg-maps/az`

One level only: the COD-AB for Azerbaijan publishes ADM1 and nothing below it. The 74 mix rayons with the cities that sit outside them — "Baku", "Ganja", "Sumgait" are city units, not districts of a surrounding rayon.

`react-svg-maps/bd`

Current spellings, as the Bangladesh Bureau of Statistics gives them: "Chattogram" and "Barishal" rather than Chittagong and Barisal, "Bogura" rather than Bogra. The source also carries 507 upazilas at ADM3, which are not included here.

`react-svg-maps/by`

The 7 are the six voblasts plus "Minsk City", which is administratively separate from the "Minsk" voblast around it. Names are the source's Russian- based transliterations — "Mogilev", "Gomel", "Grodno" — not the Belarusian forms Mahilyow, Homyel and Hrodna.

`react-svg-maps/bt`

No name is used twice at either level, so every key is bare.

`react-svg-maps/eg`

The second level mixes the two kinds of district Egypt has: the rural markaz and the urban qism. 22 names are used in more than one governorate and take it in brackets — "Faqus (Sharkia)". Where a markaz and a qism share a name inside the same governorate, which happens 18 times, each is also prefixed with its kind: "Qism Aswan (Aswan)" against "Markaz Aswan (Aswan)".

Egypt is simplified finer than the other maps here — half the usual tolerance — because at the normal setting the 2.3 km² Alexandria port district collapses into a sliver. That costs about 130 kB.

The exported name arrays let you build a colorMap, legend or dropdown without retyping every region:

import { NepalDistrictMap, nepalDistricts } from "react-svg-maps/np";

const colorMap = Object.fromEntries(
  nepalDistricts.map((name) => [
    name,
    name.startsWith("K") ? "#3b82f6" : "#e2e8f0",
  ]),
);

<NepalDistrictMap colorMap={colorMap} />;

Props

All map components accept the following props:

| Prop | Type | Default | Description | | :----------------- | :--------- | :---------- | :---------------------------------------------------------------------------------------------------------------------- | | color | string | "#ffffff" | The default fill color for all regions. | | hoverColor | string | undefined | The fill color applied when a region is hovered. | | activeColor | string | undefined | The fill color applied when a region is clicked/selected. | | colorMap | object | {} | An object mapping specific region names to colors (e.g., { "Kathmandu": "red", "Palpa": "blue" }). Overrides color. | | stroke | string | "black" | The color of the border drawn around every region. | | strokeWidth | number | 1 | Thickness of the region borders. 1 looks the same on every map. | | onHover | function | undefined | Callback fired when hovering over a region. Receives { id, name } or null. | | onSelect | function | undefined | Callback fired when a region is clicked. Receives { id, name } or null. | | showAttributions | boolean | true | Toggles the display of the copyright/license attribution overlay. | | className | string | "" | Optional CSS class for the wrapper div. | | style | object | {} | Optional inline styles for the svg element. |

These are all the props there are. Everything else about a map needs no configuration.

License

Code is released under the MIT License.

Map boundary data is licensed separately, per country — see LICENSE-DATA.

Map components render an attribution overlay by default, which satisfies the attribution requirement at runtime. Passing showAttributions={false} is allowed, but then crediting the source elsewhere becomes your responsibility.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

react-svg-maps

Installation

Usage

Components

react-svg-maps/np

react-svg-maps/in

react-svg-maps/de

react-svg-maps/at

react-svg-maps/ch

react-svg-maps/fr

react-svg-maps/dk

react-svg-maps/pl

react-svg-maps/sct

react-svg-maps/fi

react-svg-maps/jp

react-svg-maps/ru

react-svg-maps/br

react-svg-maps/us

react-svg-maps/af

react-svg-maps/al

react-svg-maps/dz

react-svg-maps/ad

react-svg-maps/az

react-svg-maps/bd

react-svg-maps/by

react-svg-maps/bt

react-svg-maps/eg

Props

License

`react-svg-maps/np`

`react-svg-maps/in`

`react-svg-maps/de`

`react-svg-maps/at`

`react-svg-maps/ch`

`react-svg-maps/fr`

`react-svg-maps/dk`

`react-svg-maps/pl`

`react-svg-maps/sct`

`react-svg-maps/fi`

`react-svg-maps/jp`

`react-svg-maps/ru`

`react-svg-maps/br`

`react-svg-maps/us`

`react-svg-maps/af`

`react-svg-maps/al`

`react-svg-maps/dz`

`react-svg-maps/ad`

`react-svg-maps/az`

`react-svg-maps/bd`

`react-svg-maps/by`

`react-svg-maps/bt`

`react-svg-maps/eg`