Maplat Advent Calendarですが、22日目はUI付きのMaplatをnpmを使って設定してみましょう。
動くものはこちらになります。 => CodeSandBox Maplat Advent Calendar day 22
20日目のコードをベースに、npmを使うので、まずは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へのリンクを外します。
<!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。
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制御する方法を試してみます。