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

Transcript

1. GitHub Actionsで始める
   お手軽ベクトルタイル配信
   ⼤橋直記
   2023/11/09 @ MapLibre Meetup Japan #01
   ©GSI Japan | ©Geolonia | ©OpenStreetMap
   

   View Slide

2. 大橋　直記（おおはし　なおき）
   株式会社 Geolonia エンジニア
   地図と位置情報の会社でエンジニアをしてい
   ます。
   ‧MapLibre GL JS コントリビューター
   ‧Charites コントリビューター（国連ベクト
   ルタイルツールキット）
   GitHub: https://github.com/naogify
   Twitter: https://twitter.com/naogify
   

   View Slide

3. Geolonia Maps について
   Geolonia が提供するカスタマイズ可能な地図
   ● 開発者フレンドリー
   ● カスタマイズ性が⾼い
   ● ベクトルタイル（機械判読可能）
   

   View Slide

4. ベクトルタイルとは？
   機械判読が可能な地図タイル
   東京都港区芝公園４丁目２−８ → 35.65872, 139.74539
   「地理院地図｜ベクトルタイルとその提供実験について」（https://maps.gsi.go.jp/development/vt_expt.html）より画像を引⽤
   

   View Slide

5. 事例
   https://codepen.io/geolonia/pen/oNZLPQP
   https://naogify.github.io/nankai-trough-map/
   

   View Slide

6. Webで位置情報を扱うためのファイル形式は？
   ‧GeoJSON
    位置情報を扱うためのJSONファイル。緯度経度 + 属性を保存。
   ‧ベクトルタイル（.pbf、.mvt）
    → GeoJSON をXYZで分割し、分割したGeoJSONをバイナリ（Protocol
      Buffers）で保存。
    → 表⽰速度が早い、機械判読が可能。
    → .pbfや.mvt（Mapbox Vector Tile） に分割しxyzのディレクトリに保存。
   

   View Slide

7. ベクトルタイルを作ってみる
   

   View Slide

8. コマンドラインツールを使った
   ベクトルタイルの作り方
   $brew install tippecanoe
   $tippecanoe -zg -o ./data.mbtiles ./data.geojson
   

   View Slide

9. お手軽に試すには？
   

   View Slide

10. vector-tiles-api
    位置情報を含むCSVをアップロー
    ドすると、GitHub Actions でベク
    トルタイルに変換し、GitHub
    Pages にデプロイする。
    つまり、
    簡単にベクトルタイル化＋ホス
    ティングできる。
    https://github.com/geolonia/vector-tiles-api
    

    View Slide

11. 1.GitHub Pages を設定
    1. 「Use this template」をクリック 2. 「Settings」 >「 Pages」 をクリック
    

    View Slide

12. 2. CSV を編集
    「Edit this file」をクリックして編集
    

    View Slide

13. 3. 表示
    map.addSource("example-data", {
    type: "vector",
    url: "https://<あなたのGitHubユーザー名>.github.io/<リポジトリ名>/tiles/tiles.json"
    });
    ▼󰳕サンプルコード▼
    https://codepen.io/naogify/pen/BaMWNpG
    

    View Slide

14. 早速作ってみる
    

    View Slide

15. View Slide

16. View Slide

17. キャンプ場ベクトルタイルを作ってみる
    CSVを編集してキャンプ場情報を追加する
    

    View Slide

18. https://community-geocoder.geolonia.com/
    緯度経度の入力
    

    View Slide

19. https://codepen.io/naogify/pen/BaMWNpG
    完成
    

    View Slide

20. 制限事項
    GitHubPagesの容量制限（100 MiB/ファイル）
    ‧ポイントデータのみ
    

    View Slide

21. 更に大きいデータをホスティングする場合
    $brew install tippecanoe
    $tippecanoe -o ./data.pmtiles ./data.geojson
    更に⼤きいサイズのデータをホスティングしたい場合は PMTiles がお勧め。
    → ベクトルタイルを単⼀ファイル化 + 静的サイトでホスティング可能
    

    View Slide

22. Thank you!
    ©GSI Japan | ©Geolonia | ©OpenStreetMap
    GitHub: https://github.com/naogify
    Twitter: https://twitter.com/naogify
    vector-tiles-api デモURL
    

    View Slide