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

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. ©Project PLATEAU / MLIT Japan 小松  聖  自己紹介 KOMATSU satoshi

    今年の6月にMIERUNEに入社。 前職は岐阜県で庭師。 ひよっこエンジニアです。 フロントエンドエンジニア
  2. ©Project PLATEAU / MLIT Japan MapLibre GL JSでのCSSの使い所 CSSとは •

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

    背景地図の表示 • ポリゴン、ライン、ポイントレイヤー ベクトル形式による地物の表示 • シンボルレイヤー テキストの表示やクラスター表現 canvas要素 地図のメインになる部分
  4. ©Project PLATEAU / MLIT Japan 私がアニメーションにこだわる理由 https://codepen.io/satoshi7190 とりあえず見た目ができたら DEMO動画をTwitterに投稿。 中身のコードが綺麗に整ったら

    コードペンにコードを共有。 説明できるようになったら Qiitaで記事を書く。 https://qiita.com/satoshi7190 https://twitter.com/satoshi7190