Demo - Room - MapNJ

デモ - Room

Design

ベクターでデザイン素材を用意します
エリア化したいパーツのレイヤー名をmapnj-area-xxとします。
ラベル化したいパーツのレイヤー名をmapnj-label-xxとします。

Tips

このデモではareaの上にラベルを配置しました。

HTML

<div id="mapnj-room">
  <svg>
    <rect id="mapnj-area-room" ... />
    <rect id="mapnj-area-toilet" ... />
    <rect id="mapnj-area-balcony" ... />
    <rect id="mapnj-area-closet" ... />
    <rect id="mapnj-area-secret" ... />

    <path id="mapnj-label-room" d="..." />
    <path id="mapnj-label-toilet" d="..." />
    <path id="mapnj-label-balcony" d="..." />
    <path id="mapnj-label-closet" d="..." />
    <path id="mapnj-label-secret" d="..." />
  </svg>
</div>

任意のIDを持ったラッパーを用意します。
SVGデータをラッパー内に貼り付けます。

JavaScript

const mapnjRoom = new MapNJ("#mapnj-room", {
  activeAreaId: "room",
});

mapnjRoom.on("AREA_CHANGE", (mapnj) => {
  if (mapnj.state.activeAreaId === "secret") {
    alert("ふふふ、この部屋に気づきましたか...");
  }
});

Tips

選択エリアが変更された時のスクリプトを追加します。(AREA_CHANGE)