Advanced Usage

I will introduce methods to customize MapNJ.

Tips

Please refer to "Design Source Setup" for information on Area, Label, AreaID, etc. ( Design Source Setup )
Options that control fill and stroke must be defined in the design source itself.

Options

This is a list of options that can be specified in the object passed as the second argument when creating an instance.

Sample: JavaScript

const mapnj = new('#your-mapnj', {
  activeAreaId: "foo",
  areaDefaultFillColors: {
    area1: "#123456",
    area2: "red"
  }
});

Global

Option Name	Type	Default	Description
attributeType	id \| data-name	id	SVGにマッピングされた情報を読み取る属性を指定します。 Note MapNJは操作対象のidもしくはdata-name属性の値を読み取ります。デザインソフト上ではこれはレイヤー名に対応させることが可能です。Adobe Illustratorではidもしくはdata-nameを、Figmaではidにマッピングし書き出しを行うことが可能です。
attributeValueSeparator	'-' \| '_'	'-'	mapnjに渡す情報（attributeTypeで指定されている属性の値）をハイフンで区切るかアンダースコアで区切るかを指定します。
activeAreaId	String	''	指定したAreaIDに対応したAreaがアクティブ化します。空文字を指定した場合、Area全てが非アクティブ状態になります。

Area

Option Name	Type	Default	Description
areaDefaultFillColor	String	#eee	全てのAreaのデフォルト時の塗り色を一括指定します。 Note pages.advanced_usage.options.area.areaDefaultFillColor.tips
areaDefaultFillColors	Object	{}	個々のAreaのデフォルト時の塗り色を指定します。 Note areaIDをキーに、cssカラーをバリューに指定します。ここで指定があったAreaはareaDefaultFillColorの指定を上書きします。
areaActiveFillColor	String \| undefined	undefined	全てのAreaのアクティブ時の塗り色を一括指定します。 Note 通常はデザイン時に指定した色がアクティブ色として割り当てられます。
areaActiveFillColors	Object	{}	個々のAreaのアクティブ時の塗り色を指定します。 Note areaIDをキーに、cssカラーをバリューに指定します。ここで指定があったAreaはareaActiveFillColorの指定を上書きします。
areaDefaultStrokeColor	String	#fff	全てのAreaのデフォルト時の線色を一括指定します。
areaDefaultStrokeColors	Object	{}	個々のAreaのデフォルト時の線色を個別指定します。 Note areaIDをキーに、cssカラーをバリューに指定します。ここで指定があったAreaはareaDefaultStrokeColorsの指定を上書きします。
areaActiveStrokeColor	String \| undefined	undefined	全てのAreaのアクティブ時の線色を一括指定します。 Note 通常はデザイン時に指定した色がアクティブ色として割り当てられます。
areaActiveStrokeColors	Object	{}	個々のAreaのアクティブ時の線色を個別指定します。 Note areaIDをキーに、cssカラーをバリューに指定します。ここで指定があったAreaはareaActiveStrokeColorでの指定を上書きします。
transparentDefaultAreas	Boolean	false	全てのAreaのデフォルト時の塗り色と線色を透明にします。(またこの時、その他のエリアのカラー定義はすべて無効化されます。)
areaChangeSpeed	Number	0.5	Areaの切り替わるスピードを指定します。（単位は秒）

Label

Option Name	Type	Default	Description
labelDefaultFillColor	String	#555	全てのLabelのデフォルト時の塗り色を一括指定します。
labelDefaultFillColors	Object	{}	個々のLabelのデフォルト時の塗り色を個別指定します。 Note areaIDをキーに、cssカラーをバリューに指定します。ここで指定があったLabelはlabelDefaultFillColorでの指定を上書きします。
labelActiveFillColor	String	#555	全てのLabelのアクティブ時の塗り色を一括指定します。
labelActiveFillColors	Object	{}	個々のLabelのアクティブ時の線色を個別指定します。 Note areaIDをキーに、cssカラーをバリューに指定します。ここで指定があったAreaはlabelActiveFillColorでの指定を上書きします。
labelDefaultStrokeColor	String	#fff	全てのLabelのデフォルト時の線色を一括指定します。
labelDefaultStrokeColors	Object	{}	個々のLabelのデフォルト時の線色を個別指定します。 Note areaIDをキーに、cssカラーをバリューに指定します。ここで指定があったAreaはlabelDefaultStrokeColorでの指定を上書きします。
labelActiveStrokeColor	String \| undefined	undefined	全てのLabelのアクティブ時の線色を一括指定します。 Note 通常はデザイン時に指定した色がアクティブ色として割り当てられます。
labelActiveStrokeColors	Object	{}	個々のLabelのアクティブ時の線色を個別指定します。 Note areaIDをキーに、cssカラーをバリューに指定します。ここで指定があったAreaはlabelActiveStrokeColorでの指定を上書きします。
transparentDefaultLabels	Boolean	false	全てのLabelのデフォルト時の塗り色と線色を透明にします。(またこの時、その他のエリアのカラー定義はすべて無効化されます。)
labelDispAnim	'static' \| 'fadeIn' \| 'fadeInUp' \| 'fadeInRight' \| 'fadeInDown' \| 'fadeInLeft'	fadeIn	初期化時のLabelの表示エフェクトを指定します。
noEventLabels	Array	[]	Labelをクリックした時のイベントを無効にします。無効にしたいAreaID名を列挙します。 Note 通常Labelはクリックすると、対応するAreaをアクティブ化するイベントが割り当てられています。

Content

Tips

Content refers to the parts included in the Option Parts, which will be explained later.

Option Name	Type	Default	Description
contentChangeSpeed	Number	0.5	コンテンツ（data-mapnj="area-content"）の切り替わるスピードを指定します。（単位は秒）

Background

Option Name	Type	Default	Description
bgDefaultImage	String	''	全てのAreaが非アクティブの時にマップの背景に表示される画像のパス指定します。
bgImages	Object	{}	Areaアクティブ時にマップの背景に表示される画像をAreaIdをキー、画像パスをバリューとし個別指定します。
bgBrightness	Number	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.

Sample: HTML


<!-- Click to make SVG active. -->
<button data-mapnj="selector" data-area-id="foo">Active Foo</button>

<!-- Click to make all SVGs default. -->
<button data-mapnj="reset-selector">Reset</button>

<!-- Appears when A is active. -->
<div data-mapnj="content" data-area-id="foo"></div>

<div>
  <svg id="mapnj-area-foo"></svg>
  <svg id="mapnj-area-bar"></svg>
</div>

Parts Name	Data Attributes	Description
Selector	data-mapnj="selector" & data-area-id="[AreaID]"	クリック時、data-area-idと一致するAreaIDを持つAreaをアクティブ化させます。 ※ data-area-idに空文字を指定すると、後述のarea-reset-selectorと同じ結果になります。
ResetSelector	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.

Sample: JavaScript

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を最後尾文字列とし、付加されます。