GoogleMapsAPIで板橋区の市区町村に境界線をつけよう！QJIS、GeoJson、plygonを使用　大山はどこだ！？

最近板橋区のいろいろなところに出かけるのですが、板橋の面積の広さに圧倒されております。

南は南町から、舟渡２丁目まで様々な町が存在することがわかりました。

どんだけ広いのか気になり始めましたので、Googleの地図（以下GoogleMap）に板橋区を色をつけて表示してみたいと思います。

市区町村の境界値データの入手

まず地図のどこからどこまでが板橋区なのかをまとめたデータが必要です。無料で提供してくれるサイトがありますので、ダウンロードします。総務省の統計データのポータルサイトe-statです。

経済センサス　活動調査　小地域を選びます。右側もチェックボックスを産業に入れて、ダウンロードボタンを押下。

※古いデータをダウンロードすると、地図がずれて表示される問題が見つかりましたので、新しいデータを使います。

板橋区を選択して、一番右の世界測地系緯度・経度・Ｓｈａｐｅ形式をダウンロードします。

ダウンロードしたＺＩＰファイルにSHP形式ファイルがあることを確認し、取得完了です。

せっかくなので、日本全体の都道府県、市区町村の境界値を定義したファイルも取得します。esriジャパンのページに飛んで、画面真ん中のダウンロードを押します。

これで板橋区と日本全体の境界値データが揃いました。

先ほどダウンロードしたSHPファイルをGoogleMapが読み込めるGeoJson形式に変換します。ソフトにはQGISを使います。このソフトはフリーウェアですが、高機能で本当に優れたソフトです。

公式サイトからソフトェアをダウンロード、インストールをします。インストール時の設定は全てデフォルトのままで問題ないです。

QGISを起動させ、メニューバーの「レイヤ」－「レイヤ追加」－「ベクタレイヤの追加」を選んで、ダウンロードしたSHPを読み込みます。先に日本全体の方を読み込んでみます。

すると・・・

おおおお。日本の市区町村の境界値が見えたー！！！！

これは感動です。これは細かくてすごいデータです。もし日本全国の市区町村の名前を全て暗記している人がいたらすごいですね。

ここに板橋区のデータを同じ手順で読み込みます。

すると・・・おおお。はまった！！！

まるでドラクエ７の石版を設置しているような感覚です。

あとはGeoJsonファイルにエクスポートします。左のレイヤパネルから出力するレイヤを選択して、右クリックし「名前を付けて保存」をします。出力時に形式が選択できますので、GeoJsonを選択します。

これでGeoJsonファイルは完成です。

サンプルを作りました。GoogleMapsAPIのポリゴン機能を使い、地図にポリゴンを描画をします。

このサンプルHTMLでは大山の地域だけピンクでポリゴンを描画し、目立つようにしました。また、各ポリゴンのエリア内をクリックするとその町の名前が吹き出しで表示されるようにしました。ちなみに大山という文字はGeoJsonのエディタ「geojson.io」を使い、手動でポリゴンを追加しました。

これで完成です。

板橋の広さ、そして大山の場所を改めて今回知ることができました。GoogleMapsAPIを使えば簡単にできますので試してみてください。