Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mapboxはいいぞ!!!!! /RACDA25-bms-mapbox

Fee9a823bcf5fa60642f31ad88844499?s=47 Anagura
October 25, 2020

Mapboxはいいぞ!!!!! /RACDA25-bms-mapbox

RACDA25周年記念 バスマップzoom会議

Fee9a823bcf5fa60642f31ad88844499?s=128

Anagura

October 25, 2020
Tweet

Transcript

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

  2. 自己紹介 • 経路検索サービスの会社にいます • GIS Engineer ◦ 地図周りの業務全般 ◦ その他雑用など

    • バスマップ関係の以前の発表 ◦ FOSS4G Niigata: 全国の鉄道及び バス路線図が見れる! GTFSか ら生成した シームレス路線図の試作
  3. Mapboxはいいぞ!!!!!

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

  5. Mapbox GL JSのオススメポイント • ベクトルデータ描画に強い • 大量のデータに強い • 更新頻度が高い ◦

    1~2ヶ月に1回リリースされる • Mapbox Style Specificationで柔軟なスタイリングが可能 • リッチなバスマップを作るのに非常に便利
  6. Mapbox Style Specification • フィルタと多様なオプションにより、柔軟なスタイリングが可能 • JSONで記述 • 高速に動作

  7. フィルタの例 ["==", "name", "東京"] // nameが東京と一致 ["!in", "name", "東京", "大阪"]

    // nameが東京と大阪ではない [">=", "population", 10000] // populationが10000以上 ["has", "name"] // nameが存在している ["all", ["has", "name"], ["==", "name", "東京"]] // nameが存在していて、nameが東京と一致
  8. 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" // アンカーの下にテキストを配置 }
  9. 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 }
  10. Sample demo (富山県オープンデータを使ったバスマップ )

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