d3leaflet2014051

【D3.js】 LeafletにSVGをオーバーレイする。

Leafletは、モバイルフレンドリーでインタラクティブな地図をWeb上に表示するJavaScriptライブラリです。最近、海外での存在感が高まっているような気がします。

今回は、D3で作成したsvg要素をLeaflet上にオーバーレイしてみました。
(まだ、ソースのコメントに書いたこと以上の知識がないので、サンプルコードのみで詳しい解説はありません)

サンプル

D3.jsとともにLeaflet.jsとleaflet.cssを読み込んでください。

ポイント情報を表示する

example

ポリンゴンを表示する

example

参考

D3 + Leaflet Mike Bostock氏によるチュートリアル

参考書
Leaflet Tips and Tricks

関連記事

【D3.js】Google MapにSVGをオーバーレイする(SHAPEデータ軽量化)
【D3.js】OpenLayers上にD3.jsで作成したSVGをオーバーレイ