GUNMA GIS GEEK

群馬県の片隅でオープンデータとデータビジュアライゼーションとGIS(地理情報システム)に戯れるエンジニアのブログ

D3v4

D3.js v4を使ってGoogle Map上にSVGをオーバーレイする。

投稿日:

概要

D3.js ver.4 を使ってGoogle Map 上にGeoJSONから生成したポリゴンを表示します。

サンプル

d3v4 GoogleMap SVG Overlay

example

ポイント

d3.geoTransform を使って地理情報(緯度経度)を、画面上の座標(ピクセル)に変換するカスタムプロジェクションを生成しています。
ver.4では、カスタムプロジェクションは必ずgeo stream形式で変換後のデータを渡すように統一されました。

最後で、4000pxを加算しているのは、svgレイヤーをcssで-4000pxほどズラして配置しているためです。

これは、マップをパン/ズームしたり動かしたりした際にオーバレイしているsvg要素が欠けてしまうのを防ぐために必要な処理です。

About Me

著者: 清水正行
所在地: 群馬県高崎市

群馬・東京間を行き来する出稼ぎエンジニア。GIS(地理情報システム)・データビジュアライゼーション・オープンデータなどについて書いてます。