Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
MapLibre GL JS とCSSアニメーションでできること
Search
Satoshi Komatsu
December 16, 2022
Programming
0
1.1k
MapLibre GL JS とCSSアニメーションでできること
2022/12/15 MIERUNE Meetup mini #05
https://mierune.connpass.com/event/266903/
Satoshi Komatsu
December 16, 2022
Tweet
Share
More Decks by Satoshi Komatsu
See All by Satoshi Komatsu
新宿駅構内を三人称視点で探索してみる
satoshi7190
2
360
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
720
立方体異世界生成魔法(キュービックディメンション・ジェネレーションマジック)
satoshi7190
2
540
新宿ダンジョンを可視化してみた
satoshi7190
3
880
Webエンジニアに転生したらCSS魔導士になった件
satoshi7190
3
4.1k
Other Decks in Programming
See All in Programming
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
170
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
140
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
7.2k
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.3k
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
770
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
18k
XP, Testing and ninja testing
m_seki
3
240
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
190
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
The Invisible Side of Design
smashingmag
301
51k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
RailsConf 2023
tenderlove
30
1.1k
We Have a Design System, Now What?
morganepeng
53
7.7k
Automating Front-end Workflow
addyosmani
1370
200k
What's in a price? How to price your products and services
michaelherold
246
12k
Faster Mobile Websites
deanohume
307
31k
Transcript
Satoshi Komatsu MapLibre GL JSとCSSアニメーションで できること
©Project PLATEAU / MLIT Japan 小松 聖 自己紹介 KOMATSU satoshi
今年の6月にMIERUNEに入社。 前職は岐阜県で庭師。 ひよっこエンジニアです。 フロントエンドエンジニア
©OpenStreetMap contributors 01 私がMapLibre GL JSで作るもの 02 MapLibre GL JSでのCSSの使い所 03 私がアニメーションにこだわる理由 目次
©OpenStreetMap contributors 01 私がMapLibre GL JSで 作るもの
©Project PLATEAU / MLIT Japan 私がMapLibre GL JSで作るもの •Mapboxからフォークされて誕生した オープンソースのJavaScript地図ライ
ブラリ MapLibre GL JS https://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 contributors 02 MapLibre GL JSでの CSSの使い所
©Project PLATEAU / MLIT Japan MapLibre GL JSでのCSSの使い所 CSSとは •
Webサイトの見た目部分 を 装 飾 するマークアップ アップ 言 語 。アニメーショ ンも可能。 • さっきのDEMOはこれを 地 図 上のビジュアル表 現 に活用したもの。
©Project PLATEAU / MLIT Japan canvas要素による表現 HTML要素による表現 MapLibre GL JSでのCSSの使い所
MapLibreの地図表現に使われる要素
©Project PLATEAU / MLIT Japan MapLibre 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 Japan canvasソースレイヤーによる表現の例 #30000DayMapChallenge
©Project PLATEAU / MLIT Japan canvasソースレイヤーによる表現の例 https://satoshi7190.github.io/earthquake-japan/ #30DayMapChallenge Day23 「Movement」
©OpenStreetMap contributors 03 私がアニメーションに こだわる理由
©Project PLATEAU / MLIT Japan 私がアニメーションにこだわる理由 一味違う個性を出せる
©Project PLATEAU / MLIT Japan 私がアニメーションにこだわる理由 よりインパクトのあるデータ表現ができる ※印象操作にならないよう、ある程度加減は必要です。
©Project PLATEAU / MLIT Japan 私がアニメーションにこだわる理由 アニメーション系のコンテンツ は、作った物をSNSの動画で 公開するだけでアウトプットが 気軽にできる。
技術記事を書いたり、コードを 公開するのに自信がない人の 最初の一歩にオススメ。
©Project PLATEAU / MLIT Japan 私がアニメーションにこだわる理由 https://twitter.com/_jsolly/status/15956021 22506088449
©Project PLATEAU / MLIT Japan 私がアニメーションにこだわる理由
©Project PLATEAU / MLIT Japan 私がアニメーションにこだわる理由 https://twitter.com/satoshi7190/status/159 6320194435383298
©Project PLATEAU / MLIT Japan 私がアニメーションにこだわる理由 https://twitter.com/_jsolly/status/15963231 23346886657
©Project PLATEAU / MLIT Japan 私がアニメーションにこだわる理由 https://twitter.com/_jsolly/status/159632 3484413489153
©Project PLATEAU / MLIT Japan 私がアニメーションにこだわる理由 https://codepen.io/satoshi7190 とりあえず見た目ができたら DEMO動画をTwitterに投稿。 中身のコードが綺麗に整ったら
コードペンにコードを共有。 説明できるようになったら Qiitaで記事を書く。 https://qiita.com/satoshi7190 https://twitter.com/satoshi7190
© 地理院地図 全国最新写真(シームレス) •CSSはUIだけでなく地図上でも活用できる •動く表現は地図に無関心な人にも注目させることができる •コードがダサくて文章が苦手でも、見た目の評価でモチベは上がる まとめ