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
Mapboxはいいぞ!!!!! /RACDA25-bms-mapbox
Search
Anagura
October 25, 2020
Programming
0
110
Mapboxはいいぞ!!!!! /RACDA25-bms-mapbox
RACDA25周年記念 バスマップzoom会議
Anagura
October 25, 2020
Tweet
Share
More Decks by Anagura
See All by Anagura
ジョルダン株式会社の地図の取り組みについて / foss4g 2020 japan online
anagura0000
0
2k
全国の鉄道及び バス路線図が見れる! GTFSから生成した シームレス路線図の試作 / foss4g 2019 niigata
anagura0000
0
410
Other Decks in Programming
See All in Programming
Terraformテスト入門
msato
1
1.1k
立方体異世界生成魔法(キュービックディメンション・ジェネレーションマジック)
satoshi7190
2
150
LLMとSLMを活用!Azure Functions × モダンフロントエンドでつくる次世代アプリケーション
nahokoxxx
1
970
将来の機能拡張を見据えたMetricKitの実装
mot_techtalk
0
120
Remote notification tricks with Notification Service Extension
mot_techtalk
0
120
部分型について探ってみよう
pd1xx
2
130
データ利用者が最速で価値を評価できるDataOpsを目指して / Towards DataOps that Enables Analysts to Deliver Value Rapidly
civitaspo
3
660
データの受託開発からの卒業
hiro0329
6
1.6k
BigQueryからSnowflakeへ移管して作る最強のデータ基盤 〜Data Ingestion編〜 / The Ultimate Data Platform Migration from BigQuery to Snowflake: Data Ingestion Edition
civitaspo
9
1.3k
今こそ始める Shared Element Transition
oidy
1
200
スタバkids party
naoki0917
1
250
「龍が如く」も「スーパーモンキーボール」も自動化!クオリティエンジニアリングチームによるマルチゲームエンジン対応で進化した「龍が如くスタジオ」のテスト自動化環境について
segadevtech
1
860
Featured
See All Featured
KATA
mclloyd
26
13k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.3k
Code Reviewing Like a Champion
maltzj
518
39k
It's Worth the Effort
3n
181
27k
The Mythical Team-Month
searls
218
43k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
108
6.8k
Faster Mobile Websites
deanohume
304
30k
Rails Girls Zürich Keynote
gr2m
93
13k
What the flash - Photography Introduction
edds
67
11k
Building Effective Engineering Teams - LeadDev
addyosmani
56
2.3k
The Invisible Customer
myddelton
119
13k
Clear Off the Table
cherdarchuk
90
320k
Transcript
Mapboxはいいぞ! 2020/10/25 RACDA25周年記念 バスマップzoom会議 あなぐら(@anagura0000)
自己紹介 • 経路検索サービスの会社にいます • GIS Engineer ◦ 地図周りの業務全般 ◦ その他雑用など
• バスマップ関係の以前の発表 ◦ FOSS4G Niigata: 全国の鉄道及び バス路線図が見れる! GTFSか ら生成した シームレス路線図の試作
Mapboxはいいぞ!!!!!
Mapboxはいいぞ! • バスマップ界隈で主流なのはLeaflet.js • Mapbox GL JSもいいぞという話
Mapbox GL JSのオススメポイント • ベクトルデータ描画に強い • 大量のデータに強い • 更新頻度が高い ◦
1~2ヶ月に1回リリースされる • Mapbox Style Specificationで柔軟なスタイリングが可能 • リッチなバスマップを作るのに非常に便利
Mapbox Style Specification • フィルタと多様なオプションにより、柔軟なスタイリングが可能 • JSONで記述 • 高速に動作
フィルタの例 ["==", "name", "東京"] // nameが東京と一致 ["!in", "name", "東京", "大阪"]
// nameが東京と大阪ではない [">=", "population", 10000] // populationが10000以上 ["has", "name"] // nameが存在している ["all", ["has", "name"], ["==", "name", "東京"]] // nameが存在していて、nameが東京と一致
Styleの例:Layout option { "text-field": ["get", "name"], // nameのプロパティを取得して、表示する "text-font": [
// fontはOpen Sans Regularを使う "Open Sans Regular" ], "text-offset": [0, 1], // 下方向に1emずらす "text-anchor": "left" // アンカーの下にテキストを配置 }
Styleの例:Paint option { "text-color": "blue", // 文字色はblue "text-halo-color": "white", //
文字のhaloの色はwhite "text-halo-width": 1, // haloの幅は1px "text-opacity": 0.5 // 文字の透明度は0.5 }
Sample demo (富山県オープンデータを使ったバスマップ )
リッチなバスマップを作ろう! • Web地図の利点は動的なバスマップを作れる • 昨今ライブラリや仕様が充実してきた