Maplatを使ってみたよ２　～ＵＩ付きはかっこいいよ！～


　[前回](https://qiita.com/snowdrops89/items/e153a108b9a356ea42d6)に引き続き、[Maplat](https://github.com/code4history/Maplat/wiki)で遊んでいきますですよ☆
　今回は、かっこいいＵＩ付きを使います。
　ＡＰＩも、知れる限りを一通りお試しします。

# ＵＩ付きのMaplatを使う
　MaplatCoreでとりあえず重ね合わせることに成功していれば、UI付きの設定は、いたって簡単。

> [Maplat UI（UIあり版）をCDNから設定](https://qiita.com/kochizufan/items/09795ab97a7ffe0845bf)

　index.htmlは、スクリプトの取り込み先を、変更するだけ！
　地図の切替なんかはＵＩがやってくれるから、自前のボタンは一回消します。

```html:index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Maplat UIのテスト</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/@maplat/ui@0.9.0/dist/assets/maplat.css"
    />
    <link rel="stylesheet" href="app.css" />
  </head>
  <body>
    <div class="mainview">
      <div id="map_div"></div>
    </div>
  </body>
  <script src="https://unpkg.com/@maplat/ui@0.9.0/dist/assets/maplat.js"></script>
  <script src="app.js"></script>
</html>
```

　app.jsは、APIの実行を`app`から、`app.core`に変えるだけ！
　ですが、タブン記事には記載されてないのですが、`createObject`のoptionオブジェクトに、ＵＩ追加出来る項目があったので、折角だから入れてみます。

```Javascript:app.js
var option = {
  appid: "Maplat_test_UI",
  enableHideMarker: true,   //マーカー非表示
  enableBorder: true,       //地図境界表示
  enableShare: true,        //共有
};

Maplat.createObject(option).then(function(app) {
  const viewpoint = {
    zoom: 3  //古地図倍率
  }
  const ratio = 20;  //透明度(うっすらベース地図が透けるくらい)

  window.setTimeout(function(){
    app.core.setViewpoint(viewpoint);   //app→app.core
    app.core.setTransparency(ratio);    //app→app.core
  }, 1);
});
```

　設定ファイルは、まず、`app_name`が必要。
　スプラッシュスクリーンに表示されるアプリ名という説明ですが、ＰＣの場合これが無いとタイトルが「undefined」になっちゃうんです。HTML側でtitleを設定していても、ここの価で上書きされるみたい。
　そして、`label`。地図を切り替えるＵＩの表示ラベルになります。

```json:apps/Maplat_test_UI.json
{
  "app_name": "Maplat UIのテスト",
  "home_position": [140.75680304835672, 41.79692727057318],
  "default_zoom": 17,
  "start_from": "goryokaku",
  "sources": [
    {
      "mapID": "goryokaku",
      "label": "五稜郭三分十間図",
      "setting_file" : "https://snowdrops89.github.io/Maplat_test/mapdata/maps/goryokaku.json",
      "thumbnail" : "https://snowdrops89.github.io/Maplat_test/mapdata/tmbs/goryokaku_menu.jpg",
      "url" : "https://snowdrops89.github.io/Maplat_test/mapdata/tiles/goryokaku/{z}/{x}/{y}.jpg"
    },
    {
      "mapID": "goryokaku2",
      "label": "五稜郭ノ図千分ノ一",
      "setting_file" : "https://snowdrops89.github.io/Maplat_test/mapdata/maps/goryokaku2.json",
      "thumbnail" : "https://snowdrops89.github.io/Maplat_test/mapdata/tmbs/goryokaku2_menu.jpg",
      "url" : "https://snowdrops89.github.io/Maplat_test/mapdata/tiles/goryokaku2/{z}/{x}/{y}.jpg"
    },
    "osm",
    "gsi",
    "gsi_ortho"
  ]
}
```

　それ以外は必須じゃないんですが今回、地図タイル画像、サムネイル画像、地図定義ファイルを全て外部に出したので、こんな感じ～。（設定ファイルだけでなく、mapsの定義ファイルの方のurlも直さなきゃなりませんが、compiledされていてアレなんでMaplatEditorで直して差し替える）
> [MaplatEditorでマッピングした地図をMaplat Coreに取り込む](https://qiita.com/kochizufan/items/763396cfc45c476e60b2)

　古地図も二枚にしたし、現代の地図も標準のものを全入れしてみました☆

　[distribution.zip](https://github.com/code4history/Maplat/blob/master/distribution.zip)をダウンロードしてみると、フォルダが増えています。`font`と、`locales`、そして、`images`の中のアイコン画像も増えていますので、`assets`の中に全てまるっとコピーします。
　そして、MaplatEditorで保存した時作成された、`tmbs`フォルダを、index.htmlと同じトコにコピー。地図切り替えのＵＩの所に表示されるサムネです。
　今は、osm、gsi、gsi_orthoのサムネは、`images`の中に入っていて、そこから読んでくれるようになったようです☆

　できました！　これだけでなんかもう、かっこええ～♪

# マーカーを表示

> [Maplat Coreでマーカーを静的に表示する](https://qiita.com/kochizufan/items/91b4d6b97def9a175a57)
> [Maplat UIでPOIを表示する](https://qiita.com/kochizufan/items/8838d7f6eed0fa292c88)

　要するに設定ファイル中に、`pois`でマーカーの設定ファイルの場所を指定し、そこにJSONさんでマーカーごとの設定を記してやるということですね。


```json:apps/Maplat_test_UI.json
{
  "app_name": "Maplat UIのテスト",
       :
  （～中略～）
       :
    "osm",
    "gsi",
    "gsi_ortho"
  ],
  "pois": "pois/pois.json"
}
```

　記事では、マーカーの座標を`lng`と`lat`と、分けて設定していたけど、`lnglat`と、おまとめすることもできるっぽい。様々な点で、その方がラクなのでそうする。
　そして、ちょっとアイコンの変更なんかもお試ししてみたりして・・・

> [Maplat Coreでマーカーの画像を変更する（レイヤー単位）](https://qiita.com/kochizufan/items/4c0a5635b52d9ac2df18)
> [Maplat Coreでマーカーの画像を変更する（ピン単位）](https://qiita.com/kochizufan/items/ea8e9c4b6022592543c2)

　選択中のアイコンを設定する属性が`selected_icon`から`selectedIcon`に変わっていた。アンダーバーでつないでいたヤツは全体的に変更になっているっぽいので気を付ける。
　アイコン画像のありかは、pois.jsonからの相対ではなくてトップからのようなので気を付ける。
　で、こんな感じ？

```json:apps/pois.json
{
  "観光": {
    "pois": [
      {
        "id": "箱館奉行所",
        "lnglat":[140.7567252299387,41.79693537609609],
        "name": "箱館奉行所(復元)",
        "url": "https://www.hakodate-bugyosho.jp/"
      }
    ],
    "icon": "pois/img/blue_marker.png",
    "selectedIcon": "pois/img/red_marker.png"
  }
｝
```

　これを、必要なだけずらっと指定して行けば良いのだろう。
　ＵＩ付きなら、ぜんっぜんプログラムが出来なくても、地道なマッピング作業とデータ作成だけで、立派な地図アプリが作れちゃうよ☆　しゅごい！

# でもAPIつかう

　[coreのexample](https://github.com/code4history/MaplatCore#browser)を眺めると、マーカーやレイヤーを出したり消したり動かしたりということが色々できるようなので、やってみる。
　やりたいのは、マーカーをレイヤーごとにまるっと表示したり非表示にしたりすることです。

　index.htmlに再びボタンを作りますが、そのHTMLについては割愛ｗ

```Javascript:app.js(一部)
//ボタンで表示するマーカーをレイヤー毎に切り替え
  document.getElementById("LayerALL").addEventListener("click", function(e) {
    app.core.showPoiLayer("観光");
    app.core.showPoiLayer("史跡");
  });
  document.getElementById("Layer1").addEventListener("click", function(e) {
    app.core.showPoiLayer("観光");
    app.core.hidePoiLayer("史跡");
  });
  document.getElementById("Layer2").addEventListener("click", function(e) {
    app.core.showPoiLayer("史跡");
    app.core.hidePoiLayer("観光");
  });
  document.getElementById("LayerHide").addEventListener("click", function(e) {
    app.core.hidePoiLayer("観光");
    app.core.hidePoiLayer("史跡");
  });
```

　こんな感じですかね？
　全てのマーカーを表示するAPIなどもありますが、隠されたレイヤーについては隠されたままです。ＵＩでマーカー非表示をオフにした場合も同様で、邪魔されずイイ感じ♪

　一応、その他のAPIも一通りお試し。

```Javascript:app.js(一部)
//全マーカー表示、非表示
  document.getElementById("PoiALL").addEventListener("click", function(e) {
    app.core.showAllMarkers();
  });
  document.getElementById("hideALL").addEventListener("click", function(e) {
    app.core.hideAllMarkers();
  });

//マーカー選択、解除
  document.getElementById("select").addEventListener("click", function(e) {
    app.core.selectMarker("タワー");
  });
  document.getElementById("unSelect").addEventListener("click", function(e) {
    app.core.unselectMarker();
  });

//マーカークリア、リムーブ
  document.getElementById("clear").addEventListener("click", function(e) {
    app.core.clearMarker("史跡");
  });
  document.getElementById("remove").addEventListener("click", function (e) {
    app.core.removeMarker("タワー");
  });

//マーカー追加、レイヤー追加
  document.getElementById("add").addEventListener("click", function (e) {
    app.core.addMarker({
        "id": "タワー",
        "lnglat":[140.75395646590007,41.79463859482169],
        "name": "五稜郭タワー",
        "url": "https://www.goryokaku-tower.co.jp/"
    },"観光");
  });
  document.getElementById("addLayer").addEventListener("click", function (e) {
    app.core.addPoiLayer("goryokaku2#新規",{
        "icon": "pois/img/blue_marker.png",
        "selectedIcon": "pois/img/red_marker.png"
    });
    app.core.addMarker({
        "id": "二ノ橋",
        "lnglat":[140.75575537303416,41.79561542967801],
        "name": "二ノ橋",
        "html": "鯉がいっぱいいます！",
        "icon":"pois/img/red_marker.png"
    },"goryokaku2#新規");
  });

//線引く
  document.getElementById("line").addEventListener("click", function (e) {
    app.core.addLine({
      lnglats: [
        [140.75509899875652,41.79486069621012],
        [140.7560612947552,41.79512929859726],
        [140.75563781096838,41.795486705576906],
        [140.75505015022142,41.79561680945611],
        [140.75509899875652,41.79486069621012]
      ],
      stroke: {
        color: "#FF0000",
        width: 5
      }
    });
  });

//マーカーの移動
  document.getElementById("move").addEventListener("click", function (e) {
    var poiData = {
      "lnglat":[140.75553148088343,41.79538581110293],
      "icon":"pois/img/red_marker.png"
      }
    app.core.updateMarker("箱館奉行所", poiData);
  });
```

　こんな感じか・・・
　あってるかな？

### API
<dl>
  <dt>● showPoiLayer(Layer)</dt>
  <dd>引数<B>Layer</B>は文字列</dd>
  <dd>・指定したレイヤーを表示する。</dd>
  <dd>　Layerは、マーカー設定ファイルで指定したレイヤー名。</dd>
</dl>
<dl>
  <dt>● hidePoiLayer(Layer)</dt>
  <dd>引数<B>Layer</B>は文字列</dd>
  <dd>・指定したレイヤーを隠す。</dd>
  <dd>　Layerは、マーカー設定ファイルで指定したレイヤー名。</dd>
</dl>
<dl>
  <dt>● showAllMarkers()</dt>
  <dd>・表示されているレイヤーの、全てのマーカーを表示。</dd>
</dl>
<dl>
  <dt>● hideAllMarkers()</dt>
  <dd>・全てのマーカーを隠す。</dd>
</dl>
<dl>
  <dt>● selectMarker(marker);</dt>
  <dd>引数<B>marker</B>は、マーカーのnamespaceID属性（idと同じものが自動的に設定されてるっぽい。idを設定しなかった場合はレイヤー名で連番になるっぽい）</dd>
  <dd>・マーカーを選択状態にする。</dd>
  <dd>　マーカーが地図の中心に移動し、マーカー画像もselectedIconに変わる。</dd>
</dl>
<dl>
  <dt>● unselectMarker();</dt>
  <dd>・マーカーの選択状態解除。</dd>
</dl>

<dl>
  <dt>● clearMarker(Layer);</dt>
  <dd>・指定したレイヤーのマーカーを、まるっと消去する命令っぽい。</dd>
  <dd>　クリアしたマーカは戻せません。</dd>
</dl>
<dl>
  <dt>● removeMarker(marker);</dt>
  <dd>・指定したマーカーを単独で消去する命令っぽい。</dd>
  <dd>　消したマーカーは戻せません。</dd>
</dl>
　
> [Maplat Coreでマーカーを動的に表示する](https://qiita.com/kochizufan/items/c0c0ea4d3f1ed87d432e)

<dl>
  <dt>● addMarker(poiData,Layer)</dt>
  <dd>引数<B>poiData</B>はオブジェクト</dd>
  <dd>・マーカー設定ファイルに記載する内容と同じ。</dd>
  <dd>引数<B>Layer</B>は文字列</dd>
  <dd>　poiDataの内容でLayerへ動的にマーカー追加。</dd>
  <dd>　Layerは「地図ID#レイヤー名」とすることで、特定の地図のレイヤーにだけ追加もできるっぽい。</dd>
</dl>

<dl>
  <dt>● addPoiLayer(Layer,iconData)</dt>
  <dd>引数<B>Layer</B>は文字列</dd>
  <dd>引数<B>iconData</B>はオブジェクト</dd>
  <dd>・マーカー設定ファイルに記載する内容と同じ。省略可</dd>
  <dd>　iconDataでLayer名のレイヤーを追加。</dd>
  <dd>　Layerは「地図ID#レイヤー名」とすることで、特定の地図のレイヤーにもできるっぽい。</dd>
  <dd>※テストでは二枚目の古地図「五稜郭ノ図千分ノ一」に「新規」レイヤを作成し、マーカーも追加。この地図を選択した時しか、マーカーは現れません。（スライダで古地図の表示を０にしてベース地図だけの表示にしてもマーカーは残りますが、ベース地図を選択した場合は、消えます）</dd>
</dl>

　
> [Maplat Coreでラインを地図上に表示する](https://qiita.com/kochizufan/items/7cbd306a7ff8a1d0d906)

<dl>
  <dt>● addLine(lineData)</dt>
  <dd>引数<B>lineData</B>はオブジェクト</dd>
  <dd>・["lnglats"]で線を引く座標を指定し、["stroke"]で線色["color"]や線太さ["width"]を指定。</dd>
</dl>

　
> [Maplat Coreで古地図の上にバスを走らせてみる](https://qiita.com/kochizufan/items/26d7e3287c5d1402eff5)

<dl>
  <dt>● updateMarker(marker,poiData)</dt>
  <dd>引数<B>poiData</B>はオブジェクト。</dd>
  <dd>・マーカー設定ファイルに記載する内容と同じ。</dd>
  <dd>　markerの設定をpoiDataに更新。</dd>
  <dd>　lnglatの価を変更してマーカーを移動させたりできる。</dd>
</dl>

# 動作確認

> https://snowdrops89.github.io/Maplat_test/test_UI/index.html

　できました！　やーん、よきよき～♪♪♪
　APIも、テストの動作自体は、一応希望通りにいっているので、（タブン）合っているとは思う。

# つづきます
　今回は、ワタクシ初のなでしこタグの無い記事でした。じゃばすくりぷとを頑張った～～～。
　APIは、正式なリファレンスが無く、Javascriptのよく分かってない人が目を回しながらまとめたものなので、なんか間違ってるかも知れない；
　間違いや足りてないコトを発見した場合は、コメントでも編集リクエストでも教えて頂ければ幸いです。
　ともかく、これで使いそうなAPIが大体分かったので、なでしこさんから使えるように、プラグインにしていこうと思います。がんばる☆