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