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

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

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

Contants

GoogleMAP に線画するには？
- Google【Maps JavaScript API】とは？
- Maps JavaScript APIのAPIキー取得方法
  - APIキーの取得手順
サンプル
- Toposimplify係数によるオーバーレイ比較
- ソースのポイント
参考サイト
まとめ

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

※GCPは1年間は一定の無料枠で使用できますが、クレジットカードの登録が必要になります。

APIキーの取得手順

ざっくりとしたAPIキーの取得方法を紹介します。

APIキーの取得方法

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

サンプル

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

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

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

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

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

D3.jsでWebに地図を描く【TopoJSON作成・Toposimplify圧縮比較】この記事は、Webで地図を描きたいんだけどどうしたらいいの？D3.jsってどうなの？という疑問に答えます。 D3.jsを使って愛知...

ソースのポイント

前回の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線画部分も位置を補正します。

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);
}});