Geolonia Maps のレンダリングエンジンである Maplibre GL JS の地図上にアイコン（例えば電車の駅のアイコンなど）を表示するために、そのアイコンをレンダリングエンジンに登録する必要があります。 Maplibre GL JS v3.0.0 より前は、1つのスプライトシートまたは、 addImage 関数で一つずつ追加することができました。addImageは1個、2個を追加するときに手っ取り早いですが、複数のアイコンを追加で登録したいときはスプライトシートを統合させる必要があり、手間がかかりました。
ただ、 Maplibre GL JS v3.0.0 のリリースから複数のスプライトシートを指定できるようになり、便利になりました。
今回のブログでは、追加のスプライトシートを簡単に GitHub や GitHub Actions だけで作成することを説明します。
まずは、 geoloniamaps/sprite-template を確認してください。
このテンプレートにサンプル用に1つのアイコンが入っていますが、 GitHub Pages で公開しているプレビュー画面で確認できます。
実際にスプライトシートを作ってみよう
まず、このテンプレートを使って自分のスプライトを入れるための箱を作りましょう。GitHub の画面の右上に「Use this template」というボタンを押し、「Create a new repository」を選択します。
押したら、下記のような画面が表示されますが、「Owner」の選択にはレポジトリを作成したいアカウントを選んでください。今回は私自身の個人アカウントを利用していますが、スプライトの用途によって組織のアカウントを利用したり、適切に選んでください。レポジトリ名もここで入力します。
作成したらこういう画面になります。
まずは、プレビューするための GitHub Pages 環境を有効にします。画面上の「Settings」タブを押したあと、「Pages」の設定画面を開いてください。この中に「Source」という設定はありますが、「GitHub Actions」を選んでください。このテンプレートはスプライトシートを生成したあとに、GitHub Pagesにアップロードするようになっていますので、こちらは必須となっています。
アイコンを追加する
今回は、 GitHub Codespaces を利用してブラウザでアイコンを追加していきます。
緑の「Code」ボタンを開くと、 Codespaces を起動するボタンがあります。こちらを起動すると、数分でブラウザ内にコードエディタが起動し、ファイルを自由に操作することができます。
エディタが起動したら、デスクトップから直接ファイルをドラッグアンドドロップをすると、アップロードされます。「icons」のディレクトリにいれるようにしてください。
アップロードが完了したら、ソースコントロールタブに切り換え、アップロード予定のファイルを全て「Stage changes」のボタンを押し、コミットしてください。「Commit and Push」を選ぶと、GitHubに新しいソースをアップロードし、スプライト生成を走らせます。
スプライトシートを確認する
GitHub Pages でスプライトシートを確認することができます: https://keichan34.github.io/my-custom-sprite/
地図の style.json に下記のように追加してください（Style Specの詳細な記述は公式ドキュメンテーションを確認してください）:
"sprite": {
"default": "もともとのスプライトシート",
"custom": "https://keichan34.github.io/my-custom-sprite/sprite"
}
このスプライトシートのジェネレータはSVGまたはPNG、JPEGの画像も対応しています。
おわりに
スプライトシートを作るテンプレートは既に Geolonia 社内で使われていますが、より広く、より便利に地図を作ることができればと思って公開しております。改善のアイディアや利用用途がありましたら気軽にお問い合わせてください！sprite-template の GitHub Issues などでコメントをお待ちしております。