D3.jsでGoogleMAPにオーバーレイする【Toposimplify圧縮比較】

D3.jsでGoogleMAPにオーバーレイする【Toposimplify圧縮比較】

この記事は、せっかくある地図情報をGoogleMAPにオーバーレイしたいけどどうすの?に答えます。

以前紹介したD3.jsを使って、【Webに地図を線画する】で使用した愛知県地図のTopoJSONデータを、GoogleMAP上にオーバーレイ(透かし線画)してみます。

GoogleMAP に線画するには?

GoogleMAPデータ取得し、D3.jsライブラリでGoogleMAP情報と、TopoJSON地図情報を重ね合わせします。
GoogleMAPデータは、Google【Maps JavaScript API】にて取得します。

Google【Maps JavaScript API】とは?

Google社が提供する17種あるMAP系APIで、Webサイト等からJavascript経由で地図を線画する為のAPI。

GCP(Google Cloud Platform)プログラムに登録をして、呼び出し時のAPIキーを取得する必要があります。

GCP(Google Cloud Platform):Googleが運営しているクラウドコンピューティングのプラットフォーム

Maps JavaScript APIのAPIキー取得方法

GoogleMAPをWebページ上に表示する為に、Javascriptライブラリを呼び出します。呼び出し時にAPIキーが必要です。

GoogleMAPライブラリの呼び出し方法

<script src="//maps.googleapis.com/maps/api/js?key=*******"></script>

※GCPダッシュボードにおけるAPI有効状態
D3.jsでGoogleMAPにオーバーレイする【Toposimplify圧縮比較】-Maps JavaScript API

APIキーの取得手順

ざっくりとしたAPIキーの取得方法を紹介します。
※GCPは1年間は一定の無料枠で使用できますが、クレジットカードの登録が必要になります。

  1. Googleアカウントの用意
  2. GCPの申請
  3. プロジェクトの作成
  4. APIの有効化
  5. 認証情報(APIキー)の作成

サンプル

今回は下記のようなサンプルを作成します。

D3.jsでGoogleMAPにオーバーレイする【Toposimplify圧縮比較】-Maps JavaScript APIサンプルサイト

Toposimplify係数によるオーバーレイ比較

TopoJSONの圧縮係数によるオーバーレイの画像比較をしてみます。
GeoJSONファイルからシンプルにTopoJSONへ変換しただけのデータもGoogleMAPとのずれがあることがわかります。

※「三河大島」の拡大比較なので、誤差とみるかどうかは利用シーンによると思います。
D3.jsでGoogleMAPにオーバーレイする【Toposimplify圧縮比較】-圧縮比較による地図の変化

Toposimplify係数の圧縮比較記事はこちら

D3.jsでWebに地図を描く【TopoJSON作成・Toposimplify圧縮比較】
Webに地図を描くにはD3.jsがおすすめ。D3.jsで使用するJSONファイルの作成方法及び快適に使用する為にファイル圧縮を行うToposimplifyコマンドによる画像劣化の検
READ MORE..

ソースのポイント

前回のTopoJSON線画とは異なり、いくつかのポイントがあります。

GoogleMAPの線画時には中心位置情報を指定する

var map = new google.maps.Map(document.getElementById('chartA'), {
        zoom:9,
        mapTypeId:google.maps.MapTypeId.ROADMAP,
        center:new google.maps.LatLng(35.0,137.2),
});

レイヤーのデータの渡し方

.Dataプロパティにデータを渡します。

  • GeoJSON:読み込んだJSONファイル
  • TopoJSON:GeoJSONへの変換値(topojson.featureメソッドに渡す)
aichilayer.selectAll("path")
    .data(topojson.feature(json,json.objects["23"]).features)

※objects[“23”]は、TopoJSON変換時に指定するオブジェクト名

レイヤ―座標の考え方

GoogleMAPが、中心点を(0,0)と判断しているようなので、svgレイヤー及びmap線画部分も位置を補正します。

D3.jsでGoogleMAPにオーバーレイする【Toposimplify圧縮比較】-Maps JavaScript APIサンプルサイト

svgレイヤーのサイズスタイル

.SvgOverlay svg {
    position: absolute;
    top: -4000px;
    left: -4000px;
    width: 8000px;
    height: 8000px;
}

mapポイントの座標指定部分

//Google Projection作成
var googleMapProjection = d3.geoTransform({point:function(x, y) {
    d = new google.maps.LatLng(y, x);
    d = overlayProjection.fromLatLngToDivPixel(d);
    // MAPとの線画位置指定
    this.stream.point(d.x + 4000, d.y + 4000);
}});

参考サイト

作成にあたり、下記の記事を参考にさせて頂きました。

大変ありがとうございます。ぜひこちらの記事も見てください!

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

まとめ

D3,jsとTopoJSONデータのシンプルな線画とは異なり、GoogleMAPレイヤーが加わる事で使用イメージが変わりました。

みんな大好きGoogleMAPとのレイヤー構成になるので、見やすくなります。

GCPの申請がひと手間ですが、利用シーンは増えるような気がします。

D3.jsは優秀なライブラリです。

Follow me!