MapNJ v0.2.0

デモ - 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("ふふふ、この部屋に気づきましたか...");
  }
});