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