Neurotic Pumpkin Murderer

    world-map-country-shapes

    1.0.0 • Public • Published

    world-map-country-shapes npm

    BYO World map country SVG shapes

    It contains a list of countries and theis 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)

    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

    Credits

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

    Install

    npm i world-map-country-shapes

    DownloadsWeekly Downloads

    337

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    243 kB

    Total Files

    6

    Last publish

    Collaborators

    • sirlisko