【D3.js】ラスター地図のパン/ズーム&移動

OpenStreetMap

TMS(Tile Map Service)から地図画像(ラスター)を取得し、SVGのimage要素として並べます。
マウスホイールでパン/ズーム、ドラッグで移動します。

サンプル

D3.jsと、d3.geo.tileプラグインを使用します。

ハイライトしている50行付近がTMSの画像を読み込んでいる部分です。ここを変更することで他のTMSから地図画像を取得することもできます。


stamen

CloudMade

カテゴリー: D3v3