world-map-country-shapes

BYO World map country SVG shapes

It contains a list of countries and their SVG path shapes.

Record Example

{
    id: "AD",
    shape:
      "M985.4 301.7l.1-.2.1-.2v-.1l-.2-.1-.7-.2-.3-.1-.2.1-.2.2-.1.3.1.1v.4l.1.2h.4l.3-.1.5-.3h.1z"
}

Install

npm install world-map-country-shapes

Usage (with React)

Example of Country selector. See a live example.

import React, { Component } from "react";
import country from "world-map-country-shapes";

class Map extends Component {
  state = {
    selectedCountries: {}
  };
  toggleCountry = country => {
    const { selectedCountries } = this.state;
    this.setState({
      selectedCountries: {
        ...selectedCountries,
        [country.id]: !selectedCountries[country.id]
      }
    });
  };
  render() {
    const { selectedCountries } = this.state;
    const mapCountries = country.map(country => (
      <path
        key={country.id}
        d={country.shape}
        style={{
          fill: selectedCountries[country.id] ? "tomato" : "#eee",
          cursor: "pointer",
          stroke: "#ccc"
        }}
        onClick={() => this.toggleCountry(country)}
      />
    ));
    return (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        height="400"
        width="800"
        viewBox="0 0 2000 1001"
      >
        {mapCountries}
      </svg>
    );
  }
}

export default Map;

Map details

• Map type: Robinson Projection
• Country IDs (211 countries/territories): 2-digit ISO codes

Credits

SVG map from https://simplemaps.com/resources/svg-world.