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

by Satoshi Komatsu

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

Slide 30

Slide 30 text

Slide 31

Slide 31 text

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