Slide 1

Slide 1 text

Mapboxはいいぞ! 2020/10/25 RACDA25周年記念 バスマップzoom会議 あなぐら(@anagura0000)

Slide 2

Slide 2 text

自己紹介 ● 経路検索サービスの会社にいます ● GIS Engineer ○ 地図周りの業務全般 ○ その他雑用など ● バスマップ関係の以前の発表 ○ FOSS4G Niigata: 全国の鉄道及び バス路線図が見れる! GTFSか ら生成した シームレス路線図の試作

Slide 3

Slide 3 text

Mapboxはいいぞ!!!!!

Slide 4

Slide 4 text

Mapboxはいいぞ! ● バスマップ界隈で主流なのはLeaflet.js ● Mapbox GL JSもいいぞという話

Slide 5

Slide 5 text

Mapbox GL JSのオススメポイント ● ベクトルデータ描画に強い ● 大量のデータに強い ● 更新頻度が高い ○ 1~2ヶ月に1回リリースされる ● Mapbox Style Specificationで柔軟なスタイリングが可能 ● リッチなバスマップを作るのに非常に便利

Slide 6

Slide 6 text

Mapbox Style Specification ● フィルタと多様なオプションにより、柔軟なスタイリングが可能 ● JSONで記述 ● 高速に動作

Slide 7

Slide 7 text

フィルタの例 ["==", "name", "東京"] // nameが東京と一致 ["!in", "name", "東京", "大阪"] // nameが東京と大阪ではない [">=", "population", 10000] // populationが10000以上 ["has", "name"] // nameが存在している ["all", ["has", "name"], ["==", "name", "東京"]] // nameが存在していて、nameが東京と一致

Slide 8

Slide 8 text

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" // アンカーの下にテキストを配置 }

Slide 9

Slide 9 text

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 }

Slide 10

Slide 10 text

Sample demo (富山県オープンデータを使ったバスマップ )

Slide 11

Slide 11 text

リッチなバスマップを作ろう! ● Web地図の利点は動的なバスマップを作れる ● 昨今ライブラリや仕様が充実してきた