1.0.4 • Published 9 months ago

japanmap v1.0.4

Weekly downloads
-
License
MIT
Repository
github
Last release
9 months ago

JapanMap

ENGLISH | 日本語

A React component for rendering an interactive map of Japan, with customizable prefecture colors, hover effects, and tooltips.

Japanmap

Features

  • Display a map of Japan with all prefectures.
  • Language support for Japanese and English prefecture names.
  • Customize the colors of each prefecture.
  • Show tooltips with custom descriptions when hovering over prefectures.
  • Supports dynamic data loading from JSON.

Installation

Install the library using npm:

npm install japanmap

or...

pnpm add japanmap
yarn add japanmap
bun add japanmap

Usage

Import the JapanMap component and use it in your React application:

import React from 'react';
import JapanMap from 'japanmap';

const App = () => {
  return (
    <div>
      <h1>Interactive Japan Map</h1>
      <JapanMap
        lang="en"
        strokeColor="#000"
        strokeWidth="0.5"
        hoverColor="#E0E0E0"
        bgColor="#f0f0f0"
        size="600px"
      />
    </div>
  );
};

export default App;

Extends prefectures data (descriptions and fill colors)

You can extend the default prefectures data by adding your own descriptions and fill colors with your own JSON file.

import React from 'react';
import JapanMap from 'japanmap';
import prefecturesData from './your/path/prefecturesdata.json';

const App = () => {
  return (
    <div>
      <h1>Interactive Japan Map</h1>
      <JapanMap
        data={prefecturesData}
        lang="en"
        strokeColor="#000"
        strokeWidth="0.5"
        hoverColor="#E0E0E0"
        bgColor="#f0f0f0"
        size="600px"
      />
    </div>
  );
};

export default App;

Props

The JapanMap component accepts the following properties (all are optional):

PropertyTypeDescription
dataArray<{ id: string; description: string; fill: string }>Data for the prefectures, including ID, description, and fill color.
strokeColorstringColor of the prefecture borders.
strokeWidthstringWidth of the prefecture borders.
hoverColorstringFill color when hovering over a prefecture.
bgColorstringBackground color of the map.
sizestringWidth of the map component.

Prefecture Data Format

The data prop expects an array of objects with the following structure:

[
  {
    "id": "JP01",
    "description": "Hokkaido is the northernmost prefecture of Japan.",
    "fill": "#88C0D0"
  },
  {
    "id": "JP02",
    "description": "Aomori is known for its apple production.",
    "fill": "#BF616A"
  },
  ...
]
  • id: A unique identifier for each prefecture. Using the ISO 3166-2:JP standard. (JP01...JP47)
  • description: A string that will be shown in the tooltip when hovering over the prefecture.
  • fill: The default fill color for each prefecture.

Prefectures Codes

Please select the corresponding IDs for each prefecture from the table below. These IDs will be used to add entries to the JSON file and will help you identify each prefecture for labeling or changing their colors on the interactive map.

Development

To build and run the project locally:

  1. Clone the repository:
git clone https://github.com/daikiejp/japanmap.git
cd japanmap
  1. Install dependencies:
npm install
  1. Start the development server:
npm run dev

Contributing

Contributions are welcome! Please follow these steps:

  1. Fork the repository.
  2. Create a new branch (git checkout -b feature/your-feature).
  3. Commit your changes (git commit -m 'Add a new feature').
  4. Push to the branch (git push origin feature/your-feature).
  5. Create a pull request.

Author

👤 Danny Davila

Credits

License

This project is licensed under the MIT License - see the LICENSE file for details.

1.0.4

9 months ago

1.0.3

9 months ago

1.0.2

9 months ago

1.0.1

9 months ago

1.0.0

9 months ago