Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Mapboxはいいぞ!!!!! /RACDA25-bms-mapbox
Anagura
October 25, 2020
Programming
0
74
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
1.2k
全国の鉄道及び バス路線図が見れる! GTFSから生成した シームレス路線図の試作 / foss4g 2019 niigata
anagura0000
0
350
Other Decks in Programming
See All in Programming
開発速度を5倍早くするVSCodeの拡張機能を作った
purp1eeeee
2
160
Beyond Micro Frontends: Frontend Moduliths for the Enterprise @enterjs2022
manfredsteyer
PRO
0
190
BASE BANKチームの技術選定と歴史 / how to decide technology selection for startup
budougumi0617
0
1.2k
How we run a Realtime Puzzle Fighting Game on AWS Serverless
falken
0
250
模組化的Swift架構(二) DDD速成
haifengkao
0
390
IE Graduation (IE の功績を讃える)
jxck
20
12k
I/O Extended 2022 in Android ~ Whats new in Android development tools
pluu
0
560
Deep Dive Into Google Zanzibar and its Concepts for Authorization Scenarios
dschenkelman
1
140
[월간 데이터리안 세미나 6월] 스스로 성장하는 분석가 커리어 이야기
datarian
0
240
Haskellでオブジェクト指向プログラミング
koheisakata
0
120
A Philosophy of Software Design 後半
yosuke_furukawa
PRO
10
2.8k
Chart実装が楽になりました。
keisukeyamagishi
0
120
Featured
See All Featured
Designing with Data
zakiwarfel
91
3.9k
Building a Scalable Design System with Sketch
lauravandoore
448
30k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1.1k
Adopting Sorbet at Scale
ufuk
63
7.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
27
1.5k
GraphQLの誤解/rethinking-graphql
sonatard
28
6.6k
What's in a price? How to price your products and services
michaelherold
229
9.4k
KATA
mclloyd
7
8.7k
4 Signs Your Business is Dying
shpigford
169
20k
The Straight Up "How To Draw Better" Workshop
denniskardys
225
120k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
181
15k
Atom: Resistance is Futile
akmur
255
20k
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地図の利点は動的なバスマップを作れる • 昨今ライブラリや仕様が充実してきた