MapLibreアドベントカレンダーから移しました！
すみません、本記事は元々MapLibreアドベントカレンダーに投稿していたものですが、MapLibre対応としては芯を食ってないことに、後の精査でわかりました。
取り急ぎ話題の中心をOpenLayersに変えてFOSS4Gアドベントカレンダーに移し、MapLibreアドベントカレンダー記事としては別のものを今晩中に挙げます（2024/12/25 23:47）。
Canvas/WebGLベースの地図APIでアニメ―テッド画像のピンを立てる
従来のHTML DOM divベースの地図APIでは、アニメーションGIFやAPNGなどの画像を使用して、簡単にアニメーションマーカーを作成することができました。 しかし、HTML canvasやWebGLを使用する新しい地図APIでは、アニメーション画像を単純にマーカーとして使用することができなくなりました。
筆者は、OpenLayersベースで、古地図やイラスト地図を地図化するMaplatというオープンソースプロジェクトを開発していますが、その潜在顧客との要望を交換する中で、民俗イラストマップ、昔ばなしイラストマップなどの中で、たとえば鬼や河童のイラストがアニメーションで動いたりしたら楽しそう、という話をいただきました。
しかし、HTML DOM divベースの地図APIでは簡単に実現できたアニメーションマーカーも、canvasベースのOpenLayersでは実現が難しかったです。
そこで、Canvasベースでもアニメ―テッドGIF/PNG/WEBPの画像を解析して、canvasのコンテキストを定期的に更新してアニメーションマーカーを実現するプロジェクト、Gyeonghwonを開発しました。
ここから下はたわごとです
元々自分がメインはOpenLayers使いだったので、MapLibreにはあまり触っていなかったのですが、CanvasとWebGLの違いはあれ同じ問題ってあるんじゃないかなと思っていたので、試してみたのが今回でした。
OpenLayersのサンプルを食わせて、これと同じものをMapLibreでできるか？と生成AIに聞いてみたら、ちゃんと動くものを出してきたので、やるやんけさすが生成AI、と喜んで出したのが修正前の記事ですが、公開した後で精査したら、MapLibreのhtml divを使ったマーカー機能で実装されていました。
それやったら、普通にアニメ―テッド画像使えばええ話でした。
というわけで、本ソリューションは今のところOpenLayersのみ対応ということで、MapLibreへの対応は、対応する意味があるかの再検討含めて、課題ということで。
生成AIの助けを借りて、Maplibreにも対応するよう修正
Canvasに対応させる仕組みはWebGLにも対応させられると思っていたので、Maplibreでも同じ仕組みが使えるのではないかと思っていましたが、手が回っていませんでした。
今回、アドベントカレンダーに書くネタとして、Maplibreに対応させてはどうかなと思って、生成AI（Claude 3.5 Sonnet）の助けを借りつつ、Maplibreの対応デモと対応手順を作成しました。
プロジェクトをモダナイズするのには、３日以上と相応に手間がかかりましたが、Maplibre対応は生成AIにたずねれば、30分で対応できました。
生成AIすげー。
使えるようなら使ってください
普段はOpenLayers使いで、Maplibre使いではないので、もしかするとこのようなものを導入しなくてもMaplibreにはアニメ―テッド画像に対応する方法があるかもしれず、その点は詳しくないのですが、
もし使う意味があるようでしたら使ってください。