「X をしたいから地図を作って」という依頼ごとに作った例です。ブラウザ用の例は操作できます。表示した性能値はリポジトリのハーネスで測ったものです。 比較計測の条件 ・ GitHub
32 件
ワシントン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 ・ 設計と計測 ・ 元例 ↗
操作する ↗