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

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

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

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

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

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

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

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

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

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

コーディングイメージ

サンプルコード内の 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階層を保持します。

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

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

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

今回のサンプル

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

ポイントは3つ

  • SVG1の地図をマウスホバー:WebAPI市役所住所・電話番号を表示
  • SVG1の地図をマウスホバー:別エリア【SVG2】にWebAPI市役所URL表示
  • SVG1の地図をクリックした時、市町村URLをリンク表示

サンプルUI仕様イメージ

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

D3.jsでWebに地図を描くPART2【DBとの接続方法紹介!】―サンプル仕様イメージ図

WebAPI仕様

WebAPIは下記仕様で作成する。
{cityName}:市町村名を渡すことで市役所の住所・電話番号・公式サイトURLが取得できる。

  • Request URL:https://ssit.jp/api/holls/{cityName}
  • Method:GET
  • Header:name=”H-API-KEY”/value=”AUTH_API_KEY_20181203″
Headerにセキュリティキー「name/value」を追加し認証を行います。

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

WebAPIで認証【PHP】Slimフレームワークで認証処理の追加法!
PHPでのWebAPIに認証方法を公開!PHPのSlimフレームワークでAPIKEY認証処理に関する解説とサンプルを公開します。
READ MORE..

WebAPI 呼び出しサンプル

WebAPI URL:

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

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

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


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

動作イメージ

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

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

まとめ

D3.jsとDB連動はWebAPI設計が勘所です。

コーディングは既にサンプルも多く、別サービスで開発されているWebAPIとの連携も可能で拡張の幅が広がります。

WebAPI側はまだ次回紹介したいと思います。

Webで地図を描く選択肢にD3.jsはオススメです!

2019.1.22:サンプルページを変更しました。

Follow me!