Maplibre GL コントロールボタンの表示

Maplibreには標準で様々なマップをコントロールするボタンが用意されています。コントロールボタンの表示方法とその種類について紹介します。

コントロールボタンの概念。

コントロールボタンを、マップ上四隅に表示可能で IControl タイプのオブジェクトで管理されます。 IControlオブジェクトを自作することも可能で、必要なボタンを追加することもできます。

mapクラスのaddControl()メソッドでIControlオブジェクトを追加することで表示します。

map.current.addControl(new maplibregl.ScaleControl());

ボタンをクリックすると、ブラウザの現在位置へ移動するボタンを表示します。

map.current.addControl(new maplibregl.GeolocateControl());

GeolocateControlクラスには、Watchモードと言うユーザの移動履歴を追跡するモードがあります。こちらの動作は本ページでは紹介しません。
後日別ページで紹介する予定です

地図の基本的なナビゲーションボタンを表示する場合、NavigationControleクラスを作成しマップに追加します。

map.current.addControl(new maplibregl.NavigationControl());

サンプルは右上にに表示されます。

距離計を表示する場合、ScaleControleクラスを作成しマップに追加します。

map.current.addControl(new maplibregl.ScaleControl());

サンプルは左下に表示されます。