「X をしたいから地図を作って」という依頼ごとに作った例です。ブラウザ用の例は操作できます。表示した性能値はリポジトリのハーネスで測ったものです。 比較計測の条件 ・ GitHub
37 件
スマホで、世界の国を人口で塗り分けた地図をピンチで拡大して、タップした国の名前と人口を出したい。
WebGL2 / TypeScript (ブラウザには型を除いた ES modules を配る。ビルドなし)
コード 3.2 KB gzip ・ データ 463 KB gzip
操作する ↗2025年に世界で起きた M4.5 以上の地震を、地図の上で時間を追って再生したい。再生・一時停止と、スライダーで好きな日時に飛べるように。PC のブラウザで見る。
WebGL2 / TypeScript (ブラウザには型を除いた ES modules を配る。ビルドなし)
性能は未計測
操作する ↗東京23区の OSM の全ノード（約 966 万点）の密度をヒートマップで見たい。拡大・移動したら、タイルの粗い集計ではなく、 その画面の解像度で数え直してほしい。PC のブラウザで。
WebGL2 (EXT_color_buffer_float と EXT_float_blend) / TypeScript (ブラウザには型を除いた ES modules を配る。ビルドなし)
性能は未計測
操作する ↗世界の都市（Natural Earth の populated places、約 7,300 都市）を人口に応じた大きさの点で表示して、 マウスを乗せた都市の名前と人口を出したい。ノート PC のブラウザで使う。ページ全体（コードとデータ）で gzip 150 KB 以内にしたい。
WebGL2 (ステンシル、GL_LINES) / TypeScript (ES modules、ビルドなし。配るときは型を外すだけ)
性能は未計測
操作する ↗東京駅のまわりの建物を、PLATEAU の 3D モデルで、PC のブラウザでぐるぐる回して見たい。
WebGL2 (深度 24 bit、MSAA) / TypeScript (ES modules、ビルドなし。配るときは型を外すだけ)
性能は未計測
操作する ↗富士山のまわりの地形を、3D で斜めから眺めたい。PC のブラウザで、なめらかに回したい。
WebGL2 (R16UI のテクスチャ配列、インスタンス描画 1 回、gl_VertexID) / TypeScript (ES modules、ビルドなし。配るときは型を外すだけ)
性能は未計測
操作する ↗富士山の 3D 地形に、地理院のシームレス空中写真をテクスチャとして重ねて眺めたい。
WebGL2、Fetch Range、DecompressionStream / TypeScript
性能は未計測
操作する ↗全球の標高を軽く読み、地域別の高解像度 PMTiles は Range で読み、地球全体から地域の標高まで専用レンダラーで 3D 表示したい。
WebGL2、Fetch Range、DecompressionStream / TypeScript
性能は未計測
操作する ↗PLATEAU 配信 API を使い、東京駅周辺だけでなく広域の建物を新しい例として表示したい。
WebGL2、Fetch / TypeScript
性能は未計測
操作する ↗台東区の点群 PNG を表示したい。
WebGL2、Fetch、createImageBitmap / TypeScript
性能は未計測
操作する ↗秋田県内で報告されたツキノワグマ・イノシシ・シカの出没情報（クマダス、約2.5万件）を、2022年から2026年までの時系列スライダーで月・季節ごとに再生し、出没種別（クマ、痕跡、シカ、イノシシ）の切り替えや、カーソルを合わせた地点の詳細（日時・場所・状況）を確認したい。外部ライブラリなしでPCブラウザで軽快に動かしたい。
WebGL2 / TypeScript (ビルドなし・型ストリップ ES modules)
コード 6.4 KB gzip ・ データ 192 KB gzip ・ 初回描画 127 ms ・ フレーム p95 14.04 ms
操作する ↗2016年8月2日の地表気温予報GeoTIFFをNatural Earth投影の等値帯で見たい
WebGL2 R16UI texture and full-screen fragment shader / TypeScript
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗米国の郡別COVID-19新規感染者数を人口10万人当たりに直し、 週と集計セルの大きさを変えながら等値帯・等値線で見たい。
WebGL2 R32F scalar texture and Canvas2D land / TypeScript
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗バンクーバーの区画ごとの土地評価額と伸び率を、回転・拡大できる3D区画で見たい
WebGL2 triangle mesh and offscreen ID picking / TypeScript
コード 5.3 KB gzip ・ データ 577 KB gzip ・ 初回描画 596 ms ・ フレーム p95 215.58 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗米国の幹線道路事故を1990〜2015年で切り替え、死亡者数を色、事故件数を幅で見たい
WebGL2 instanced line quads and integer style textures / TypeScript
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗パリの約20万本の街路樹を、ズームに応じた集計格子から個々の点へ滑らかに切り替えて見たい
WebGL2 GL_POINTS and preaggregated sparse grids / TypeScript
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗ニューヨークの Uber 乗車地点10万個を重みに応じたヒートマップで見たい。 地図のパン・ズーム中も更新し、半径・強度・しきい値を操作したい。
WebGL2 (R32F加算ブレンドとGPU縮約) / TypeScript
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗英国の交通事故約14万件を六角セルへ集計し、件数を立体の高さと色で見たい。 地図を動かし、集計半径・列の幅・上位分位を操作したい。
WebGL2 instanced hexagonal prisms / TypeScript
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗Kaarta の室内 LiDAR 点群を全点保ち、回転と拡大縮小で滑らかに立体観察したい
WebGL2 GL_POINTS / TypeScript
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗ニューヨークの Uber 乗車地点10万個を画面上の正方格子で集計し、地図を動かしても セルの件数と色を更新したい。セル幅を変えて密度を見比べたい。PCブラウザで滑らかに動かしたい。
WebGL2 (R32F加算ブレンド) / TypeScript
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗Mapterhorn の標高と VersaTiles の衛星画像を使い、セントヘレンズ山の3D地形を滑らかに観察したい
WebGL2 with two textures per terrain tile / TypeScript
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗マンハッタンのイエローキャブとグリーンキャブの移動を、建物の間を通る軌跡として 時間とともに再生したい。軌跡の長さを変え、地図を動かして比較したい。
WebGL2 instanced timed segments and indexed building triangles / TypeScript
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗forge3d の代表例「Mount Rainier」のように、Mt. Rainier の DEM を 3D 地形として表示し、 オービットカメラで回転・ズームして山体を眺めたい。太陽は西北 302°・高度 24°に固定。 外部ライブラリなし、WebGL2 の 1 ドローコールで最速・最小に実装する。
WebGL2 / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗forge3d の例「Mount Fuji Labels」のように、富士山の地形を 3D で表示し、山頂と登山道の五合目・各合目・ 麓の地名をラベルで載せたい。ドラッグで回り、ホイールで寄れるようにし、山の向こう側に隠れた地名や、 重なってしまう地名は出さない。外部ライブラリなしで、最速・最小に。
WebGL2 (地形) と Canvas 2D (ラベル) / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗forge3d の例「Swiss Land-Cover」のように、スイスの地形に 2024 年の土地被覆 (森林、農地、市街地、草地、 雪氷など) を色で重ね、北西からの陰影で起伏が読めるようにしたい。国境の外は描かず、ほぼ真上から国全体を見せ、 題、出典、凡例を付ける。ドラッグで回り、ホイールで寄れるようにする。外部ライブラリなしで、最速・最小に。
WebGL2 / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗forge3d の例「3D Buildings」のように、オランダの 3D 建物データ (3DBAG の CityJSON タイル 1 枚、デン・ハーグ中心部の 277 棟) を三角形のメッシュにして立体で見たい。地面に 100 m の格子を引き、ドラッグで回り、ホイールで寄れて、 建物をクリックするとその建物の BAG の番号、建築年、高さ、屋根の形を出す。外部ライブラリなしで、最速・最小に。
WebGL2 / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗forge3d の例「Camera Flyover」のように、レーニア山の地形の上をカメラが飛ぶアニメーションを作りたい。 山頂を回るオービット、登山道を登る人を後ろから追うフォロー、北側を横切るレールの 3 つのカメラワークを切り替えられ、 再生と一時停止、時刻のスライダーで好きな瞬間に飛べる。カメラは地面に潜らない。0°、120°、240° のコマも並べる。 外部ライブラリなしで、最速・最小に。
WebGL2 と Canvas 2D (コマの縮小) / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗kepler.gl の Demo App (California Earthquakes) と同じ意図で、5.5万件の地震データを 特徴的なダークテーマ UI（開閉サイドバー、レイヤータブ、マグニチュード色ランプ、凡例、3Dチルト）と WebGL2 高速ポイント描画で再現したい。外部ライブラリ（React, Redux, deck.gl, Mapbox）なしで。
WebGL2 / TypeScript (型ストリップ配信)
コード 6.7 KB gzip ・ データ 614 KB gzip ・ 初回描画 177 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗kepler.gl の Open Modal サンプルと同じ意図で、ホスト画面上のボタンクリックから モーダルダイアログ内に kepler.gl 描画器を立ち上げ、開閉後も状態を維持しつつ 外部ライブラリ（React, Redux, deck.gl, Mapbox）なしで再現したい。
WebGL2 / TypeScript (型ストリップ配信)
コード 5.8 KB gzip ・ データ 614 KB gzip ・ 初回描画 175 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗kepler.gl の Custom Reducer サンプルと同じ意図で、外部のアクションディスパッチャーと 純粋な状態レデューサーを通じて地図のフィルター値・プリセット視点・サイドバー開閉を決定論的に制御し、 外部ライブラリ（React, Redux, deck.gl, Mapbox）なしで再現したい。
WebGL2 / TypeScript (型ストリップ配信)
コード 6.5 KB gzip ・ データ 614 KB gzip ・ 初回描画 276 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗kepler.gl の UMD Client サンプルと同じ意図で、ビルドツールやバンドラーなしに 単一スクリプトから任意の DOM 要素に kepler.gl 描画器を動的マウント・表示し、 外部ライブラリ（React, Redux, deck.gl, Mapbox）なしで再現したい。
WebGL2 / TypeScript (型ストリップ配信)
コード 5.3 KB gzip ・ データ 614 KB gzip ・ 初回描画 189 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗kepler.gl の Replace UI Component サンプルと同じ意図で、内部 UI 部品 （ヘッダー、追加統計パネル）をカスタム実装に動的に差し替え、地図描画器の状態を 損なわずに共存させられることを、外部ライブラリ（React, Redux, deck.gl, Mapbox）なしで再現したい。
WebGL2 / TypeScript (型ストリップ配信)
コード 6.0 KB gzip ・ データ 614 KB gzip ・ 初回描画 119 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗kepler.gl の Custom theme サンプルと同じ意図で、ダークテーマとライトテーマの 動的切り替え（UIカラー、背景海・陸地パレット、点群カラーランプの同期変更）を 外部ライブラリ（React, Redux, deck.gl, Mapbox）なしで再現したい。
WebGL2 / TypeScript (型ストリップ配信)
コード 5.8 KB gzip ・ データ 614 KB gzip ・ 初回描画 101 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗kepler.gl の Node App サンプルと同じ意図で、Node.js サーバーからエクスポートされた 自己完結型レポート画面（上部レポートバナー、統計サマリー、ヒストグラム、ダウンロード導線）と WebGL2 地図描画器を、外部ライブラリ（React, Redux, deck.gl, Mapbox）なしで再現したい。
WebGL2 / TypeScript (型ストリップ配信)
コード 5.6 KB gzip ・ データ 614 KB gzip ・ 初回描画 322 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗Mapbox GL JS の "Data driven circle colors" 例と同じく、世界の地震を点として描き、 マグニチュードに応じて円の色と大きさを連続的に変えたい。ドラッグとホイールで パン・ズームでき、6,000 点超でも 60 fps で動くこと。外部ライブラリなしで、最速・最小で。
WebGL2 + Canvas 2D（陸地レイヤ） / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗地震地点をズームに応じて集約し、件数を色・大きさ・数字で示したい。 クラスタをクリックすると展開し、単点ではマグニチュードと津波情報を見たい。
WebGL2 point sprites and Canvas2D land and labels / TypeScript
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗（比較用）02 と同じ依頼「スマホで、世界の国を人口で塗り分けた地図をピンチで拡大して、タップした国の名前と人口を出したい」を、 汎用地図エンジン MapLibre GL JS 5.24.0 で作ったもの。
MapLibre GL JS 5.24.0 (WebGL2) / JavaScript
性能は未計測
操作する ↗