「X をしたいから地図を作って」という依頼ごとに作った例です。ブラウザ用の例は操作できます。表示した性能値はリポジトリのハーネスで測ったものです。 比較計測の条件 ・ GitHub
87 件
自治体の観光サイトの記事に、都道府県を選ぶ日本地図を埋め込みたい。クリックやタップで選んだ都道府県で記事を絞り込む。 外部ライブラリは入れられないし、ページが重くなるのは困る。
Canvas 2D (Path2D と isPointInPath) / TypeScript (ブラウザには型を除いた ES modules を配る。ビルドなし)
コード 1.0 KB gzip ・ データ 4 KB gzip ・ 初回描画 150 ms
操作する ↗日本地図を使って、示された都道府県の場所を順に当てるクイズを遊びたい。
Canvas 2D と Path2D / TypeScript
性能は未計測
操作する ↗日本の都道府県名を入力すると、その位置を地図上で見つけたい。
Canvas 2D と Path2D / TypeScript
性能は未計測
操作する ↗z.yuiseki.net に置いた国土地理院の全国最新写真（シームレス）を、ブラウザで移動・拡大しながら見たい。 約715 GiB（約768 GB）の PMTiles 全体はダウンロードせず、画面に必要な写真だけを読む。
Canvas 2D、Fetch Range、DecompressionStream / TypeScript
性能は未計測
操作する ↗Hugging Face の Kontur Population 2023-11-01 22km データセットを H3 で可視化したい。
Canvas 2D と Path2D / TypeScript
性能は未計測
操作する ↗UCDP GED の公開データを地図で見たい。出来事が起きた場所を年ごとに追い、暴力の分類と死者数を確認したい。
Canvas 2D と Path2D / TypeScript
性能は未計測
操作する ↗z.yuiseki.net の OpenStreetMap 全球 PMTiles を、特定レイヤーだけに特化した簡易スタイルで高速に表示したい。
Canvas 2D、Fetch、DecompressionStream / TypeScript
性能は未計測
操作する ↗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 ・ 設計と計測 ・ 元例 ↗
操作する ↗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 ・ 設計と計測 ・ 元例 ↗
操作する ↗米国の郡（county）間の人口移動（ネットの東西方向）上位1,500組を、直線の LineLayer として地図上に描きたい。 東向きと西向きで色を分け、ドラッグでパン、ホイールで拡大縮小できるようにする。 外部ライブラリなし・Canvas 2D で最速・最小に実装する。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗deck.gl の ScatterplotLayer と同じ意図で、マンハッタンの 13,987 点を重みに応じた 半径と色の点で描き、パン・ズームで追従させたい。WebGL を使わず外部ライブラリなしで。
Canvas 2D / TypeScript (型ストリップ配信)
コード 2.5 KB gzip ・ データ 75 KB gzip ・ 初回描画 23 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗forge3d の例「Mount Fuji Labels」のように、富士山の地形を 3D で表示し、山頂と登山道の五合目・各合目・ 麓の地名をラベルで載せたい。ドラッグで回り、ホイールで寄れるようにし、山の向こう側に隠れた地名や、 重なってしまう地名は出さない。外部ライブラリなしで、最速・最小に。
WebGL2 (地形) と Canvas 2D (ラベル) / 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 のギャラリー例「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 ・ 設計と計測 ・ 元例 ↗
操作する ↗ロンドン中心部（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 ・ 設計と計測 ・ 元例 ↗
操作する ↗