「X をしたいから地図を作って」という依頼ごとに作った例です。ブラウザ用の例は操作できます。表示した性能値はリポジトリのハーネスで測ったものです。 比較計測の条件 ・ GitHub
22 件
自治体の観光サイトの記事に、都道府県を選ぶ日本地図を埋め込みたい。クリックやタップで選んだ都道府県で記事を絞り込む。 外部ライブラリは入れられないし、ページが重くなるのは困る。
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 を配る。ビルドなし)
性能は未計測
操作する ↗（比較用）02 と同じ依頼「スマホで、世界の国を人口で塗り分けた地図をピンチで拡大して、タップした国の名前と人口を出したい」を、 汎用地図エンジン MapLibre GL JS 5.24.0 で作ったもの。
MapLibre GL JS 5.24.0 (WebGL2) / JavaScript
性能は未計測
操作する ↗