2022/12/15 MIERUNE Meetup mini #05 https://mierune.connpass.com/event/266903/
Satoshi KomatsuMapLibre GL JSとCSSアニメーションでできること
View Slide
©Project PLATEAU / MLIT Japan小松 聖 自己紹介KOMATSU satoshi今年の6月にMIERUNEに入社。前職は岐阜県で庭師。ひよっこエンジニアです。フロントエンドエンジニア
©OpenStreetMap contributors01 私がMapLibre GL JSで作るもの02 MapLibre GL JSでのCSSの使い所03 私がアニメーションにこだわる理由目次
©OpenStreetMap contributors01 私がMapLibre GL JSで作るもの
©Project PLATEAU / MLIT Japan私がMapLibre GL JSで作るもの●Mapboxからフォークされて誕生したオープンソースのJavaScript地図ライブラリMapLibre GL JShttps://maplibre.org/
© 地理院地図 全国最新写真(シームレス)DEMOを3つ紹介私がMapLibre GL JSで作るもの
©Project PLATEAU / MLIT Japan私がMapLibre GL JSで作るもの1.地図上に植林https://codepen.io/satoshi7190/pen/ZERmWMX
©Project PLATEAU / MLIT Japan私がMapLibre GL JSで作るもの2.キャトルミューティレーションhttps://codepen.io/satoshi7190/pen/OJEGqOq
©Project PLATEAU / MLIT Japan私がMapLibre GL JSで作るもの3.魔法陣の発動と召喚獣の召喚https://codepen.io/satoshi7190/pen/ExRJrLa
©OpenStreetMap contributors02 MapLibre GL JSでのCSSの使い所
©Project PLATEAU / MLIT JapanMapLibre GL JSでのCSSの使い所CSSとは● Webサイトの見た目部分を 装 飾 するマークアップアップ 言 語 。アニメーションも可能。● さっきのDEMOはこれを地 図 上のビジュアル表 現に活用したもの。
©Project PLATEAU / MLIT Japancanvas要素による表現HTML要素による表現MapLibre GL JSでのCSSの使い所MapLibreの地図表現に使われる要素
©Project PLATEAU / MLIT JapanMapLibre GL JSでのCSSの使い所● ラスターレイヤー背景地図の表示● ポリゴン、ライン、ポイントレイヤーベクトル形式による地物の表示● シンボルレイヤーテキストの表示やクラスター表現canvas要素地図のメインになる部分
©Project PLATEAU / MLIT Japan●マーカー検索結果の表示や、目印のような一時的ポイントの表示●ポップアップ地図上の地物の詳細データなどの表示HTML要素MapLibre GL JSでのCSSの使い所メインの地図に乗っかるもの
MapLibre GL JSでのCSSの使い所こいつらはCSSの力で・・・
MapLibre GL JSでのCSSの使い所こんな風に変身できます。
MapLibre GL JSでのCSSの使い所動かすこともできます
MapLibre GL JSでのCSSの使い所●大きさが変わらないので地図をズームアウトすると密になる●ポイント指定での表現しかできない●図形を曲げるなどの曲線的な動きはCSSでは表現できないですが・・・
MapLibre GL JSでのCSSの使い所CSSで出来ないことはcanvasソースレイヤーでhttps://codepen.io/satoshi7190/pen/abKrbpp●通常のcanvas要素を地図上にプロットできる。●bboxによるエリア指定で表示するので地図の縮尺に合わせてくれる。●JavaScriptのコードでCSSアニメーションよりも複雑な動きを表現できる
©Project PLATEAU / MLIT Japancanvasソースレイヤーによる表現の例#30000DayMapChallenge
©Project PLATEAU / MLIT Japancanvasソースレイヤーによる表現の例https://satoshi7190.github.io/earthquake-japan/#30DayMapChallenge Day23 「Movement」
©OpenStreetMap contributors03 私がアニメーションにこだわる理由
©Project PLATEAU / MLIT Japan私がアニメーションにこだわる理由一味違う個性を出せる
©Project PLATEAU / MLIT Japan私がアニメーションにこだわる理由よりインパクトのあるデータ表現ができる※印象操作にならないよう、ある程度加減は必要です。
©Project PLATEAU / MLIT Japan私がアニメーションにこだわる理由アニメーション系のコンテンツは、作った物をSNSの動画で公開するだけでアウトプットが気軽にできる。技術記事を書いたり、コードを公開するのに自信がない人の最初の一歩にオススメ。
©Project PLATEAU / MLIT Japan私がアニメーションにこだわる理由https://twitter.com/_jsolly/status/1595602122506088449
©Project PLATEAU / MLIT Japan私がアニメーションにこだわる理由
©Project PLATEAU / MLIT Japan私がアニメーションにこだわる理由https://twitter.com/satoshi7190/status/1596320194435383298
©Project PLATEAU / MLIT Japan私がアニメーションにこだわる理由https://twitter.com/_jsolly/status/1596323123346886657
©Project PLATEAU / MLIT Japan私がアニメーションにこだわる理由https://twitter.com/_jsolly/status/1596323484413489153
©Project PLATEAU / MLIT Japan私がアニメーションにこだわる理由https://codepen.io/satoshi7190とりあえず見た目ができたらDEMO動画をTwitterに投稿。中身のコードが綺麗に整ったらコードペンにコードを共有。説明できるようになったらQiitaで記事を書く。https://qiita.com/satoshi7190https://twitter.com/satoshi7190
© 地理院地図 全国最新写真(シームレス)●CSSはUIだけでなく地図上でも活用できる●動く表現は地図に無関心な人にも注目させることができる●コードがダサくて文章が苦手でも、見た目の評価でモチベは上がるまとめ