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

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

Anagura
October 25, 2020

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

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

Anagura

October 25, 2020
Tweet

More Decks by Anagura

Other Decks in Programming

Transcript

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

    View Slide

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

    View Slide

  3. Mapboxはいいぞ!!!!!

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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
    }

    View Slide

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

    View Slide

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

    View Slide