$30 off During Our Annual Pro Sale. View Details »

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

nao
November 09, 2023

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

nao

November 09, 2023
Tweet

Other Decks in Technology

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. ベクトルタイルとは?
    機械判読が可能な地図タイル
    東京都港区芝公園4丁目2−8 → 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