デモ - Minimum
Design
- ベクターでデザイン素材を用意します
- エリア化したいパーツのレイヤー名をmapnj-area-xxとします。
Tips
本州と島の2つのパーツからなる兵庫のみグループ化し、そのグループレイヤーに対し名前を付けます。
HTML
<div id="mapnj-minimum">
<svg>
<g id="mapnj-area-hyogo">
<path id="honsyu" d="..." />
<path id="awaji" d="..." />
</g>
<path id="mapnj-area-kyoto" d="..." />
<path id="mapnj-area-shiga" d="..." />
<path id="mapnj-area-mie" d="..." />
<path id="mapnj-area-wakayama" d="..." />
<path id="mapnj-area-osaka" d="..." />
<path id="mapnj-area-nara" d="..." />
</svg>
</div>
- 任意のIDを持ったラッパーを用意します。
- SVGデータをラッパー内に貼り付けます。
JavaScript
const mapnjMinimum = new MapNJ("#mapnj-minimum");
Tips
デフォルト時のカラーリングは、MapNJが自動で割り当てます。 アクティブ時のカラーリングは、デザイン素材に準拠します。