デモ - Room
Design
AreaとLabelを定義。Labelには線も加える。
HTML
<div id="mapnj-room">
<svg>...</svg>
</div>
JavaScript
ページロード時に選択されているエリアを指定。エリアが切り替えられた時のイベントにコールバックを指定。
const mapnjRoom = new MapNJ("#mapnj-room", {
activeAreaId: "room",
});
mapnjRoom.on("AREA_CHANGE", (mapnj) => {
if (mapnj.state.activeAreaId === "secret") {
alert("ふふふ、この部屋に気づきましたか...");
}
});