MapNJ v0.2.0

デモ - Nexus of R

Story - Nexus of R

星のほとんどが海に囲まれた惑星Rに存在するわずかな陸地には4つの異なる文化と思想で領土が分断されていました。長く戦乱の時代を繰り返したRでは高度な文化制御プログラムを用い平和を維持する時代がやってきました。

...それから100年、突如として始まったR-gemの自己崩壊。 またも分断と生態系の危機が起きようとしています。 なぜジェムは崩壊したのか？真実とRの行末は!?。

Fangra

Fangraは獣人族の国です。領土の80%は広大な大自然が広がり、山を崩した一部のエリアで小さな集落を作り生活をしています。見た目に反して、とても平和主義で、殺生を嫌います。クラフトが得意な民族です。

Mawaria

Mawariaは聖術と呪術のスペシャリスト集団の国です。一般術師が住む内陸エリアと上級術師が住む聖地zipa島で構成されています。R-gem稼働以降は稼働エネルギー供給を行う国として極めて重要な役割を担っています。

Neoim

Neoimは常に戦乱の中心となった国です。弱肉強食と淘汰のプロセスこそが本当の生態系維持につながるという思想があり、破壊国家の異名を持ちました。一方でR-gem稼働以降は最も多様化した文化が生まれ、自由主義中心の経済圏が発展しています。

Techsyn

Techsynは国民全員がAIで構成された集団です。電子頭脳R-synを組み込んだ筐体とsynseaネットワークによる国民総意識共有主義が特徴です。R-Gemの初期開発にも大きく貢献した経緯があります。

Design

AreaとLabelを定義。Labelには線も加える。

Areaの色をそれぞれ別の色にする。

MAWARIAのLabelだけ外部に配置し、棒線とテキストをグループ化し、これをLabelとする。

HTML

SVGパーツの他に、エリアに連動した表示コンテンツと外部操作パーツを配置。

Reference: Option Parts

      
<div id="mapnj-nexsus-of-r">

  <!-- selector and reset selector option parts -->
  <ul>
    <li><a data-mapnj="reset-selector" data-area-id="">What's Nexsus of R?</a></li>
    <li><a data-mapnj="selector" data-area-id="fangra">Fangra</a></li>
    ...
  </ul>

  <svg>...</svg>

  <!-- content option parts -->
  <div>
    <div data-mapnj="content" data-area-id="">
      (Description of Nexus of R)
    </div>
    <div data-mapnj="content" data-area-id="fangra">
      (description of Fangra )
    </div>
    ...
  </div>

  <!-- content option parts 2 -->
  <div>
    <div data-mapnj="content" data-area-id="fangra">
      <img src="/path/to/character_fangra.png" alt="">
    </div>
    ...
  </div>
</div>

JavaScript

Areaのデフォルト色を変更。

MAWARIAのLabelのみ、デフォルトカラーを変更。

MAWARIAのLabelのみ、クリックイベントを発生させないようにする。

      
const mapnjNexsusOfR = new MapNJ("#mapnj-nexsus-of-r", {
  attributeType: "data-name",
  areaDefaultFillColor: "rgba(255,255,255,0.7)",
  areaDefaultStrokeColor: "rgba(255,255,255,0.7)",
  labelDefaultFillColor: "black",
  labelDefaultFillColors: {
    mawaria: "white",
  },
  labelDefaultStrokeColors: {
    mawaria: "white",
  },
  labelDispAnim: "fadeInUp",
  noEventLabels: ["mawaria"],
  bgDefaultImage: "/images/nexsus_of_r_bg_default.png",
  bgImages: {
    fangra: "/images/nexsus_of_r_bg_fangra.png",
    mawaria: "/images/nexsus_of_r_bg_mawaria.png",
    neoim: "/images/nexsus_of_r_bg_neoim.png",
    techsyn: "/images/nexsus_of_r_bg_techsyn.png",
  },
  bgBrightness: 80,
  bgChangeSpeed: 0.8,
});