Maplat UI（UIあり版）をnpmから設定 #GIS

Maplat Advent Calendarですが、22日目はUI付きのMaplatをnpmを使って設定してみましょう。
動くものはこちらになります。 => CodeSandBox Maplat Advent Calendar day 22

20日目のコードをベースに、npmを使うので、まずはpackage.jsonを設定しましょう。

package.json

{
  "name": "maplat-advent-calendar-day22",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "scripts": {
    "start": "parcel index.html --open",
    "build": "parcel build index.html"
  },
  "dependencies": {
    "@maplat/ui": "0.6.4"
  },
  "devDependencies": {
    "@babel/core": "7.2.0",
    "parcel-bundler": "^1.6.1"
  },
  "keywords": []
}

dependenciesで@maplat/uiの0.6.4を読み込んでいます。

CodeSandboxでは変更かけるとすぐ反映してくれますが、ローカルでやる場合は当然package.jsonを変更するだけでなく、npm installなどが必要です。

続いて、app.cssはほぼ同じなので、まずindex.htmlからCDNへのリンクを外します。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Maplat Advent Calendar Day 22</title>
    <link rel="stylesheet" href="app.css" />
  </head>
  <body>
    <div class="mainview">
      <div id="map_div"></div>
    </div>
  </body>
  <script src="app.js"></script>
</html>

大きく変わるのはapp.js。

app.js

import "@maplat/ui/dist/maplat.css";
import { MaplatUi } from "@maplat/ui";

var option = {
  appid: "maplat_ac_day22"
};

var app = new MaplatUi(option);
app.waitReady.then(function() {});

まず、importで@maplat/ui/dist/maplat_core.cssを指定し、cssを読み込んでいます。
こんな構文はES6にはなく、完全にparcel環境依存なのですが、まあそれはいいでしょう。
続けてやはりimportで、@maplat/uiからMaplatUiクラスを読み込んでいます。

optionは昨日とほぼ一緒。

違うのはMaplat UIのオブジェクトを作るところです。
npm呼び出しの場合は、new構文でMaplatUiのオブジェクトを作り、そのオブジェクトのプロパティwaitReadyがPromiseを返すので、それをthenやawaitで待ってオブジェクトを作ります。

これは、CDN呼び出しの方のインタフェースが、まだMaplatがモジュールシステムにrequire.jsを使っていた頃の名残なので、将来的にCDN呼び出しの場合もnpmの方のインタフェースに合わせる可能性があります。
もっとも、CDN呼び出し側の後方互換性も維持するつもりではあります。

これでMaplat UIがnpm経由で動作するようになります。

動作結果は昨日と同じなので省略。

さて、ほぼほぼAdvent Calendar 3日目と同じ文章で記事をでっちあげた22日目完了です。
省エネ省エネ。
明日は、Maplat UIの中のMaplat Coreオブジェクトを通じて、UI付きのMaplatもAPI制御する方法を試してみます。