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
120
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
2.3k
全国の鉄道及び バス路線図が見れる! GTFSから生成した シームレス路線図の試作 / foss4g 2019 niigata
anagura0000
0
460
Other Decks in Programming
See All in Programming
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
340
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
530
品質ワークショップをやってみた
nealle
0
620
AI駆動で0→1をやって見えた光と伸びしろ
passion0102
1
790
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
3
6k
組込みだけじゃない!TinyGo で始める無料クラウド開発入門
otakakot
2
360
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
870
pnpm に provenance のダウングレード を検出する PR を出してみた
ryo_manba
1
150
CSC509 Lecture 06
javiergs
PRO
0
260
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
3
690
AkarengaLT vol.38
hashimoto_kei
1
120
なんでRustの環境構築してないのにRust製のツールが動くの? / Why Do Rust-Based Tools Run Without a Rust Environment?
ssssota
10
31k
Featured
See All Featured
Designing for humans not robots
tammielis
254
26k
Gamification - CAS2011
davidbonilla
81
5.5k
The World Runs on Bad Software
bkeepers
PRO
72
11k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
A better future with KSS
kneath
239
18k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
Why Our Code Smells
bkeepers
PRO
340
57k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
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地図の利点は動的なバスマップを作れる • 昨今ライブラリや仕様が充実してきた