D3.jsでWebに地図を描くPART2【DBとの接続方法紹介！】

この記事は、Webに線画した地図とDB(データベース)を連動したいんだけど、どうしたらいいの？に答えます。

前回紹介したD3.jsを使って線画方法で、愛知県の地図の市町村名と、DB(データベース)連動をして取得した情報を線画してみます。

Contants

D3.jsでデータ連動するには？
- コーディングイメージ
- レイヤーイメージ
今回のサンプル
まとめ

D3.jsでデータ連動するには？

結論：D3.jsでデータ連動するには、JSONを返してくれるWebAPIを呼び出してテキストエリアに線画する事で可能です。

D3.JsonメソッドでWebAPIを呼び出す事で、API側でDB接続し取得したJSONデータをD3.jsによって線画します。
D3.jsで地図の場合もGeoJSON形式で記述されたJSONファイルを、ライブラリに読み込む事で地図を線画します。

その前にD3.jsってという人はこちら

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

コーディングイメージ

サンプルコード内の d3.json( [WebAPI URL] )メソッドにてWebAPIを呼び出します。
エラーでない場合にテキストに取得値を格納します。

d3.json([GeoJSONファイル名], function(error, data){
    var map = d3.selectAll(".chartcontainer").append("svg")

    //svgエリアにレイヤーを追加
    var layer1 = map.append("g");
    var layer2 = map.append("g");

    //テキストを追加
    var textAddess = layer2.append("text");

    //マウスオーバーイベントで処理
    layer1.selectAll(".lands")
      .on("mouseover", function(v,i){

      //■■ D3.jsonメソッドでWebAPI呼び出し ■■
      //--------------------------------------------------
      d3.json([WebAPI URL])
        .get(function(error, master){
 　　　　  if (error) throw error;

　　　　   //WebAPI取得後の処理記述
          textAddress.text(master["hollAddress"]);
        });   
      //-------------------------------------------------- 
    });
});

レイヤーイメージ

D3.jsでの線画時のレイヤー階層イメージは図の通り。
divタグを含め4階層を保持します。

レイヤー階層

HTML-divタグ
svg線画範囲
線画レイヤー1:地図レイヤー
線画レイヤー2:文字レイヤー

D3.jsでWebに地図を描くPART2【DBとの接続方法紹介！】―レイヤーイメージ図

地図レイヤーと文字レイヤーを分ける理由は、地図の拡大・移動時に表示文字を変化させない為に行います

今回のサンプル

前回のD3.jsで作成したサイトをカスタマイズして作成します。
別システムとの連動を考えた場合の調査ポイントを整理する。

マウスホバー：WebAPI市役所住所・電話番号を表示
マウスホバー：別エリア【SVG2】にWebAPI市役所URL表示
クリック:市町村URLをリンク表示

サンプルUI仕様イメージ

※画像をクリックする事で、サンプルページに飛びます。

WebAPI仕様

WebAPIは下記仕様で作成する。

Request URL:https://ssit.jp/api/holls/{cityName}
Method:GET
Header:name=”H-API-KEY”/value=”AUTH_API_KEY_20181203″

※{cityName}：市町村名を渡すことで市役所の住所・電話番号・公式サイトURLが取得できる。

Headerにセキュリティキー「name/value」を追加し認証を行います。

作成WebAPI:Slimフレームワークを使用

WebAPIで認証【PHP】Slimフレームワークで認証処理の追加法！この記事は、SlimフレームワークでWebAPI化したけど、認証ってどうするの？に答えます。 Slimフレームワークのミドルウェア...

WebAPI 呼び出しサンプル

WebAPI URL：

https://ssit.jp/api/holl/豊田市

WebAPI GETメソッドが正常取得できた場合のサンプルJSON。

[{
  "cityName" : "豊田市",
  "zipCode" : "〒471-0025",
  "hollAddress" : "愛知県豊田市西町３丁目６０",
  "tel" : "0565-31-1212",
  "link" : "http://www.city.toyota.aichi.jp/"
}]

※2019.1.21現在：豊田市・岡崎市・豊橋市のみ取得可能です。