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