RACDA25周年記念 バスマップzoom会議
Mapboxはいいぞ!2020/10/25RACDA25周年記念 バスマップzoom会議あなぐら(@anagura0000)
View Slide
自己紹介● 経路検索サービスの会社にいます● 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地図の利点は動的なバスマップを作れる● 昨今ライブラリや仕様が充実してきた