「X をしたいから地図を作って」という依頼ごとに作った例です。ブラウザ用の例は操作できます。表示した性能値はリポジトリのハーネスで測ったものです。 比較計測の条件 ・ GitHub
125 件
自治体の観光サイトの記事に、都道府県を選ぶ日本地図を埋め込みたい。クリックやタップで選んだ都道府県で記事を絞り込む。 外部ライブラリは入れられないし、ページが重くなるのは困る。
Canvas 2D (Path2D と isPointInPath) / TypeScript (ブラウザには型を除いた ES modules を配る。ビルドなし)
コード 1.0 KB gzip ・ データ 4 KB gzip ・ 初回描画 150 ms
操作する ↗スマホで、世界の国を人口で塗り分けた地図をピンチで拡大して、タップした国の名前と人口を出したい。
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 を配る。ビルドなし)
性能は未計測
操作する ↗ノート PC のデスクトップアプリとして、東京23区の道路を1本も間引かずに表示して、144Hz のモニタでカクつかずにパン・ズームしたい。 ブラウザは使いたくない。起動は一瞬で。
EGL + OpenGL ES 3.0。ウィンドウは Xlib、ベンチは EGL device platform のピクセルバッファ / C11
性能は未計測
実装を見る ↗ESP32-C6（RISC-V 160MHz、RAM 512KB、FPU なし、PSRAM なし）と 240x240 の液晶のハンディ端末で、 渋谷駅のまわりの道路地図をボタンでスクロール・拡大縮小したい。
なし (呼ぶ側が 240×16 の RGB565 ストリップを LCD へ DMA する) / C11 (freestanding、libc なし、ヒープなし、浮動小数点なし)
性能は未計測
実装を見る ↗世界の都市（Natural Earth の populated places、約 7,300 都市）を人口に応じた大きさの点で表示して、 マウスを乗せた都市の名前と人口を出したい。ノート PC のブラウザで使う。ページ全体（コードとデータ）で gzip 150 KB 以内にしたい。
WebGL2 (ステンシル、GL_LINES) / TypeScript (ES modules、ビルドなし。配るときは型を外すだけ)
性能は未計測
操作する ↗日本地図を使って、示された都道府県の場所を順に当てるクイズを遊びたい。
Canvas 2D と Path2D / TypeScript
性能は未計測
操作する ↗日本の都道府県名を入力すると、その位置を地図上で見つけたい。
Canvas 2D と Path2D / TypeScript
性能は未計測
操作する ↗z.yuiseki.net に置いた国土地理院の全国最新写真（シームレス）を、ブラウザで移動・拡大しながら見たい。 約715 GiB（約768 GB）の PMTiles 全体はダウンロードせず、画面に必要な写真だけを読む。
Canvas 2D、Fetch Range、DecompressionStream / TypeScript
性能は未計測
操作する ↗東京駅のまわりの建物を、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
性能は未計測
操作する ↗Hugging Face の Kontur Population 2023-11-01 22km データセットを H3 で可視化したい。
Canvas 2D と Path2D / TypeScript
性能は未計測
操作する ↗UCDP GED の公開データを地図で見たい。出来事が起きた場所を年ごとに追い、暴力の分類と死者数を確認したい。
Canvas 2D と Path2D / TypeScript
性能は未計測
操作する ↗全球の標高を軽く読み、地域別の高解像度 PMTiles は Range で読み、地球全体から地域の標高まで専用レンダラーで 3D 表示したい。
WebGL2、Fetch Range、DecompressionStream / TypeScript
性能は未計測
操作する ↗PLATEAU 配信 API を使い、東京駅周辺だけでなく広域の建物を新しい例として表示したい。
WebGL2、Fetch / TypeScript
性能は未計測
操作する ↗台東区の点群 PNG を表示したい。
WebGL2、Fetch、createImageBitmap / TypeScript
性能は未計測
操作する ↗z.yuiseki.net の OpenStreetMap 全球 PMTiles を、特定レイヤーだけに特化した簡易スタイルで高速に表示したい。
Canvas 2D、Fetch、DecompressionStream / TypeScript
性能は未計測
操作する ↗秋田県内で報告されたツキノワグマ・イノシシ・シカの出没情報（クマダス、約2.5万件）を、2022年から2026年までの時系列スライダーで月・季節ごとに再生し、出没種別（クマ、痕跡、シカ、イノシシ）の切り替えや、カーソルを合わせた地点の詳細（日時・場所・状況）を確認したい。外部ライブラリなしでPCブラウザで軽快に動かしたい。
WebGL2 / TypeScript (ビルドなし・型ストリップ ES modules)
コード 6.4 KB gzip ・ データ 192 KB gzip ・ 初回描画 127 ms ・ フレーム p95 14.04 ms
操作する ↗MapLibre の例「Add a canvas source」と同じものを作りたい。自分のページで描いているアニメーションの canvas (400x400、円が5つ跳ね回る) を、ミャンマーの上の4隅の座標に合わせて地図に貼り、地図は動かせるようにする。 地図は MapLibre のデモの地図 (demotiles) と同じ見た目でよい。
Canvas 2D (Path2D) と CSS transform / TypeScript (ブラウザには型を除いた ES modules を配る。ビルドなし)
性能は未計測
操作する ↗CesiumJS の最も基本的な「Hello World」のように、暗黒の宇宙空間に浮かぶ 3D 地球儀を表示したい。 マウスのドラッグで地球を全方向に回転し、ホイールでカメラの拡大・縮小ができること。外部ライブラリゼロ、Canvas 2D による直接描画で最速・最小で実装する。
Canvas 2D / TypeScript (型ストリップ配信)
コード 2.6 KB gzip ・ データ 27 KB gzip ・ 初回描画 8 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗CesiumJS Sandcastle の「Lighting」のように、太陽に照らされた 3D 地球儀を表示したい。 太陽はワールド座標に固定し、スライダーで太陽直下点の経度（分点なので緯度 0）を動かすと 昼夜の境界（terminator）が地図の上を移動する。ドラッグで地球を回転、ホイールでズーム。 外部ライブラリなし、Canvas 2D で最速・最小に実装する。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗CesiumJS の「Map Pins」例のように、宇宙空間の 3D 地球儀上の指定地理座標（ワシントン、東京、ロンドン）に 色分けされたピン（マップピン）を配置し、地球の回転に応じて前面（可視）と背面（地平線遮蔽・非表示）が 正しく切り替わる地図を表示したい。ドラッグで回転、ホイールでズームできること。外部ライブラリなし、Canvas 2D で最速・最小で実装する。
Canvas 2D / TypeScript (型ストリップ配信)
コード 3.3 KB gzip ・ データ 27 KB gzip ・ 初回描画 18 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗CesiumJS Sandcastle の「Points」のように、3D 地球儀上に 5,000 個の点プリミティブを配置し、 視線に応じた地平線オクルージョン判定（裏面カリング）とカラーバッチ描画により 60 fps で高速に回転・ズーム表示したい。 ドラッグで回転、ホイールで拡大縮小できること。外部ライブラリなし、Canvas 2D で最速・最小で実装する。
Canvas 2D / TypeScript (型ストリップ配信)
コード 3.2 KB gzip ・ データ 60 KB gzip ・ 初回描画 52 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗D3 の world map と同じ意図で、正距円筒図法の世界地図を陸地と10度刻みの経緯線で 描きたい。ブラウザで開いた瞬間に全体が見え、外部ライブラリなしで最速・最小に。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗D3 の tile / geo のデモと同じ意図で、Web Mercator のラスタータイル地図に タイル境界と z/x/y のアドレスを重ねて表示したい。TileJSON （https://tile.yuiseki.net/styles/512/osm-carto.json）の tiles テンプレート・ tileSize・minzoom/maxzoom・attribution を読んで描き、ポインタ下のタイルの z/x/y を読み出せるようにする。ドラッグでパン、ホイールでズーム。 地図エンジンも D3 本体も使わず Canvas 2D で実装する。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗2016年8月2日の地表気温予報GeoTIFFをNatural Earth投影の等値帯で見たい
WebGL2 R16UI texture and full-screen fragment shader / TypeScript
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗D3 の "Solar terminator" と同じく、世界地図の上に太陽直下点と昼夜の境界（明暗境界線）を 描き、UTC 時刻を動かすと夜の範囲が動くようにしたい。2026-10-30 の日付で、 外部ライブラリなしで最速・最小に。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗deck.gl の ArcLayer と同じ意図で、米国郡間の人口移動フローを 3D 放物線アークとして 始点・終点カラーグラデーションと標高カーブで描き、パン・ズームや郡選択に追従させたい。外部ライブラリなしで。
Canvas 2D / TypeScript (型ストリップ配信)
コード 4.6 KB gzip ・ データ 195 KB gzip ・ 初回描画 15 ms
ソース ・ 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 ・ 設計と計測 ・ 元例 ↗
操作する ↗米国の郡（county）間の人口移動（ネットの東西方向）上位1,500組を、直線の LineLayer として地図上に描きたい。 東向きと西向きで色を分け、ドラッグでパン、ホイールで拡大縮小できるようにする。 外部ライブラリなし・Canvas 2D で最速・最小に実装する。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗Kaarta の室内 LiDAR 点群を全点保ち、回転と拡大縮小で滑らかに立体観察したい
WebGL2 GL_POINTS / TypeScript
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗deck.gl の ScatterplotLayer と同じ意図で、マンハッタンの 13,987 点を重みに応じた 半径と色の点で描き、パン・ズームで追従させたい。WebGL を使わず外部ライブラリなしで。
Canvas 2D / TypeScript (型ストリップ配信)
コード 2.5 KB gzip ・ データ 75 KB gzip ・ 初回描画 23 ms
ソース ・ 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 のギャラリー例「Luxembourg rail network」のように、ルクセンブルクの領土ジオメトリの上に、 主要鉄道網（CFL）のベクターラインを重ね合わせた輸送オーバーレイ地図を表示したい。 ドラッグでパン、ホイールで拡大縮小でき、ラインが地理座標に固定されて追従すること。外部ライブラリなし、Canvas 2D で最速・最小で実装する。
Canvas 2D / TypeScript (型ストリップ配信)
コード 2.7 KB gzip ・ データ 0 KB gzip ・ 初回描画 5 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗forge3d の例「3D Buildings」のように、オランダの 3D 建物データ (3DBAG の CityJSON タイル 1 枚、デン・ハーグ中心部の 277 棟) を三角形のメッシュにして立体で見たい。地面に 100 m の格子を引き、ドラッグで回り、ホイールで寄れて、 建物をクリックするとその建物の BAG の番号、建築年、高さ、屋根の形を出す。外部ライブラリなしで、最速・最小に。
WebGL2 / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗forge3d のギャラリー例「Point Cloud」のように、セントヘレンズ火山火口（Mt. St. Helens）の 3D LiDAR 点群（10,000点）を、標高・深度カラーマッピングと 3D オービットカメラにより 60 fps で高速に回転・ズーム描画したい。 ドラッグで回転、ホイールで拡大縮小できること。外部ライブラリなし、Canvas 2D で最速・最小で実装する。
Canvas 2D / TypeScript (型ストリップ配信)
コード 2.8 KB gzip ・ データ 45 KB gzip ・ 初回描画 52 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗forge3d の例「Camera Flyover」のように、レーニア山の地形の上をカメラが飛ぶアニメーションを作りたい。 山頂を回るオービット、登山道を登る人を後ろから追うフォロー、北側を横切るレールの 3 つのカメラワークを切り替えられ、 再生と一時停止、時刻のスライダーで好きな瞬間に飛べる。カメラは地面に潜らない。0°、120°、240° のコマも並べる。 外部ライブラリなしで、最速・最小に。
WebGL2 と Canvas 2D (コマの縮小) / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗forge3d のギャラリー例「Vector export」のように、表示中の地図（ルクセンブルクの 鉄道網）をベクター形式（SVG）として書き出せる地図がほしい。画面の地図は Canvas 2D で 最速・最小に描き、書き出しは表示と同じジオメトリ・色・画面座標で行う。外部ライブラリなし。
Canvas 2D + SVG 文字列出力 / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗forge3d のギャラリー例「Shadow Comparison」のように、Mt. Rainier の DEM から作った 同じ陰影起伏図を、影（キャストシャドウ）なしと影ありで左右に分割表示し、スライダーで 境界を動かして比較したい。パンとホイールズームで地形を動かせること。 外部ライブラリなし、Canvas 2D で最速・最小に実装する。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗forge3d のギャラリー例「Map plate」のように、マウント・レーニア周辺の Mini DEM 標高データに基づく 高精細な陰影段彩レリーフを、二重ニートライン（外枠）、タイトルバナー、方位記号、スケールバー、標高凡例と 統合した完成地図版（Map Plate）として表示したい。ドラッグでパン、ホイールで拡大縮小でき、 枠と家具が正確に配置されること。外部ライブラリなし、Canvas 2D で最速・最小で実装する。
Canvas 2D / TypeScript (型ストリップ配信)
コード 3.8 KB gzip ・ データ 19 KB gzip ・ 初回描画 44 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗地図上の地点をクリックしたときに表示する rich popup を DOM overlay や Canvas 自前描画ではなく、 HTML-in-Canvas（WICG drawElementImage）で実 HTML として Canvas 内に描画・操作できることを検証したい。
Canvas 2D + HTML-in-Canvas (CanvasDrawElement) / TypeScript (erasableSyntaxOnly)
コード 8.0 KB gzip ・ データ 1 KB gzip ・ 初回描画 712 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗HTML-in-Canvas（WICG drawElementImage）で生成した実 HTML ラベルカードを WebGPU レンダリングパイプラインへ取り込み、 地図上のラベルとして GPU インスタンス描画し、パン・ズーム時に HTML の再レイアウトやテクスチャ再アップロードなしで追従させたい。
WebGPU + HTML-in-Canvas (CanvasDrawElement) / TypeScript (erasableSyntaxOnly)
コード 11.4 KB gzip ・ データ 1 KB gzip ・ 初回描画 1693 ms
ソース ・ 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 ・ 設計と計測 ・ 元例 ↗
操作する ↗ロンドン中心部（51.505, -0.09）の地図に、マーカー（ピン）、半径500mの円、三角形のポリゴンを描き、 それぞれクリックでポップアップを表示したい。地図上をクリックしたときその地点の緯度経度を出したい。外部ライブラリは使わず軽量に。
Canvas 2D / TypeScript (型ストリップ配信)
コード 3.6 KB gzip ・ データ 30 KB gzip ・ 初回描画 13 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗ロンドン周辺の3地点に、画像ファイルを使わず Canvas で描いたカスタムアイコン（ピン・四角・丸）を置き、 それぞれクリックで固有のポップアップを表示したい。外部ライブラリは使わず軽量に。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗Leaflet の GeoJSON チュートリアルと同じ意図で、名前を持つポイント・ルート・地域ポリゴンを 1つの GeoJSON として読み込み、クリックした地物の名前をポップアップに出したい。 パン・ズームでき、外部ライブラリなしで軽量に。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗Copenhagen を中心に、標準のシアン色のピンと、45度回転した黒色のピンの2つのマーカーを配置した地図を表示したい。 ドラッグでパン、ホイールでズームしてもマーカーが地理座標に固定されて追従すること。外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
コード 2.7 KB gzip ・ データ 30 KB gzip ・ 初回描画 6 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗Mapbox の "Add an image" 例と同じく、ニューイングランド上空 [-80.425, 37.936]〜[-71.516, 46.437] の矩形に、あらかじめ用意した 1 枚の画像を地図に貼りたい。パン・ズームすると画像は地図に 固定されて一緒に動く。外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗Mapbox の "Add an image (animated)" 例と同じく、[0, 0] に脈打つドット（pulsing dot）を 置きたい。外側の輪が 1 秒かけて広がりながら薄くなり、内側の赤い円は常に同じ大きさで 描かれる。中心 [0, 0]・ズーム 2、ドットはズームしても 100 px の画面サイズを保つ。 外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗Mapbox の "Add an image (generated)" 例と同じく、コードでピクセルごとに生成した 64×64 の グラデーション画像をアイコンとして地図に置きたい。中心 [0, 0]・ズーム 2 で、アイコンは どのズームでも 64 px の画面サイズを保つ。外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗シカゴ中心部（[-87.6321, 41.8362]、ズーム 9.5）の地図に、市域を覆うラスタレイヤーを重ね、 スライダーをドラッグしてレイヤーの不透明度を 0〜100% で調整したい。 スライダーは地図上に描画し、操作は外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗Mapbox GL JS の公式ギャラリー例「Animate a line」のように、サンフランシスコからワシントンD.C.を結ぶ 大圏航路ルートラインを、毎フレームの頂点ストリーミングにより時間経過とともに滑らかに伸長アニメーション描画したい。 先頭のパルス発光マーカー、軌跡グローを備え、ドラッグでパン、ホイールで拡大縮小中も 60 fps で滑らかに再描画すること。 外部ライブラリなし、Canvas 2D で最速・最小で実装する。
Canvas 2D / TypeScript (型ストリップ配信)
コード 3.1 KB gzip ・ データ 38 KB gzip ・ 初回描画 44 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗サンフランシスコからワシントンD.C.へのルートを、破線のダッシュ（アリの行進）が流れ続ける 「ant path」としてアニメーション表示したい。ドラッグでパン、ホイールで拡大縮小でき、 外部ライブラリなし・Canvas 2D で最速・最小に実装する。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗[-96.0, 37.8] にピンを1本置き、そのピンが一定周期で跳ねるアニメーションを表示したい。 ピンの先端は常に同じ地理座標を基準に上下し、ドラッグでパン、ホイールで拡大縮小できる。 外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗地図右下に出典表示（attribution）を置き、ボタンで四隅のどこへでも移動できるようにしたい。 地図をパン・ズームしても出典表示は画面の同じ位置に留まる。外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗海・陸・強調ポリゴンをまとめて配色し直すカラースイッチャー付きの地図を表示したい。 Blue / Dark / Sunset の 3 つのスウォッチで即座に塗り色が切り替わり、パン・ズームしても 色と地理的な位置関係が保たれる。外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗Mapbox GL JS の "Data driven circle colors" 例と同じく、世界の地震を点として描き、 マグニチュードに応じて円の色と大きさを連続的に変えたい。ドラッグとホイールで パン・ズームでき、6,000 点超でも 60 fps で動くこと。外部ライブラリなしで、最速・最小で。
WebGL2 + Canvas 2D（陸地レイヤ） / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗ホイールでの拡大縮小を無効にした地図を表示したい。ドラッグによるパンは有効、 ダブルクリックによるズームは有効のまま。外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗[-66.324, -16.498]（ボリビア）に置いたピンをマウスでつかんで地図上の任意の位置へ動かせる地図を表示したい。 ピン以外の場所をドラッグしたときは地図がパンし、ホイールで拡大縮小できる。 外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗中心座標 [-96.0, 37.8]、ズーム 3 で地図を表示し、 指定座標に「Hello World!」のポップアップを吹き出し型で表示・開閉可能にし、 ドラッグでパン、ホイールで拡大縮小できる地図を作りたい。外部ライブラリなし、Canvas 2D で最速・最小で実装する。
Canvas 2D / TypeScript (型ストリップ配信)
コード 3.1 KB gzip ・ データ 30 KB gzip ・ 初回描画 7 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗ワシントンD.C.（経度 -77.0369, 緯度 38.9072）に標準のマーカー（ピン）を1つ立てて、 ドラッグでパン、ホイールで拡大縮小できる地図を表示したい。外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
コード 2.5 KB gzip ・ データ 30 KB gzip ・ 初回描画 5 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗経度0・緯度0の地点に、画像ファイルを読み込まずに Canvas で生成した赤→青のグラデーション アイコン（赤チャンネルをアルファにコピーして下端を半透明にする）を描き、 ドラッグでパン、ホイールで拡大縮小できる地図を表示したい。外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗サンフランシスコ・ゴールデンゲート北側のトレイルルート（GeoJSON LineString）を、 太さ8pxのグレー線（round cap/join）として背景地図上に描画し、 ドラッグでパン、ホイールで拡大縮小できる地図を表示したい。外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
コード 3.0 KB gzip ・ データ 30 KB gzip ・ 初回描画 9 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗メイン州の境界（GeoJSON Polygon）を、 半透明ティール色（#008888、不透明度 0.8）の塗りつぶしとして背景地図上に描画し、 ドラッグでパン、ホイールで拡大縮小できる地図を表示したい。外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
コード 3.2 KB gzip ・ データ 30 KB gzip ・ 初回描画 8 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗コロラド州を覆うポリゴンを、画像ファイルではなく生成したチェッカーパターンで塗った 地図を表示したい。パターンは画面に固定されたままポリゴンに沿ってクリップされ、 ドラッグでパン、ホイールで拡大縮小できる。外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗TileJSON で配信されるラスタータイル地図（512px、XYZ）を表示したい。 TileJSON の tiles テンプレート・tileSize・minzoom/maxzoom・attribution を読んで描き、 ドラッグでパン、ホイールで拡大縮小、3つのスタイル（osm-carto / osm-liberty / osm-bright）を 切り替えられるようにする。地図エンジンは使わず Canvas 2D で実装する。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗経度0・緯度0の地点に、画像ファイルを読み込まずに生成した猫のアイコンスプライトを描き、 ドラッグでパン、ホイールで拡大縮小できる地図を表示したい。外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗マンハッタン周辺の3地点に、画像ファイルを読み込まずに描いた緑・橙・紅のピンアイコンを置き、 OpenStreetMap のラスター地図を背景に、ドラッグでパン、ホイールで拡大縮小できる地図を表示したい。 外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗[-96.0, 37.8] にピンを1本置き、そのピンが一定周期で跳ねるアニメーションを表示したい。 ピンの先端は常に同じ地理座標を基準に上下し、ドラッグでパン、ホイールで拡大縮小できる。 外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗経度0・緯度0を中心とする半径20°の円周上を、青い点が毎秒60°で回り続ける地図を表示したい。 ドラッグでパン、ホイールで拡大縮小でき、点は常に地理座標に固定される。外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗MapLibre の "Attach a popup to a marker instance" 例と同じく、ワシントン記念塔 [-77.0353, 38.8895] を中心・ズーム 5 で表示し、記念塔の位置に 50 px の丸い マーカーを置いて、クリックで「Construction on the Washington Monument began in 1848.」 のポップアップ（offset 25 px）を開閉したい。ドラッグでパン、ホイールでズームでき、 ポップアップはマーカーに固定される。外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗ニューヨーク・ロンドン・東京の3つのシンボルを置いた世界地図を表示し、シンボルを クリックすると地図がその都市を中心へイージングしながら移動するようにしたい。 空の場所のクリックでは動かず、ドラッグでパン、ホイールで拡大縮小できる。 外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗エチオピア周辺を覆うポリゴンを色付きで塗った地図を表示し、画面の Teal / Orange / Purple / Random ボタンを押すたびに塗り色が切り替わりたい。ドラッグでパン、ホイールで拡大縮小できる。 外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗MapLibre の "Change the default position for attribution" 例と同じく、 ワシントン DC 周辺 [-77.04, 38.907]・ズーム 2 の地図で、既定の右下ではなく 左上に出典表示（attribution）を置きたい。地図をパン・ズームしても出典表示は 画面の同じ位置に留まる。外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗経度0・緯度0に置いたピンをマウスでつかんで地図上の任意の位置へ動かせる地図を表示したい。 ピン以外の場所をドラッグしたときは地図がパンし、ホイールで拡大縮小できる。 外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗経度0・緯度0に青い点を1つ置き、その点をドラッグして好きな地理座標へ動かせる 地図を表示したい。点以外をドラッグすると地図がパンし、ホイールで拡大縮小できる。 外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗MapLibre の公式ギャラリー例「Create a heatmap layer」のように、USGS 地震データ（6,000件以上）から マグニチュード重み付けされた連続密度ヒートマップをリアルタイムに計算・描画したい。 青〜シアン〜黄〜赤の滑らかなカーネル段彩グラデーションを表示し、ドラッグでパン、ホイールで拡大縮小できること。 外部ライブラリなし、Canvas 2D で最速・最小で実装する。
Canvas 2D / TypeScript (型ストリップ配信)
コード 3.3 KB gzip ・ データ 86 KB gzip ・ 初回描画 100 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗エチオピア周辺を覆うポリゴンを置き、ポインタがその上に来たときだけ塗り色を ティールからオレンジへ変えるホバー効果を表示したい。ポインタが外れると元の色に戻り、 ドラッグでパン、ホイールで拡大縮小できる。外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗地震地点をズームに応じて集約し、件数を色・大きさ・数字で示したい。 クラスタをクリックすると展開し、単点ではマグニチュードと津波情報を見たい。
WebGL2 point sprites and Canvas2D land and labels / TypeScript
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗中心座標 [-122.65, 45.52]、ズーム 3 で地図を表示し、 ホイールによるスクロールズームを無効化（map.scrollZoom.disable() 同等）しつつ、ドラッグによるパンは許可した地図を作りたい。外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
コード 2.7 KB gzip ・ データ 30 KB gzip ・ 初回描画 6 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗初期位置 [0, 0]、ズーム 1 で世界地図を表示し、左下に MapLibre バッジを配置して、 ドラッグでパン、ホイールやボタンで拡大縮小できる地図を表示したい。外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
コード 2.8 KB gzip ・ データ 30 KB gzip ・ 初回描画 11 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗中心座標 [74.5, 40]、ズーム 3 で静的な世界地図を表示し、 ドラッグやホイールによるパン・ズーム操作を完全に無効化（interactive: false）した地図を作りたい。外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
コード 2.0 KB gzip ・ データ 30 KB gzip ・ 初回描画 6 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗中心座標 [-96.0, 37.8]、ズーム 3 の地図を表示し、クリックした位置に「You clicked here!」の 吹き出し型ポップアップを開き、× ボタンで閉じられるようにしたい。ドラッグでパン、 ホイールで拡大縮小でき、ポップアップの先端はクリックした地理座標に固定される。 外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗中心座標 [-96.0, 37.8]、ズーム 3 の地図に青いマーカーを1つ置き、マーカーに ポインタを近づけると「You hovered here!」の吹き出し型ポップアップを表示したい。 離すと消え、ドラッグでパン、ホイールで拡大縮小できる。 外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗中心座標 [-96.0, 37.8]、ズーム 3 で地図を表示し、 指定座標に「Hello World!」の吹き出し型ポップアップを常時表示・開閉可能にし、 ドラッグでパン、ホイールで拡大縮小できる地図を作りたい。外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
コード 3.2 KB gzip ・ データ 30 KB gzip ・ 初回描画 7 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗MapLibre の "Draw a circle" 例と同じく、ニュージャージー州 [-74.5, 40] を中心とする 半径 50 km の円を半透明の青で背景地図の上に描き、ドラッグとホイールで操作したい。 外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗MapLibre の "Fit a map to a bounding box" 例と同じく、ニューヨーク [-74.5, 40]・ ズーム 9 で開き、ボタンのクリックで [[32.958984, -5.353521], [43.50585, 5.615985]] の範囲がビューポートに収まるよう中心とズームを合わせたい。範囲の四隅と中心には 目印を置き、ドラッグのパンとホイールのズームにも追従させる。外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗ワシントンDC中心部の遊歩道（GeoJSON LineString、11点）を紫の5px線で描き、 ページのボタンを押すとそのラインのバウンズに 20 px の余白を付けて ズーム・中央寄せする地図を表示したい。外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗MapLibre の "Get coordinates of the mouse pointer" 例と同じく、ニューヨーク [-74.5, 40]・ズーム 3 の地図で、マウスポインタの画面座標と緯度経度を リアルタイムに表示したい。ポインタ位置には十字線を描き、パンやズームで 地図が動いてもカーソル下の座標を正しく読み続ける。外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗MapLibre の "Render world copies" 例と同じく、日付変更線 [179, 0] を中心にズーム 0.01 で 世界を描き、同じ世界を左右に繰り返し表示するか 1 つだけ表示するかを切り替えたい。 切り替えは地図上のラジオボタンで行う。外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗ニューヨーク市域の maxBounds（南西 [-74.04729, 40.68393] / 北東 [-73.91059, 40.87765]）を設定し、 ドラッグやホイール操作でその範囲の外が見えないように制限した地図を表示したい。 maxBounds がビューポートより狭いときは範囲が画面を満たすズームまで引き上げる。 外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗MapLibre の "Toggle interactions" 例と同じく、ワシントン DC 周辺 [-77.04, 38.907]・ズーム 3 の 地図で、ドラッグによるパン・ホイールズーム・ダブルクリックズームを個別に有効/無効へ 切り替えたい。チェックボックスは地図上に置き、無効にした操作はカメラを動かさない。 外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗OpenGlobus の Base Layers 例のように、UI の切り替えボタン（「OSM」と「Satellite」）でベースレイヤー （標準地図スタイルと衛星写真風ダークスタイル）を瞬時に切り替えられる地図を表示したい。 ドラッグでパン、ホイールでズームでき、スタイル切り替え時も位置・ズームが保持されること。外部ライブラリなし、Canvas 2D で最速・最小で実装する。
Canvas 2D / TypeScript (型ストリップ配信)
コード 2.7 KB gzip ・ データ 30 KB gzip ・ 初回描画 6 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗OpenGlobus の「Billboards」例のように、世界主要都市（パリ、東京、ニューヨーク、シドニー、カイロ）に ビルボードマーカー（アイコンバッジ）を配置した地図を表示したい。 ドラッグでパン、ホイールで拡大縮小でき、マーカーが地理座標に固定されて追従すること。外部ライブラリなし、Canvas 2D で最速・最小で実装する。
Canvas 2D / TypeScript (型ストリップ配信)
コード 2.9 KB gzip ・ データ 30 KB gzip ・ 初回描画 10 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗OpenGlobus の "Circles on the ground" 例と同じく、東京・ニューヨーク・ロンドンを中心とする 半径 1,500 / 1,200 / 1,000 km の地面円を半透明の色で陸地の上に描き、 ドラッグとホイールで操作したい。外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗世界地図上に東京・ニューヨーク・ロンドンの3つの点を色分けして表示し、 クリックした点の名前をポップアップで出したい。ドラッグでパン、ホイールで拡大縮小でき、 外部ライブラリなし・Canvas 2D で最速・最小に実装する。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗OpenGlobus の公式例「Natural Vector Layers」のように、3D 地球儀上に世界の国境ベクター境界線および 領土ポリゴンを高精細に投影描画したい。ダークスレート調グローブとシアン発光の国境境界線を用い、 視線による裏面カリングを行いながらドラッグで回転、ホイールで拡大縮小でき、60 fps で滑らかに再描画すること。 外部ライブラリなし、Canvas 2D で最速・最小で実装する。
Canvas 2D / TypeScript (型ストリップ配信)
コード 2.7 KB gzip ・ データ 38 KB gzip ・ 初回描画 45 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗ブラウザの OPFS（Origin Private File System）に PMTiles アーカイブを配置し、 Dedicated Worker から FileSystemSyncAccessHandle で同期 Range 読み出しを行って 完全オフラインでパン・ズームできる世界地図を描画したい。
Canvas 2D + OPFS + Dedicated Worker / TypeScript (型ストリップ配信)
コード 5.5 KB gzip ・ データ 52 KB gzip ・ 初回描画 19 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗Tangram の filters-demo と同じく、サンフランシスコ湾岸の道路データを道路種別で 絞り込みながら地図に表示したい。外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗Mapzen Tangram の「highways-demo」のように、ズームレベルに応じて高速道路（ハイウェイ）の線幅や グロー効果が滑らかに変化するズーム連動道路スタイリングをダークテーマ地図上で表示したい。 ドラッグでパン、ホイールで拡大縮小できること。外部ライブラリなし、Canvas 2D で最速・最小で実装する。
Canvas 2D / TypeScript (型ストリップ配信)
コード 2.6 KB gzip ・ データ 39 KB gzip ・ 初回描画 39 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗Mapzen Tangram の road-filters-demo と同じ意図で、高速道路・幹線道路・州道の道路網を 種別チェックボックスや名称検索でリアルタイムにフィルタリング・動的再描画したい。外部ライブラリなしで。
Canvas 2D / TypeScript (型ストリップ配信)
コード 4.0 KB gzip ・ データ 55 KB gzip ・ 初回描画 15 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗Mapzen Tangram の代表的なシンプルデモのように、Tangram 特有のハイコントラストで洗練された ダークカートグラフィ（濃紺の海洋、スレートグレーの陸地、境界線ストローク）を表現した地図を表示したい。 ドラッグでパン、ホイールで拡大縮小できること。外部ライブラリなし、Canvas 2D で最速・最小で実装する。
Canvas 2D / TypeScript (型ストリップ配信)
コード 2.4 KB gzip ・ データ 30 KB gzip ・ 初回描画 7 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗C/C++ で書かれた PMTiles リーダーを WebAssembly 化し、ASYNCIFY のコード肥大化を避けて JSPI（JavaScript Promise Integration）により同期 C コードのまま HTTP Range リクエストを実行して ベクトルタイルを取得・描画したい。
WebAssembly + JSPI + Canvas 2D / C11 + TypeScript (型ストリップ配信)
コード 16.2 KB gzip ・ データ 52 KB gzip ・ 初回描画 74 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗PLATEAU 東京駅周辺 3,992 棟の 3D 建築物モデルに対し、WebGPU の Compute Shader で視錐台カリングを行い、 生存した建物を drawIndexedIndirect で一括描画する GPU-driven レンダラーを作りたい。 CPU 側からの個別 draw call 発行とカリング判定を完全に剥がし、ドラッグで視点周回できるようにする。
WebGPU / TypeScript (型ストリップ配信)
コード 6.8 KB gzip ・ データ 27 KB gzip
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗東京23区の道路線形を WebGPU で描画し、CPU 側で line tessellation / vertex expansion を行わず、 道路ノード列を storage buffer に保持して、Vertex Shader が vertex_index から前後ノードを参照して 画面空間の太線・join・cap を生成したい。
WebGPU / TypeScript (型ストリップ配信)
コード 5.9 KB gzip ・ データ 417 KB gzip
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗東京23区の OSM 全域からサンプリングした 104 万点（1,048,576 点）の点密度を WebGPU Compute Shader と Subgroups（SIMD レーン集約）を用いて GPU 上で直接 2D グリッド（512x512）に集計・平滑化し、 Turbo カラーマップのヒートマップとして 60 fps で滑らかに再描画したい。
TypeScript (erasableSyntaxOnly)
コード 5.5 KB gzip ・ データ 3614 KB gzip ・ 初回描画 183 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗（比較用）02 と同じ依頼「スマホで、世界の国を人口で塗り分けた地図をピンチで拡大して、タップした国の名前と人口を出したい」を、 汎用地図エンジン MapLibre GL JS 5.24.0 で作ったもの。
MapLibre GL JS 5.24.0 (WebGL2) / JavaScript
性能は未計測
操作する ↗