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