テーマ

Japan Map Selectorは、7つのプリセットテーマとカスタムテーマをサポートしています。

プリセットテーマ

Default（デフォルト）

シンプルでクリーンなデザイン。ほとんどのアプリケーションに適合します。

const map = new JapanMapSelector({
  theme: 'default'
});

都道府県

ホバー時

市区町村

Dark（ダーク）

ダークモードに最適化されたテーマ。

const map = new JapanMapSelector({
  theme: 'dark'
});

都道府県

ホバー時

市区町村

Colorful（カラフル）

各都道府県に個別の色を割り当てる、視覚的に魅力的なテーマ。

const map = new JapanMapSelector({
  theme: 'colorful'
});

都道府県ごとに以下のような色が割り当てられます：

• 北海道: #FF6B6B
• 青森県: #4ECDC4
• 岩手県: #45B7D1
• ...など

Random（ランダム）

都道府県コードを基に動的に色を生成するテーマ。

const map = new JapanMapSelector({
  theme: 'random'
});

HSL色空間を使用して、各都道府県に一意の色を生成します。

その他のテーマ

• Warm（ウォーム）: 暖色系の配色
• Cool（クール）: 寒色系の配色
• Monochrome（モノクローム）: グレースケールの配色

カスタムテーマの作成

独自のテーマを作成することも可能です：

const customTheme = {
  name: 'My Custom Theme',
  prefectureFill: '#ffcc00',
  prefectureStroke: '#ff6600',
  prefectureHoverFill: '#ff9900',
  prefectureSelectedFill: '#ff3300',
  municipalityFill: '#ffffcc',
  municipalityStroke: '#ffcc66',
  municipalityHoverFill: '#ffff99',
  municipalitySelectedFill: '#ffcc33',
  backgroundColor: '#fff9f0',
  strokeWidth: 1.0
};

const map = new JapanMapSelector({
  theme: customTheme
});

テーマのプロパティ

プロパティ	説明	デフォルト値
prefectureFill	都道府県の塗りつぶし色	#e0e0e0
prefectureStroke	都道府県の枠線色	#999
prefectureHoverFill	都道府県のホバー時の色	#b0d0f0
prefectureSelectedFill	都道府県の選択時の色	#90c0ff
municipalityFill	市区町村の塗りつぶし色	#f0f0f0
municipalityStroke	市区町村の枠線色	#666
municipalityHoverFill	市区町村のホバー時の色	#b0d0f0
municipalitySelectedFill	市区町村の選択時の色	#90c0ff
backgroundColor	背景色	#f8f8f8
strokeWidth	枠線の太さ	0.5

動的なテーマ変更

実行時にテーマを変更することも可能です：

// テーマを変更
map.setTheme('dark');

// カスタムテーマに変更
map.setTheme(customTheme);

// 現在のテーマを取得
const currentTheme = map.getTheme();

個別の色設定

テーマとは別に、特定の色だけを上書きすることもできます：

const map = new JapanMapSelector({
  theme: 'default',
  prefectureColor: '#ff0000',      // 都道府県の色を赤に
  prefectureHoverColor: '#ff6666', // ホバー時の色を明るい赤に
});

選択不可な都道府県のスタイル

選択できない都道府県には別のスタイルを適用できます：

const map = new JapanMapSelector({
  selectablePrefectures: ['13', '14', '11', '12'], // 関東の一部のみ選択可能
  disabledPrefectureFill: '#cccccc',
  disabledPrefectureStroke: '#999999'
});