応用的な使い方
MapNJをカスタマイズする方法を紹介します。
-
本ページで示すArea, Label, AreaIDは、「Design Source Setup」の項目で示したものを指します。
参考 - 塗り(fill)に関わるオプションを利用する場合は、デザイン時に対象となるパーツに塗りが設定されている必要があります。
- 線(stroke)に関わるオプションを利用する場合は、デザイン時に対象となるパーツに線が設定されている必要があります。
オプション
インスタンス生成時に第二引数に渡すオブジェクトに指定できるオプションの一覧です。
Global
| Option Name | Type | Default | Description |
|---|---|---|---|
| attributeType | id | data-name | id | SVGにマッピングされた情報を読み取る属性を指定します。
MapNJはSVG内部要素のidもしくはdata-name属性を読み取ります。
Adobe Illustratorではidもしくはdata-nameが、Figmaではidが指定できます。
デザインソースに合わせて設定してください。
|
| activeAreaId | String | (空文字) | 指定したAreaIDに対応したAreaがアクティブ化します。 空文字を指定した場合、Area全てが非アクティブ状態になります。 |
Area
| Option Name | Type | Default | Description |
|---|---|---|---|
| areaDefaultFillColor | String | #eee | 全てのAreaの非アクティブ時の塗り色を一括指定します。
MapNJのカラー指定系オプションは、CSSカラー指定と同じものが利用できます。 - Hexカラーコード（例: #FF0000） - RGB値（例: rgb(255, 0, 0)） - HSL値（例: hsl(0, 100%, 50%)） - カラーキーワード（例: red, green, blue） |
| areaDefaultFillColors | Object | {} | Areaの非アクティブ時の塗り色を個別指定します。
{osaka: '#123456', kobe: '#999999'}
ここに指定があったAreaはareaDefaultFillColorでの指定を上書きします。
|
| areaActiveFillColor | String | undefined | undefined | 全てのAreaのアクティブ時の塗り色を一括指定します。
デフォルトではSVG上でデザインした色がアクティブ色として割り当てられます。
|
| areaActiveFillColors | Object | {} | Areaのアクティブ時の塗り色を個別指定します。
{osaka: '#123456', kobe: '#999999'}
ここに指定があったAreaはareaActiveFillColorsでの指定を上書きします。
|
| areaDefaultStrokeColor | String | #fff | 全てのAreaの非アクティブ時の線色を一括指定します。 |
| areaDefaultStrokeColors | Object | {} | Areaの非アクティブ時の線色を個別指定します。
{osaka: '#123456', kobe: '#999999'}
ここに指定があったAreaはareaDefaultStrokeColorでの指定を上書きします。
|
| areaActiveStrokeColor | String | undefined | undefined | 全てのAreaのアクティブ時の線色を一括指定します。
デフォルトではSVG上でデザインした色がアクティブ色として割り当てられます。
|
| areaActiveStrokeColors | Object | {} | Areaのアクティブ時の線色を個別指定します。
{osaka: '#123456', kobe: '#999999'}
ここに指定があったAreaはareaActiveStrokeColorsでの指定を上書きします。
|
| areaChangeSpeed | Number | 0.5 | Areaの切り替わるスピードを指定します。（単位は秒） |
Label
| Option Name | Type | Default | Description |
|---|---|---|---|
| labelDefaultFillColor | String | #555 | 全てのLabelの非アクティブ時の塗り色を一括指定します。 |
| labelDefaultFillColors | Object | {} | Labelの非アクティブ時の塗り色を個別指定します。
{osaka: '#123456', kobe: '#999999'}
ここに指定があったAreaはareaLabelDefaultFillColorでの指定を上書きします。
|
| labelActiveFillColor | String | #555 | 全てのLabelのアクティブ時の塗り色を一括指定します。 |
| labelActiveFillColors | Object | {} | Labelのアクティブ時の塗り色を個別指定します。
{osaka: '#123456', kobe: '#999999'}
ここに指定があったAreaはareaLabelActiveFillColorでの指定を上書きします。
|
| labelDefaultStrokeColor | String | #fff | 全てのLabelの非アクティブ時の線色を一括指定します。 |
| labelDefaultStrokeColors | Object | {} | Areaの非アクティブ時の線色を個別指定します。
{osaka: '#123456', kobe: '#999999'}
ここに指定があったLabelはlabelDefaultStrokeColorでの指定を上書きします。
|
| labelActiveStrokeColor | String | undefined | undefined | 全てのLabelのアクティブ時の線色を一括指定します。
デフォルトではSVG上でデザインした色がアクティブ色として割り当てられます。
|
| labelActiveStrokeColors | Object | {} | Labelのアクティブ時の線色を個別指定します。
{osaka: '#123456', kobe: '#999999'}
ここに指定があったLabelはlabelActiveStrokeColorsでの指定を上書きします。
|
| labelDispAnim | 'static' | 'fadeIn' | 'fadeInUp' | 'fadeInRight' | 'fadeInDown' | 'fadeInLeft' | fadeIn | 初期化時のLabelの表示エフェクトを指定します。 |
| noEventLabels | Array | [] | Labelをクリックした時のイベントを無効にします。無効にしたいAreaID名を列挙します。
['tokyo', 'osaka']
本来、AreaLabelはクリックすると、対応するAreaをアクティブ化するイベントが割り当てられています。
|
Content
| Option Name | Type | Default | Description |
|---|---|---|---|
| contentChangeSpeed | Number | 0.5 | コンテンツの切り替わるスピードを指定します。（単位は秒）
コンテンツとはOption Partsで定義できるdata-mapnj="area-content"が付加されたHTMLタグ要素です。
|
Background
| Option Name | Type | Default | Description |
|---|---|---|---|
| bgDefaultImage | String | (空文字) | 全てのAreaが非アクティブの時にマップの背景に表示される画像を指定します。 |
| bgImages | Object | {} | Areaアクティブ時にマップの背景に表示される画像を個別指定します。
{osaka: '/osaka.jpg', kobe: '/kobe.jpg'}
|
| bgBrightness | Number | 100 | 背景画像の明るさを指定します。（単位はパーセント）
100%以下を指定すると、背景画像に黒いオーバーレイ要素を被せたような効果が得れます。
|
| bgChangeSpeed | Number | 0.5 | 背景画像の切り替わるスピードを指定します。（単位は秒） |
オプションパーツ
基礎パーツとは別に、オプションパーツを定義することが可能です。
オプションパーツはHTMLタグ要素に特定のdata属性を与えます。
| Parts Name | Data Attributes | Description |
|---|---|---|
| Selector | data-mapnj="selector" data-area-id="[AreaID]" | クリック時、data-area-idと一致するAreaIDを持つAreaをアクティブ化させます。 ※ data-area-idに空文字を指定すると、後述のarea-reset-selectorと同じ結果になります。 |
| Reset Selector | data-mapnj="reset-selector" | クリック時、全てのAreaを非アクティブ化させます。 |
| Content | data-mapnj="content" data-area-id="[AreaID]" | ここで指定したdata-area-idと現在アクティブ化しているAreaのIDが一致していた場合、画面に表示されます。 ※ data-area-idに空文字を指定すると、全てのAreaが非アクティブの時に表示されるコンテンツになります。 |
イベント
インスタンスのonメソッドを利用することで特定のタイミングで実行される関数を定義することが可能です。
const mapnj = new('#your-mapnj');
mapnj.on('AREA_CHANGE', (mapnj) => {
console.log('instance:', mapnj);
console.log('actiev area is :', mapnj.state.activeAreaId);
})
| Event Name | Arguments | Description |
|---|---|---|
| AREA_CHANGE | mapnj | 選択中のエリアが変更された直後に実行されます。また選択中のエリアが無くなった場合にも実行されます。 |
| AREA_CLICK | mapnj | いずれかのエリアがクリックされた直後に実行されます。 |
| AREA_MOUSEOVER | mapnj | いずれかのAreaがマウスオーバーされた直後に実行されます。 |
| AREA_MOUSEOUT | mapnj | いずれかのAreaがマウスアウトされた直後に実行されます。 |
| AREA_LABEL_CLICK | mapnj | いずれかのLabelがクリックされた直後に実行されます。 |
| AREA_LABEL_MOUSEOVER | mapnj | いずれかのLabelがマウスオーバーされた直後に実行されます。 |
| AREA_LABEL_MOUSEOUT | mapnj | いずれかのLabelがマウスアウトされた直後に実行されます。 |
| AREA_SELECTOR_CLICK | mapnj | いずれかのArea Selectorがクリックされた直後に実行されます。 |
| AREA_SELECTOR_MOUSEOVER | mapnj | いずれかのArea Selectorがマウスオーバーされた直後に実行されます。 |
| AREA_SELECTOR_MOUSEOUT | mapnj | いずれかのArea Selectorがマウスアウトされた直後に実行されます。 |
| AREA_RESET_SELECTOR_CLICK | mapnj | いずれかのArea Reset Selectorがクリックされた直後に実行されます。 |
CSSクラスの利用
インスタンス生成時に第一引数に指定したHTMLタグ要素には、状態に応じたデザインクラスが付加されます。
デザインクラスを利用することでMapNJに連動した独自のデザインパーツを作成することも可能です。
| Name | Description |
|---|---|
| --mapnj-is-active-area_true | いずれかのAreaがアクティブ化している時に付加されます。 |
| --mapnj-is-active-area_false | いずれのAreaもアクティブ化していない時に付加されます。 |
| --mapnj-active-area_[AreaID] | アクティブ化されているAreaがある場合にそのAreaIDを最後尾文字列とし、付加されます。 |
| --mapnj-hover-area_[AreaID] | マウスホバーされているAreaがある場合にそのAreaIDを最後尾文字列とし、付加されます。 |