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
1.9k
全国の鉄道及び バス路線図が見れる! GTFSから生成した シームレス路線図の試作 / foss4g 2019 niigata
anagura0000
0
400
Other Decks in Programming
See All in Programming
日付と正規化
megmogmog1965
0
140
初心者がおさえておきたいAWS CDKのベストプラクティス 2024
konokenj
15
7.3k
Play Billing Library 7.0.0 変更点まとめ@potatotips#88
kako351
0
160
Exploring the Gradually Lost Technical Skills in the Cloud Native Era
hwchiu
2
3.9k
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
Architectures with Lightweight Stores: New Rules and Options
manfredsteyer
PRO
0
100
Clean Architecture by TypeScript & NestJS
ryounasso
0
150
CSC307 Lecture 09
javiergs
PRO
1
500
はしめてのプログラミングとロボット制御
watawatavoltage
0
290
継続的な活動で築く地方エンジニアの道
myamashii
2
350
AHC035解説
terryu16
0
710
Webエディタライブラリ 「CodeMirror」から学ぶ Webアプリ開発のテクニック
ryosukeigarashi
0
250
Featured
See All Featured
Designing for humans not robots
tammielis
247
25k
Designing with Data
zakiwarfel
96
5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
26
1.6k
Six Lessons from altMBA
skipperchong
24
3.2k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Statistics for Hackers
jakevdp
792
220k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
20
7.2k
Why Our Code Smells
bkeepers
PRO
332
56k
Build your cross-platform service in a week with App Engine
jlugia
227
17k
Web Components: a chance to create the future
zenorocha
307
41k
No one is an island. Learnings from fostering a developers community.
thoeni
17
2.8k
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地図の利点は動的なバスマップを作れる • 昨今ライブラリや仕様が充実してきた