Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
GitHub Actionsで始めるお手軽ベクトルタイル配信
Search
nao
November 09, 2023
Technology
0
350
GitHub Actionsで始めるお手軽ベクトルタイル配信
nao
November 09, 2023
Tweet
Share
Other Decks in Technology
See All in Technology
推薦システムを本番導入する上で一番優先すべきだったこと~NewsPicks記事推薦機能の改善事例を元に~
morinota
0
130
プレイドにおけるDatadog APMの活用方法
plaidtech
PRO
2
120
【基調講演】変える、今ここから ― IoTとAIで紡ぐ未来
soracom
PRO
0
320
累計ダウンロード数1億8000万を超えるアプリケーションプラットフォームのレガシーシステム脱却とモダン化への道
kmitsuhashi
0
120
技術負債による事業の失敗はなぜ起こるのか / Why do business failures due to technical debt occur?
i35_267
0
190
サービスの持続的な成長と技術負債について
siva_official
PRO
10
4.4k
AutomatedLabを使って内部ペンテストを勉強しよう! -やられ社内ネットワークの自動構築-
n_etupirka
1
610
テスト・設計研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
170
AWS IAMのアンチパターン/AWSが考える最低権限実現へのアプローチ概略(JAWS-UG朝会#59資料改修20分版)
htan
0
330
成長期に歩みを止めないための創業期の開発文化形成
mayah
6
420
[I/O Extended Android 2024] What`s new in Android 2024
kyeongwan
0
220
Matterport を使ってクラスメソッド各拠点のバーチャルオフィスツアーを作成してみた
wakatsuki
0
160
Featured
See All Featured
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
105
6.8k
We Have a Design System, Now What?
morganepeng
46
7k
Six Lessons from altMBA
skipperchong
24
3.2k
What's new in Ruby 2.0
geeforr
338
31k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
35
6.3k
Rails Girls Zürich Keynote
gr2m
93
13k
No one is an island. Learnings from fostering a developers community.
thoeni
17
2.8k
Being A Developer After 40
akosma
72
580k
The Cult of Friendly URLs
andyhume
75
5.9k
The Power of CSS Pseudo Elements
geoffreycrofte
64
5.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Producing Creativity
orderedlist
PRO
340
39k
Transcript
GitHub Actionsで始める お手軽ベクトルタイル配信 ⼤橋直記 2023/11/09 @ MapLibre Meetup Japan #01
©GSI Japan | ©Geolonia | ©OpenStreetMap
大橋 直記(おおはし なおき) 株式会社 Geolonia エンジニア 地図と位置情報の会社でエンジニアをしてい ます。 ‧MapLibre GL JS コントリビューター
‧Charites コントリビューター(国連ベクト ルタイルツールキット) GitHub: https://github.com/naogify Twitter: 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/oNZLPQP https://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 でベク トルタイルに変換し、GitHub Pages にデプロイする。 つまり、 簡単にベクトルタイル化+ホス
ティングできる。 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
早速作ってみる
None
None
キャンプ場ベクトルタイルを作ってみる 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 | ©OpenStreetMap GitHub: https://github.com/naogify
Twitter: https://twitter.com/naogify vector-tiles-api デモURL