こんにちは！SBクラウドソリューションアーキテクトのLeoです。すでに何回か記事でご紹介しているDataVですが、最近日本地図の表現について聞かれることが多くなってきました。
お使いいただける方々が増えているということで大変嬉しいです！ということで本日はDataV、マップウィジェットに日本地図や都道府県をどうやって表現していくか？というて点についてご紹介していきたいと思います。
マップウィジェットを選択する
まずはDataVのコンソールを見てみましょう。先月アップデートされUIがかなり変更されました。まだ触り慣れていない、どこが変わったのか気になる！という方は以下をご覧ください。
[embed]https://techblog.sbcloud.co.jp/2018/10/24/datav4/[/embed]
では、無地のフォーマットを使って新しくプロジェクトを作成していきましょう。地図表現の土台となるウィジェット、基本平面マップをヘッダーから選択することが第一歩となります。
ここで多くの方がお手を止められたのではないでしょうか？そうです。初期は中国の地図が中心にきています。ここはAlibaba Cloudだからこそと思っていただければ幸いです…
日本地図を表現する
しかし、やはり日本の方がお使いになる上で日本地図の表現は必須！ということでいよいよ日本の地図へと編集を加えていきます。
マップを一度クリックすると左側のメニューの「コロプレスレイヤー」が選択できるようになると思います。「エリア設定（例：都道府県に地図を区切る）」「マッピング設定（例：エリア１に北海道と名付ける）」と行ったことを編集できます。
まずエリア設定ですが、下のリンクをみてみてください。
こちらですでに作成した日本地図のGeoJsonデータです。ご覧いただける通り、緯度・経度を1セットとして日本地図の全頂点を記述したものになっています。これをエリアのデータ設定タブ（ { / } なマークのタブ）のデータソース内へ記述するだけで完了です。
続いてマッピングのサンプルデータです。同じくサンプルデータのデータ設定タブ（{ / }）の内へ記述して完了です。
最後に基本平面マップのグローバル設定で経度を135に設定すれば日本が中心にくると思います。いかがでしょうか？下のような画面になりましたでしょうか？
自作の地域を表現する
ここまで読まれた方はきっとこうお思いではないでしょうか？自分で作った地域のマップを表現したいと…ということで当記事最後はGeoJsonを自作し、DataVに反映する工程をお伝えしていきます。
GeoJsonを作る上で大変便利なサイトさんが以下にあります。
G社のマップのように拡大縮小/スライドで任意の地域へ移動し、縦型のメニューバー内五角形のアイコンをクリックします。後は区切りたいエリアの頂点となる座標をクリックしていくだけです。下は適当に囲ったものですが、自動的にエリア頂点の緯度経度によるデータが作成されることを確認できると思います。
DataV基本平面マップのフォーマットは以下の通りです。
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
経度１,
緯度１
],
[
経度２,
緯度２
],
[
経度３,
緯度３
],
[
経度４,
緯度４
]
]
]
},
"properties": {
"name": "●●"
}
}
]
}
基本的には上記フォーマットの{"type" ~ "properties"}がエリアごとに作成されていく形になります。ちなみに埼玉県のデータを作成したデータを表示した結果が以下の通りになります。
こちらの方が都道府県や23区と行ったカテゴリーごとに作っていらっしゃるので、それを使わせていただくのも効率的かとは思います。しかし、DataVのGeoJsonは20,000行を超えたあたりからマップ描画が遅くなってしまいます。上記リンクは大変細かく作りこまれているため、そのまま流用するとDataVには適さない行数の場合が多くあると思いますのでお気をつけください。
DataVで表示という点においては自作されるのが確実かとも思われます。
まとめ
いかがでしたでしょうか？今回はDataVのマップウィジェットへ日本地図・地域地図を表現する手法をご紹介しました。GeoJsonを貼り付けるだけであれば大変簡単かと思います。後は20,000行制限を超えない形でいかに表現したいマップデータを作るかという点が肝になると思います。ただ今回の点を応用していただければDataVの表現力が格段に上がりますのでぜひお試しください。