「X をしたいから地図を作って」という依頼ごとに作った例です。ブラウザ用の例は操作できます。表示した性能値はリポジトリのハーネスで測ったものです。 比較計測の条件 ・ GitHub
4 件
Tangram の filters-demo と同じく、サンフランシスコ湾岸の道路データを道路種別で 絞り込みながら地図に表示したい。外部ライブラリなしで、最速・最小で。
Canvas 2D / TypeScript (型ストリップ配信)
性能は未計測
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗Mapzen Tangram の「highways-demo」のように、ズームレベルに応じて高速道路（ハイウェイ）の線幅や グロー効果が滑らかに変化するズーム連動道路スタイリングをダークテーマ地図上で表示したい。 ドラッグでパン、ホイールで拡大縮小できること。外部ライブラリなし、Canvas 2D で最速・最小で実装する。
Canvas 2D / TypeScript (型ストリップ配信)
コード 2.6 KB gzip ・ データ 39 KB gzip ・ 初回描画 39 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗Mapzen Tangram の road-filters-demo と同じ意図で、高速道路・幹線道路・州道の道路網を 種別チェックボックスや名称検索でリアルタイムにフィルタリング・動的再描画したい。外部ライブラリなしで。
Canvas 2D / TypeScript (型ストリップ配信)
コード 4.0 KB gzip ・ データ 55 KB gzip ・ 初回描画 15 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗Mapzen Tangram の代表的なシンプルデモのように、Tangram 特有のハイコントラストで洗練された ダークカートグラフィ（濃紺の海洋、スレートグレーの陸地、境界線ストローク）を表現した地図を表示したい。 ドラッグでパン、ホイールで拡大縮小できること。外部ライブラリなし、Canvas 2D で最速・最小で実装する。
Canvas 2D / TypeScript (型ストリップ配信)
コード 2.4 KB gzip ・ データ 30 KB gzip ・ 初回描画 7 ms
ソース ・ spec.yaml ・ 設計と計測 ・ 元例 ↗
操作する ↗