More than 3 years have passed since last update.

OutSystems MapsでLeafletを選択できるようになったので確認してみる

Posted at 2022-04-02

公式サポートありの、地図機能を提供するForgeコンポーネント「OutSystems Maps」が、これまでのGoogle Mapsに加えて、Leafletを使えるようになっている。

Leafletは、有償のAPIキーがなくても使えるので、軽く試してみた。

環境

Personal Environment(Version 11.14.0 (Build 33133))
Service Studio(Version 11.14.11)
OutSystems Maps(Version 1.6.0)

LeafletMap Blockを画面に配置すると、アメリカのボストンあたりを中心に表示される。

幅・高さ共に、配置先に対して100%。

高さを指定するには、BlockのHeightプロパティを使う。Heightプロパティに設定した値が、HTMLタグのstyle属性に使用される。

幅を指定する際には、ContainerでLeafletMap Blockを囲み、そのContainerに設定するといい。

初期表示時点の中心座標を設定するには、「緯度,経度」のフォーマットで、Centerプロパティに設定する。

Google Mapsで定義された、地図の拡大度を示す値。
1-20の数字で示し、1だと全世界を表示できる縮尺で表示し、数字が大きくなるほど拡大して表示される。

OutSystems MapsのStatic Entity「Zoom」のレコードとして設定する。

中心座標を上野駅あたり、ズームレベルを16とする設定。

上記設定での表示例。

地図上に図形を表示するには、LeafletMap Blockの「AddOns_Placeholder」Placeholder内に、対応するBlockを配置する。

表示できる図形にはいくつか種類があるが、以下ではMarker（特定の座標にピンを立てるもの。点座標）を例とする。

設定例

地図にマーカーを表示すると、地図自体のプロパティCenterよりも最初のマーカーのPositionが優先されるようだ。

地図への操作に反応する処理を書くには、LeafletMap Blockの「Events_Placeholder」Placeholder内に、Map_Events\MapEvent Blockを配置する。

このとき、EventNameプロパティに対象となるイベントを設定（MapEventTrigger Static Entityを使う）する。選択できるイベントは

イベントハンドラのInput Parameterは以下の通り