今回はenebularクラウド実行環境だけで動作するシンプルな OpenStreetMap 表示の仕組みを体験します。この仕組みが使えると、位置情報を持つデータを可視化でき、enebular でのデータ活用の幅が広がります。
クラウド実行環境の準備
過去記事の「新リリースのenebularクラウド実行環境の使い方 」の「クラウド実行環境の準備」を参考にクラウド実行環境を準備します。
HTTP トリガー設定
同様に過去記事の「クラウド実行環境での HTTP トリガーに設定する重複しない URL をつくる TIPS」を参考にHTTP トリガー設定します。
Discover Flow からフローをインポート
今回のフローはこちらです。 → lcdp-osmap-simple
「インポート」ボタンをクリックし、宛先のプロジェクトを選択してインポートします。
インポートできたらエディタで開いてみます。
フローの仕組み
フローの仕組みを説明していきます。
前半は クラウド実行環境で、アクセスするパスによって分岐する仕組み があります。今回はパスの分岐はないですが、今後拡張しやすくするために残しています。
大事なのは、その後のフローです。
Qiita記事「Leaflet + OpenStreetMap で地図情報を扱うサンプルコード」と Leaflet の本家のサイト “Tutorials – Leaflet – a JavaScript library for interactive maps” を参考にしつつ、シンプルな OpenStreetMap 表示をつくりました。とても分かりやすく参考になる記事、ありがとうございます！
こちらのマップ設定と書いてある change ノードをダブルクリックして見てみましょう。
このように、マップがどの緯度経度を中央にして表示するかの緯度経度の値として msg.mapSetting.startLocationLat と mapSetting.startLocationLong があります。また、マーカーを表示するための mapSetting.marker1LocationLat、mapSetting.marker1LocationLong という配置する緯度経度の情報、mapSetting.marker1LocationMessage でマーカーの吹き出しに書かれるメッセージを表示しています。
この設定値をもとに、隣の HTML 出力と書いてある template ノードでデータを埋め込みます。template ノードもダブルクリックして見てみましょう。
ソースコードは以下のようになっています。
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="">
<script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>
<style>
#map { height: 360px; }<br />
</style>
<div id="map"></div>
<script></p>
<p>// マップの初期位置<br />
let map = L.map('map', {<br />
center: [<br />
{{mapSetting.startLocationLat}},<br />
{{mapSetting.startLocationLong}}<br />
],<br />
zoom: 17,<br />
});</p>
<p>L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {<br />
maxZoom: 19,<br />
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'<br />
}).addTo(map);</p>
<p>// マーカー 1 番目<br />
let marker1 = L.marker(<br />
[<br />
{{mapSetting.marker1LocationLat}},<br />
{{mapSetting.marker1LocationLong}}<br />
]<br />
).addTo(map);<br />
marker1.bindPopup("{{{mapSetting.marker1Message}}}").openPopup();</p>
<p></script>三重括弧形式で一部の値を HTML エスケープ抑制
先ほどの change ノードで設定した値を OpenStreetMap の仕様に合わせて {{mapSetting.marker1LocationLat}} といった形で埋め込んでいます。template の中では {{変数名}} という形で msg から流れてきた値を HTML ソースに反映できます。
marker1.bindPopup("{{{mapSetting.marker1Message}}}").openPopup();については {{{mapSetting.marker1Message}}} と上記の {{変数名}} という形ではなく {{{変数名}}} です。
このあたりは template ノードのヘルプに書かれている三重括弧形式という便利な機能です。
通常の {{変数名}} という二重括弧では置換対象のHTML要素をエスケープされますが、マーカー内の HTML を素直に出したいために template ノードの機能として、HTML エスケープを抑止できる {{{三重}}} 括弧形式があるので使っています。
この change ノードと template ノードで作られた HTML ソースコードが LCDP out ノードから出力されます。
フローのデプロイ
ということで、フローをクラウド実行環境に反映します。
先ほどの「マップ設定」と書いてある change ノードをダブルクリックして完了ボタンを押しておけば保存できるはずです。
新リリースのenebularクラウド実行環境の使い方 の「フローのデプロイ方法」を参考にクラウド実行環境にフローをデプロイします。
HTTP トリガー URL で動作確認
準備ができたら HTTP トリガーの URL にアクセスしてみましょう。
このように enebular で事前にデータが埋め込まれた OpenStreetMap が表示されます！
クラウド実行環境だけで動作するシンプルな OpenStreetMap 表示の仕組みを体験できました。
この仕組みが使えると、地図をサッと表示させることができます。位置情報を持つデータをOpenStreetMap によって可視化でき、enebular でのデータ活用の幅が広がりますので、ぜひお試しください！