!!This page contains parts that have not yet been translated from Japanese.!!
Advanced Usage
I will introduce methods to customize MapNJ.
-
The Area, Label, and AreaID mentioned on this page refer to those shown in the "Design Source Setup" section.
参考 - To use options related to "fill," the corresponding parts must have "fill" set during the design phase.
- To use options related to "stroke," the corresponding parts must have "stroke" set during the design phase.
Options
This is a list of options that can be specified in the object passed as the second argument when creating an instance.
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 | 背景画像の切り替わるスピードを指定します。（単位は秒） |
Option Parts
In addition to the basic parts, it is possible to define optional parts.
Optional parts assign specific data attributes to HTML tag elements.
| 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が非アクティブの時に表示されるコンテンツになります。 |
Events
By using the "on" method of the instance, it is possible to define functions that are executed at specific timings.
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 Integration
Design classes are added to the HTML tag element specified as the first argument during instance creation, depending on the state.
By utilizing these design classes, it is also possible to create custom design parts that work in conjunction with 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を最後尾文字列とし、付加されます。 |