年の瀬の先週末から、2回目のCovid19にやられてしまいました。
何とか熱は下がったので、あわててアドベントカレンダーの残を片付けています。
あと、Maplibreアドベントカレンダー2024にもともと投稿した記事が、後で精査すると全く的外れなのに投稿後気づきました1。
なので前代未聞かもしれませんが、元の記事をFOSS4Gアドベントカレンダーの方に振り替えて、こっちをMapLibreアドベントカレンダーに置き換えます2。
GeoJSONからマーカー関連処理をまとめてみた
地図サイト作ってると、GeoJSONをループ回してマーカー立ててポップアップ表示して、そのポップアップの中身はマルチメディアビューア+メタデータの展開HTML、案件ごとに毎回同じようなポップアップの中身だけど対応する地図APIは違って…とかいうのを繰り返してました。
だったら、複数APIでも共通になる処理だけを切り出してライブラリ化しつつ、マーカーの設定自体を設定ファイルで管理すれば、微修正したければその設定を変更すれば、地図の表示場所やズームを変えるのと同じくらい簡単に、ポップアップも修正できるようにならないか？と思って、まずテンプレートエンジン化を考えました。
で、自分のユースケースで考えると、ひとつのポップアップに対し複数のマルチメディア、特に画像だけでなく、RICOH THETAなどでのパノラマ写真や、YouTube画像などをスライダー表示+クリックでビューア、というユースケースが多かったので、その部分はテンプレート化しにくいな、どうする? => WebComponents化して、テンプレートで動作制御できるようにするか、と思って、全然別の機能のような
- GeoJSONからのテンプレート展開
- WebComponentsでのマルチメディアビューア
をセットにしたライブラリ、Quyuanを作成しました。
- Quyuan (屈原)
- quyuanjs
- 動作デモ - Leaflet、OpenLayers、MapLibre GL
作者の導入実績自体はLeaflet、OpenLayersでしかないのですが、MapLibre GLでのサンプルも今回を期に作成してみました。
これを使えば、
- マーカー/ポップアップのテンプレートを固定しつつ、他の地図APIにそのまま持って行ける
- 逆に、地図APIを固定して、特にコード的には変更をしないまま（再度トランスパイルなどを必要としないまま）テンプレートの差し替えで、別案件のユースケースに対応できる
ので、個人的には重宝しています。
-
元々の記事はこちらだったのですが、このソリューションはcanvas/WebGLベースの地図エンジンで動画ピンを立てるというコンセプトだったのに、使い慣れていないMapLibreへの対応を生成AIに任せたら、HTML divベースのマーカーで実装されていました。
HTML divベースやったら、ややこしいことせんでもアニメーション画像置くだけでアニメーションマーカーできるやん…。
というわけで、当該ソリューションのMapLibre対応は、改めて挑戦の上、WebGLでコンテキストで画像更新のようなことができるのか、というかそもそもHTML divベースでマーカーが存在するMaplibreでこのソリューションが必要なのかまで確認したうえで、改めて行います。 ↩ -
このソリューションも、MapLibreでどれだけ必要になるかわからない代物ですが、前の記事ほど本質的に意味がないわけではないので ↩