GitHub Actionsで始めるお手軽ベクトルタイル配信

Transcript

1. GitHub Actionsで始める お手軽ベクトルタイル配信 ⼤橋直記 2023/11/09 @ MapLibre Meetup Japan #01 ©GSI Japan | ©Geolonia | ©OpenStreetMap
2. 大橋　直記（おおはし　なおき） 株式会社 Geolonia エンジニア 地図と位置情報の会社でエンジニアをしてい ます。 ‧MapLibre GL JS コントリビューター ‧Charites コントリビューター（国連ベクト ルタイルツールキット） GitHub: https://github.com/naogify Twitter: https://twitter.com/naogify
3. Geolonia Maps について Geolonia が提供するカスタマイズ可能な地図 • 開発者フレンドリー • カスタマイズ性が⾼い • ベクトルタイル（機械判読可能）
4. ベクトルタイルとは？ 機械判読が可能な地図タイル 東京都港区芝公園４丁目２−８ → 35.65872, 139.74539 「地理院地図｜ベクトルタイルとその提供実験について」（https://maps.gsi.go.jp/development/vt_expt.html）より画像を引⽤
5. 事例 https://codepen.io/geolonia/pen/oNZLPQP https://naogify.github.io/nankai-trough-map/
6. Webで位置情報を扱うためのファイル形式は？ ‧GeoJSON  位置情報を扱うためのJSONファイル。緯度経度 + 属性を保存。 ‧ベクトルタイル（.pbf、.mvt）  → GeoJSON をXYZで分割し、分割したGeoJSONをバイナリ（Protocol    Buffers）で保存。  → 表⽰速度が早い、機械判読が可能。  → .pbfや.mvt（Mapbox Vector Tile） に分割しxyzのディレクトリに保存。
7. ベクトルタイルを作ってみる
8. コマンドラインツールを使った ベクトルタイルの作り方 $brew install tippecanoe $tippecanoe -zg -o ./data.mbtiles ./data.geojson
9. お手軽に試すには？
10. vector-tiles-api 位置情報を含むCSVをアップロー ドすると、GitHub Actions でベク トルタイルに変換し、GitHub Pages にデプロイする。 つまり、 簡単にベクトルタイル化＋ホス ティングできる。 https://github.com/geolonia/vector-tiles-api
11. 1.GitHub Pages を設定 1. 「Use this template」をクリック 2. 「Settings」 >「 Pages」 をクリック
12. 2. CSV を編集 「Edit this file」をクリックして編集
13. 3. 表示 map.addSource("example-data", { type: "vector", url: "https://<あなたのGitHubユーザー名>.github.io/<リポジトリ名>/tiles/tiles.json" }); ▼󰳕サンプルコード▼ https://codepen.io/naogify/pen/BaMWNpG
14. 早速作ってみる
17. キャンプ場ベクトルタイルを作ってみる CSVを編集してキャンプ場情報を追加する
18. https://community-geocoder.geolonia.com/ 緯度経度の入力
19. https://codepen.io/naogify/pen/BaMWNpG 完成
20. 制限事項 GitHubPagesの容量制限（100 MiB/ファイル） ‧ポイントデータのみ
21. 更に大きいデータをホスティングする場合 $brew install tippecanoe $tippecanoe -o ./data.pmtiles ./data.geojson 更に⼤きいサイズのデータをホスティングしたい場合は PMTiles がお勧め。 → ベクトルタイルを単⼀ファイル化 + 静的サイトでホスティング可能
22. Thank you! ©GSI Japan | ©Geolonia | ©OpenStreetMap GitHub: https://github.com/naogify Twitter: https://twitter.com/naogify vector-tiles-api デモURL