Skip to content

Latest commit

 

History

History
447 lines (390 loc) · 12.1 KB

README_ja.md

File metadata and controls

447 lines (390 loc) · 12.1 KB
Raw

JapanMap

ENGLISH | 日本語

ここでは、日本のインタラクティブな地図をレンダリングするための React コンポーネントについて説明しています。都道府県の色、ホバーエフェクト、ツールチップをカスタマイズできます。

Japanmap

機能

  • すべての都道府県を含む日本の地図を表示します。
  • 日本語と英語の都道府県名をサポートしています。
  • 各都道府県の色をカスタマイズできます。
  • 都道府県にホバーすると、カスタム説明を含むツールチップを表示します。
  • JSON からの動的データ読み込みをサポートしています。

インストール

npm を使用してライブラリをインストールします:

npm install japanmap

または...

pnpm 
pnpm add japanmap
yarn 
yarn add japanmap
bun 
bun add japanmap

使用方法

JapanMap コンポーネントをインポートし、React アプリケーションで使用します:

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

const App = () => {
  return (
    <div>
      <h1>インタラクティブ日本地図</h1>
      <JapanMap
        lang="en"
        strokeColor="#000"
        strokeWidth="0.5"
        hoverColor="#E0E0E0"
        bgColor="#f0f0f0"
        size="600px"
      />
    </div>
  );
};

export default App;

都道府県データの拡張（説明と塗りつぶし色）

独自の JSON ファイルを使用して、自分の説明と塗りつぶし色を追加することで、デフォルトの都道府県データを拡張できます。

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

const App = () => {
  return (
    <div>
      <h1>インタラクティブ日本地図</h1>
      <JapanMap
        data={prefecturesData}
        lang="en"
        strokeColor="#000"
        strokeWidth="0.5"
        hoverColor="#E0E0E0"
        bgColor="#f0f0f0"
        size="600px"
      />
    </div>
  );
};

export default App;

プロパティ

JapanMap コンポーネントは、次のプロパティを受け入れます（すべてオプションです）：

Property Type Description
data Array<{ id: string; description: string; fill: string }> Data for the prefectures, including ID, description, and fill color.
strokeColor string Color of the prefecture borders.
strokeWidth string Width of the prefecture borders.
hoverColor string Fill color when hovering over a prefecture.
bgColor string Background color of the map.
size string Width of the map component.

都道府県データ形式

data プロパティは、次の構造を持つオブジェクトの配列を期待します：

[
  {
    "id": "JP01",
    "description": "北海道は日本最北の都道府県です。",
    "fill": "#88C0D0"
  },
  {
    "id": "JP02",
    "description": "青森県はりんごの生産で知られています。",
    "fill": "#BF616A"
  },
  ...
]
  • id: 各都道府県の一意の識別子。ISO 3166-2 標準を使用しています。（JP01...JP47）
  • description: 都道府県にホバーしたときにツールチップに表示される文字列。
  • fill: 各都道府県のデフォルトの塗りつぶし色。

都道府県コード

以下の表から各都道府県に対応する ID を選択してください。これらの ID は JSON ファイルにエントリを追加するために使用され、インタラクティブな地図で各都道府県のラベル付けや色の変更を識別するのに役立ちます。

ID 都道府県 ISO 3166-2:JP
JP01 Hokkaido JP-01
JP02 Aomori JP-02
JP03 Iwate JP-03
JP04 Miyagi JP-04
JP05 Akita JP-05
JP06 Yamagata JP-06
JP07 Fukushima JP-07
JP08 Ibaraki JP-08
JP09 Tochigi JP-09
JP10 Gunma JP-10
JP11 Saitama JP-11
JP12 Chiba JP-12
JP13 Tokyo JP-13
JP14 Kanagawa JP-14
JP15 Niigata JP-15
JP16 Toyama JP-16
JP17 Ishikawa JP-17
JP18 Fukui JP-18
JP19 Yamanashi JP-19
JP20 Nagano JP-20
JP21 Gifu JP-21
JP22 Shizuoka JP-22
JP23 Aichi JP-23
JP24 Mie JP-24
JP25 Shiga JP-25
JP26 Kyoto JP-26
JP27 Osaka JP-27
JP28 Hyogo JP-28
JP29 Nara JP-29
JP30 Wakayama JP-30
JP31 Tottori JP-31
JP32 Shimane JP-32
JP33 Okayama JP-33
JP34 Hiroshima JP-34
JP35 Yamaguchi JP-35
JP36 Tokushima JP-36
JP37 Kagawa JP-37
JP38 Ehime JP-38
JP39 Kochi JP-39
JP40 Fukuoka JP-40
JP41 Saga JP-41
JP42 Nagasaki JP-42
JP43 Kumamoto JP-43
JP44 Oita JP-44
JP45 Miyazaki JP-45
JP46 Kagoshima JP-46
JP47 Okinawa JP-47

開発

プロジェクトをローカルでビルドして実行するには：

  1. リポジトリをクローンします：
git clone https://github.com/daikiejp/japanmap.git
cd japanmap
  1. 依存関係をインストールします：
npm install
  1. 開発サーバーを起動します：
npm run dev

コントリビューション

貢献を歓迎します！以下の手順に従ってください：

  1. リポジトリをフォークします。
  2. 新しいブランチを作成します（git checkout -b feature/your-feature）。
  3. 変更をコミットします（git commit -m 'Add a new feature'）。
  4. ブランチにプッシュします（git push origin feature/your-feature）。
  5. プルリクエストを作成します

著者

👤 Danny Davila

クレジット

地図データはSimple Mapsから取得しました。

ライセンス

このプロジェクトは MIT ライセンスの下でライセンスされています - 詳細は LICENSE ファイルを参照してください。