【ITニュース解説】MapLibre GL Markers: Custom Icons, Popups & Events with Geoapify

地図アプリケーションでは、特定の地点を指し示す「マーカー」が非常に重要な役割を果たすものだ。ユーザーが関心を持つ場所を特定したり、検索結果を強調表示したり、一時的にピンを置いたりする際に使われる。MapLibre GLという地図ライブラリでは、地図上に点を表示する方法が主に二つある。一つはHTMLの要素（DOM要素）として地図の上に配置される「マーカー」であり、もう一つは地図の描画エンジンが直接描くベクターベースの「シンボルレイヤー」である。この解説では、特に柔軟なカスタマイズとインタラクティブ性を持つ前者の「マーカー」機能に焦点を当てて詳しく説明する。

MapLibre GLのマーカーは、HTMLの部品として扱われるため、非常に自由に見た目を変えたり、ユーザーの操作に反応させたりできる点が特徴だ。例えば、地図上をクリックした場所にピンを立てたり、検索でヒットした場所をハイライト表示したり、開発中に一時的な目印を置いたりするのに適している。

基本的なマーカーの作成はとても簡単である。new maplibregl.Marker()という命令を使って新しいマーカーを作り、その位置を.setLngLat([経度, 緯度])で指定し、最後に.addTo(map)で地図に追加すると、デフォルトの青いピンが地図上に現れる。この時、マーカーを作成する際にオプション（MarkerOptions）を渡すことで、マーカーの見た目や動きを細かく設定できる。

MarkerOptionsには様々な設定項目があるが、特に重要なのはいくつか存在する。例えば、anchorオプションは、マーカーのどの部分が指定した座標に「固定」されるかを決める。デフォルトではマーカーの中心が座標に合うが、ピンの形をしたアイコンの場合、先端が座標に合うように"bottom"を指定することが多い。draggable: trueを設定すると、ユーザーがマーカーをドラッグして移動できるようになり、インタラクティブな地図を作成できる。また、classNameを使えば、CSSのクラスを追加してマーカーのスタイルを自由に変更できる。

中でも最も強力なのがelementオプションである。これを使うと、MapLibre GLが用意するデフォルトの青いピンではなく、開発者が自由に作成したHTML要素をマーカーとして使えるようになる。例えば、<img>タグで画像をアイコンとして表示したり、スタイルを適用した<div>要素を使ったり、複雑な形状の<svg>を埋め込んだりすることも可能だ。これにより、ブランドロゴを表示したり、情報量のあるバッジを付けたりと、地図の表現力が大幅に広がる。

カスタムアイコンを使う際には、offsetオプションも非常に重要になる。これは、anchorで指定した固定点から、マーカーをどれだけずらして表示するかをピクセル単位で指定するものだ。例えば、ピン型のアイコンは、画像の下端の先端が地図の正確な位置を示すべきだが、anchor: "bottom"と指定しても、アイコンの影の部分などによってわずかなずれが生じることがある。このような場合、offset: [0, -4]のように少しだけ上にずらすことで、見た目の先端と地図上の座標を正確に一致させることができる。これは地図の正確性を保つ上で非常に細かいが重要な調整である。

マーカーには、クリックなどの操作があった際に情報を表示する「ポップアップ」機能も組み合わせることができる。ポップアップ自体はマーカーの一部ではないが、setPopup()メソッドを使ってマーカーに紐付けることができるのだ。ポップアップには、単純なテキストを表示するだけでなく、setHTML()メソッドを使えば、見出しや段落、リンク、画像などを含むリッチなHTMLコンテンツを表示できる。マーカーが作成された直後や特定の条件下で自動的にポップアップを開きたい場合は、marker.togglePopup()メソッドを呼び出すことで実現する。ただし、マーカーをクリックした際に、そのクリックイベントが意図せず地図全体のクリックイベントもトリガーしてしまうことがあるため、event.originalEvent.target.closest(".map-marker")のような条件でマーカーへのクリックを区別し、不要な処理を避けるように注意が必要だ。

マーカーはユーザーの操作に応じて様々なイベントを発火させる。例えば、marker.getElement().addEventListener("click", ...)を使って、マーカーがクリックされたときの処理を定義できる。マウスがマーカーの上に乗ったときにカーソルを変更するなど、DOMイベントとして扱える。もしマーカーをdraggable: trueで作成していれば、ドラッグに関連するイベントも利用できる。具体的には、ドラッグが開始されたときにdragstart、ドラッグ中にdrag、ドラッグが終了したときにdragendというイベントが発火する。dragendイベントの際にmarker.getLngLat()を呼び出せば、マーカーが移動した後の新しい座標を取得できるため、「場所を選択する」といった機能の実装に役立つだろう。

複数のマーカーを扱う場合、それらを効率的に管理する仕組みを持つことが重要である。例えば、作成したマーカーをJavaScriptの配列に保存しておくことで、後から特定のマーカーにアクセスしたり、まとめて操作したりできる。不要になったマーカーはmarker.remove()メソッドを呼び出すことで地図上から削除できる。全てのマーカーを削除したい場合は、配列に保存された全てのマーカーに対してループ処理でremove()を呼び出し、その後配列自体もクリアすると良い。このようにマーカーを適切に管理することで、地図上の要素が散らかるのを防ぎ、メモリリークのような問題も回避できる。特に、検索結果の表示のように、新しいデータが来るたびに既存のマーカーを削除して新しいマーカーを追加するような動的な更新が必要な場面では、この管理方法は不可欠となる。

しかし、マーカーがHTMLのDOM要素であるという性質上、多くの地点を表示する場合にはパフォーマンスの問題が生じることがある。数百、数千といった大量のマーカーを地図上に配置すると、ブラウザの描画処理が重くなり、地図のズームや移動が遅くなったり、動作が不安定になったりする可能性がある。頻繁にマーカーが追加・削除されるリアルタイムな更新が必要な場合も、DOMベースのマーカーは不向きである。

このような大規模なデータセットを扱う場合は、「シンボルレイヤー」という別の方法を用いるのが一般的だ。シンボルレイヤーは、地図データをGeoJSONという形式でMapLibre GLに提供し、地図の描画エンジンが直接アイコンを描画するため、DOM要素のオーバーヘッドがなく、非常に効率的に大量の点を表示できる。これは、地図のパフォーマンスとスムーズな操作性を確保するために重要である。状況に応じて、全体のデータはシンボルレイヤーで表示し、ユーザーが選択した特定の地点や現在操作しているポイントだけをインタラクティブなマーカーで表示する、といったハイブリッドなアプローチも有効な手段となる。

まとめると、MapLibre GLのマーカー機能は、ユーザーが直接操作できるようなインタラクティブなピン、ブランドのロゴや特定の情報を示すカスタムアイコン、一時的な目印など、柔軟な表現が必要な場合に非常に強力なツールとなる。MarkerOptionsを駆使することで、見た目だけでなく、ドラッグ可能にしたり、ポップアップで詳細情報を提供したりと、多岐にわたるカスタマイズが可能だ。しかし、大量のデータを扱う際には、パフォーマンスの観点からシンボルレイヤーなどの別の手法を検討する必要があることを覚えておくことが重要である。適切な場面で適切な表示方法を選択することが、効率的でユーザー体験の良い地図アプリケーションを開発する鍵となるだろう。