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

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

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を３つ紹介
   私がMapLibre GL JSで作るもの
   

   View Slide

7. ©Project PLATEAU / MLIT Japan
   私がMapLibre GL JSで作るもの
   １.地図上に植林
   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