Maplat Coreでマーカーを静的に表示する

Maplat Advent Calendar 6日目は、Maplat Coreでマーカーを静的に表示する方法です。
今日の動くものはここで確認できます。 => CodeSandBox Maplat Advent Calendar day 6

今日の実装は特にボタンなどいらないので、4日目のコードをベースに改造しましょう。

まず、POIを定義するファイルを外出しで準備しましょう。

pois/poi.json

{
  "main": {
    "pois": [
      {
        "id": "castle",
        "lat": 36.243881,
        "lng": 139.543517,
        "name": "館林城"
      }
    ]
  }
}

これの意味ですが、mainというIDのレイヤーの配下に、POI-IDがcastle、緯度経度36.243881,139.543517、POI名が館林城のPOI1つが配置されることになります。
レイヤーIDのmainは第1POIレイヤーのデフォルトであり、複数レイヤーを使わない場合は以下のように省略することもできます。

pois/poi.json(レイヤー設定省略版)

[
  {
    "id": "castle",
    "lat": 36.243881,
    "lng": 139.543517,
    "name": "館林城"
  }
]

いずれにせよ上記のようにpois/poi.jsonを設置した後に、アプリ設定ファイルを以下のように書き換えます。

apps/maplat_ac_day6.json

{
  "home_position": [139.5321, 36.249302],
  "default_zoom": 17,
  "start_from": "tatebayashi_ojozu",
  "sources": [
    {
      "mapID": "tatebayashi_ojozu",
      "setting_file": "https://s.maplat.jp/r/tatebayashimap/maps/tatebayashi_ojozu.json"
    },
    "osm"
  ],
  "pois": "pois/pois.json"
}

変更箇所はpoisで外部POI定義ファイルを指定しているところですが、このPOI定義、外部定義ファイルにしなくとも、アプリ設定ファイルの中で直接定義することも可能です。

apps/maplat_ac_day6.json(POI設定直接指定版)

{
  "home_position": [139.5321, 36.249302],
  "default_zoom": 17,
  "start_from": "tatebayashi_ojozu",
  "sources": [
    {
      "mapID": "tatebayashi_ojozu",
      "setting_file": "https://s.maplat.jp/r/tatebayashimap/maps/tatebayashi_ojozu.json"
    },
    "osm"
  ],
  "pois": {
    "main": {
      "pois": [
        {
          "id": "castle",
          "lat": 36.243881,
          "lng": 139.543517,
          "name": "館林城"
        }
      ]
    }
  }
}

どちらでも動作するので、どちらでも問題ありません。

これらの設定でPOIピンは表示されるのですが、どうせならPOIピンをクリックした際のイベント取得なども加えてみましょう。
app.jsをこんな感じにします。

app.js

import "@maplat/core/dist/maplat_core.css";
import { MaplatApp } from "@maplat/core";

var option = {
  appid: "maplat_ac_day6"
};

var app = new MaplatApp(option);
app.waitReady.then(function() {
  app.addEventListener('clickMarker', function(evt) {
    app.selectMarker(evt.detail.namespace_id);
    console.log(evt.detail);
  });
  app.addEventListener('clickMap', function (evt) {
    app.unselectMarker();
    console.log(evt.detail);
  });
});

appにclickMarkerのイベントリスナーを加えて、その中でapp.selectMarkerを使い、クリックされたPOIピンを選択状態（ピン画像が選択状態画像になり、ピンが地図中心に移動する）にしています。
さらにクリックされたPOIの情報もconsole.logで表示しています。
これだけではクリックされたピンは選択状態から戻れないので、appにclickMapのイベントリスナーを加えて、POI以外の地図面がクリックされた際には、app.unselectMarkerを使い、全てのPOIの選択状態をクリアしています。
さらに、クリックされた地図上の場所情報もconsole.logで表示しています。

これを実行してみると、こんな感じになります。

明日は、POIを動的に追加する方法について記事に書きます。