【D3.js】MapboxGLの地図上にSVGをオーバーレイする。

最終更新日

Mapboxがバージョンアップされ、MapboxGL.jsライブラリが公式のクライアントライブラリとなったようです。以前のMapbox.jsはLeaflet.jsベースでD3と組み合わせやすくて気に入っていたのですが、とりあえずMapboxGLで作成した地図の上にD3.jsを使ってSVGをオーバーレイするサンプルを作ってみました。

mapboxGL & D3.js ポイントサンプル

example

MapboxGL & D3 ポリゴンサンプル

example

両方ともbl.ocksに公開しているのでサンプルコードをみたいかたはそちらを。

ポイントとなっているのは、緯度経度を地図上の座標に変換している部分で、leaflet.js上にsvgをオーバーレイするのと基本かわりません。

使うときはこんな感じ。

どんな地図クライアントライブラリでも、このような座標変換が行えるメソッドが用意されていれば、D3.jsで作成したSVGをオーバーレイすることができます。