$30 off During Our Annual Pro Sale. View Details »

MapLibre GL JS とCSSアニメーションでできること

MapLibre GL JS とCSSアニメーションでできること

2022/12/15 MIERUNE Meetup mini #05
https://mierune.connpass.com/event/266903/

Satoshi Komatsu

December 16, 2022
Tweet

More Decks by Satoshi Komatsu

Other Decks in Programming

Transcript

  1. Satoshi Komatsu
    MapLibre GL JSとCSSアニメーションで
    できること

    View Slide

  2. ©Project PLATEAU / MLIT Japan
    小松  聖 
    自己紹介
    KOMATSU satoshi
    今年の6月にMIERUNEに入社。
    前職は岐阜県で庭師。
    ひよっこエンジニアです。
    フロントエンドエンジニア

    View Slide

  3. ©OpenStreetMap contributors
    01 私がMapLibre GL JSで作るもの
    02 MapLibre GL JSでのCSSの使い所
    03 私がアニメーションにこだわる理由
    目次

    View Slide

  4. ©OpenStreetMap contributors
    01 私がMapLibre 
    GL 
    JSで
    作るもの

    View Slide

  5. ©Project PLATEAU / MLIT Japan
    私がMapLibre GL JSで作るもの
    ●Mapboxからフォークされて誕生した
    オープンソースのJavaScript地図ライ
    ブラリ
    MapLibre GL JS
    https://maplibre.org/

    View Slide

  6. © 地理院地図 全国最新写真(シームレス)
    DEMOを3つ紹介
    私がMapLibre GL JSで作るもの

    View Slide

  7. ©Project PLATEAU / MLIT Japan
    私がMapLibre GL JSで作るもの
    1.地図上に植林
    https://codepen.io/satoshi7190/pen/ZERmWMX

    View Slide

  8. ©Project PLATEAU / MLIT Japan
    私がMapLibre GL JSで作るもの
    2.キャトルミューティレーション
    https://codepen.io/satoshi7190/pen/OJEGqOq

    View Slide

  9. ©Project PLATEAU / MLIT Japan
    私がMapLibre GL JSで作るもの
    3.魔法陣の発動と召喚獣の召喚
    https://codepen.io/satoshi7190/pen/ExRJrLa

    View Slide

  10. ©OpenStreetMap contributors
    02 MapLibre 
    GL 
    JSでの
    CSSの使い所

    View Slide

  11. ©Project PLATEAU / MLIT Japan
    MapLibre GL JSでのCSSの使い所
    CSSとは
    ● Webサイトの見た目部分
    を 装 飾 するマークアップ
    アップ 言 語 。アニメーショ
    ンも可能。
    ● さっきのDEMOはこれを
    地 図 上のビジュアル表 現
    に活用したもの。

    View Slide

  12. ©Project PLATEAU / MLIT Japan
    canvas要素による表現
    HTML要素による表現
    MapLibre GL JSでのCSSの使い所
    MapLibreの地図表現に使われる要素

    View Slide

  13. ©Project PLATEAU / MLIT Japan
    MapLibre GL JSでのCSSの使い所
    ● ラスターレイヤー
    背景地図の表示
    ● ポリゴン、ライン、ポイントレイヤー
    ベクトル形式による地物の表示
    ● シンボルレイヤー
    テキストの表示やクラスター表現
    canvas要素
    地図のメインになる部分

    View Slide

  14. ©Project PLATEAU / MLIT Japan
    ●マーカー
    検索結果の表示や、目印のような一
    時的ポイントの表示
    ●ポップアップ
    地図上の地物の詳細データ
    などの表示
    HTML要素
    MapLibre GL JSでのCSSの使い所
    メインの地図に乗っかるもの

    View Slide

  15. MapLibre GL JSでのCSSの使い所
    こいつらはCSSの力で・・・

    View Slide

  16. MapLibre GL JSでのCSSの使い所
    こんな風に変身できます。

    View Slide

  17. MapLibre GL JSでのCSSの使い所
    動かすこともできます

    View Slide

  18. MapLibre GL JSでのCSSの使い所
    ●大きさが変わらないので地図
    をズームアウトすると密になる
    ●ポイント指定での表現しかでき
    ない
    ●図形を曲げるなどの曲線的な
    動きはCSSでは表現できない
    ですが・・・

    View Slide

  19. MapLibre GL JSでのCSSの使い所
    CSSで出来ないことはcanvasソースレイヤーで
    https://codepen.io/satoshi7190/pen/abKrbpp
    ●通常のcanvas要素を地図上にプ
    ロットできる。
    ●bboxによるエリア指定で表示す
    るので地図の縮尺に合わせてくれ
    る。
    ●JavaScriptのコードでCSSアニ
    メーションよりも複雑な動きを表
    現できる

    View Slide

  20. ©Project PLATEAU / MLIT Japan
    canvasソースレイヤーによる表現の例
    #30000DayMapChallenge

    View Slide

  21. ©Project PLATEAU / MLIT Japan
    canvasソースレイヤーによる表現の例
    https://satoshi7190.github.io/earthquake-japan/
    #30DayMapChallenge Day23 「Movement」

    View Slide

  22. ©OpenStreetMap contributors
    03 私がアニメーションに
    こだわる理由

    View Slide

  23. ©Project PLATEAU / MLIT Japan
    私がアニメーションにこだわる理由
    一味違う個性を出せる

    View Slide

  24. ©Project PLATEAU / MLIT Japan
    私がアニメーションにこだわる理由
    よりインパクトのあるデータ表現ができる
    ※印象操作にならないよう、ある程度加減は必要です。

    View Slide

  25. ©Project PLATEAU / MLIT Japan
    私がアニメーションにこだわる理由
    アニメーション系のコンテンツ
    は、作った物をSNSの動画で
    公開するだけでアウトプットが
    気軽にできる。
    技術記事を書いたり、コードを
    公開するのに自信がない人の
    最初の一歩にオススメ。

    View Slide

  26. ©Project PLATEAU / MLIT Japan
    私がアニメーションにこだわる理由
    https://twitter.com/_jsolly/status/15956021
    22506088449

    View Slide

  27. ©Project PLATEAU / MLIT Japan
    私がアニメーションにこだわる理由

    View Slide

  28. ©Project PLATEAU / MLIT Japan
    私がアニメーションにこだわる理由
    https://twitter.com/satoshi7190/status/159
    6320194435383298

    View Slide

  29. ©Project PLATEAU / MLIT Japan
    私がアニメーションにこだわる理由
    https://twitter.com/_jsolly/status/15963231
    23346886657

    View Slide

  30. ©Project PLATEAU / MLIT Japan
    私がアニメーションにこだわる理由
    https://twitter.com/_jsolly/status/159632
    3484413489153

    View Slide

  31. ©Project PLATEAU / MLIT Japan
    私がアニメーションにこだわる理由
    https://codepen.io/satoshi7190
    とりあえず見た目ができたら
    DEMO動画をTwitterに投稿。
    中身のコードが綺麗に整ったら
    コードペンにコードを共有。
    説明できるようになったら
    Qiitaで記事を書く。
    https://qiita.com/satoshi7190
    https://twitter.com/satoshi7190

    View Slide

  32. © 地理院地図 全国最新写真(シームレス)
    ●CSSはUIだけでなく地図上でも活用できる
    ●動く表現は地図に無関心な人にも注目させることができる
    ●コードがダサくて文章が苦手でも、見た目の評価でモチベは上がる
    まとめ

    View Slide