行政区界描画map

　地図に行政区界を描画したいことが有ります。この場合、Google Maps API などを使って描画すると便利です。
　ここではそのような方法についてみてみます。　参考pdf

■ 行政区界線を描画する

　地図に行政区界線を描画する方法には以下のようなものがあります。　

Google Maps JavaScript を使って行政境界線を表示する
Google Geo Chart などを使って行政境界線を表示する
Choropleth map を leaflet などで表示する　例
Yahoo! Static Map を使って行政境界線を表示する　例

■ 行政区界データを入手する－１

　行政区界データはネット上で入手することが出来ます。その一手順は次のようになります。

行政区域界（字・町丁）データを入手する
1. 地図で見る統計（統計ＧＩＳ）の統計表検索（ダウンロード用）から
2. Step1：平成22年国勢調査（小地域）、Step2：世帯の家族類型別一般世帯数選択をチェックして、
3. 「統計表各種データダウンロードへ」をクリックし、
4. Step3：地域選択　で都道府県と市区町村を選んで「検索」をクリックすると、
5. それに該当する境界データが表示されます。
6. Step4：境界データ　の世界測地系緯度経度・Shape形式などをダウロードします。
7. その中の ***.shp や ***.gml などのファイルに境界座標データがあります。
8. そのファイルを変換ソフトを使い、次のようにして変換します。(右図)　参考
  - 変換ソフト QGIS を起動し、
  - 変換したい .shp ファイルをこの QGIS窓にドラッグします。
  - 被変換データを絞るために「レイヤー」→「属性テーブルを開く」を選択。
    注.属性テーブルの文字コードは、「レイヤ」の「プロパティ」で設定できます。
  - 属性テーブルの必要なデータを選択すると該当エリアが変色表示されるので、(右上図)
  - 「レイヤー」→「名前をつけて保存」(右上図)で、「選択部分をベクタファイルとして保存する…」で窓が開くので、(右下図)
  - 「選択地物のみ保存する」にチェックを入れて「OK」で KMLファイルとして保存します。(右下図)
9. その ***.kml ファイルは google earth を使って境界線付き地図を表示したり、加工して使ったりすることが出来ます。

■ 都道府県・市区町村界データを入手する－２

上記のように地図で見る統計（統計ＧＩＳ）の統計表検索から都道府県・市区町村界データは入手出来ます。
国土地理院のページからも入手可能　ダウンロード　区域データ
1. データ利用の前に･･･データ仕様　データの詳細　コード表
2. データ利用の準備　･･･利用者登録等の手続きが必要です
3. 利用手順例
  - ダウンロードpage →データの詳細から地域を選択し →次に進んでアンケートなどを記入して、目的の.zipファイルをダウンロードし→これを解凍して(例:N03-17_13_170101.xmlなどを)利用。
  - .shapeファイルは上記の変換ソフト (QGIS) を用いて .kmlファイルに変換できます。
ESRIジャパンからは .shapeファイルが入手出来ます
- .shapeファイルは上記の変換ソフト (QGIS) を用いて .kmlファイルに変換できます。
参考サイト　･･･白地図を作成　地図の活用
利用例(右図) ･･･ダウンロードした .geojson データを js 化して利用

■ Google Maps JavaScript API を使って表示

　行政境界データが有れば、 Google Maps JavaScript API のポリゴンやポリラインを使って、次のように行政区界を区分描画することが出来ます。

行政境界データを入手する。(***.kml や ***.gml)
行政境界データの構造
1. 出力 ***.kml には境界データが、<Polygon>･･･<coordinates>の後に、「経度,緯度　経度,緯度　･･･」の形で組み込まれています。　参考
2. 出力 ***.gml には境界データが、<gml:posList>の後に、「緯度　経度　緯度　経度･･･」の形で組み込まれています。
Google Maps JavaScript のデータとして組み込む
1. <gml:posList>の後にある「緯度, 経度」データを JavaScript のデータ行列として取り込めるように整理する。
2. Google Maps JavaScript のポリラインデータとして取り込む。
3. Google Maps API で行政境界線を表示する。例→

■ Google Charts などを使う

　Google Charts などを使って行政区界を付加した地図を表示することが出来ます。　参考

Google Charts Geo Chart を使う。　参考

　都道府県別の色付き地図などが作れます。　参考 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" > <script src="https://www.google.com/jsapi"></script> <script> google.load('visualization', '1', {packages:['geochart']}); google.setOnLoadCallback(graphChart); function graphChart() { var data = google.visualization.arrayToDataTable([ ['都道府県', '人口'], [' 東京', 1351],['神奈川', 912],['大阪', 883],['愛知', 748],['埼玉', 726],['千葉', 622],['兵庫', 553],['北海道', 538],['福岡', 510],['静岡', 370],['茨城', 291],['広島', 284],['京都', 261],['宮城', 233],['新潟', 230],['長野', 209],['岐阜', 203],['栃木', 197],['群馬', 197],['岡山', 192],['福島', 191],['三重', 181],['熊本', 178],['鹿児島', 164],['沖縄', 143],['滋賀', 141],['山口', 140],['愛媛', 138],['長崎', 137],['奈良', 136],['青森', 130],['岩手', 127],['大分', 116],['石川', 115],['山形', 112],['宮崎', 110],['富山', 106],['秋田', 102],['香川', 97],['和歌山', 96],['山梨', 83],['佐賀', 83],['福井', 78],['徳島', 75],['高知', 72],['島根', 69],['鳥取', 57] ]); var option = { colorAxis: {colors: ['#ffffff', '#ffff00', '#ff0000']}, region: 'JP', resolution: 'provinces' }; var graph = new google.visualization.GeoChart(document.getElementById('drawChart')); graph.draw(data, option); } </script> </head> <body style="background:#eeffee;"> <div id="drawChart" style="width:565px; height:350px;"></div> </body> </html>
Google Image Charts (非推奨)を使う。　参考１　参考２

<img src="https://chart.googleapis.com/chart?cht=map:fixed=32.6,131,34.8,135.9&chs=260x140&chld=JP-36|JP-37|JP-38|JP-39&chco=676767|6666ff|55ff33|ffee44|ff3344&chm=ftokushima,0000aa,0,0,10|fkagawa,00aa00,0,1,10|fehime,aaaa00,0,2,10|ftosa,aa0000,0,3,10">

■ Yaoo!地図 Static を使う　【2020/10/31より Yahoo!地図は使用中止】

　　Yaoo! 地図 Static を使って行政境界線を表示することが出来ます。

<img src="http://map.olp.yahooapis.jp/OpenLocalPlatform/V1/static?appid=【APPID】&lat=35.3337&lon=139.546&z=14&width=800&height=495&pointer=off&mode=blankmap&style=district|bm.p.13:fdd|bm.p.13103:dfd|bm.bg:acd|bm.c.city:00d|bm.b.street:f88">
      <a href="http://developer.yahoo.co.jp/about"><img src="http://i.yimg.jp/images/yjdn/yjdn_attbtn2_105_17.gif" width="105" height="17" title="Webサービス by Yahoo! JAPAN" border="0" style="margin:4px 25px 15px 0px;float:left;"></a>

■ Yaoo! 地図に上書きする　【2020/10/31より Yahoo!地図は使用中止】

　Yahoo!地図 JavaScript を使って行政境界線を重ね書きした地図を作ることが出来ます。→　参考

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="Content-Script-Type" content="text/javascript">
  <title>Yahoo!地図 - 字界付き</title>
  <script src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=【APPID】" type="text/javascript"  charset="UTF-8" ></script>
    <script>
      <!--
        window.onload = function() {
          var map = new Y.Map("ymap");
          map.drawMap(new Y.LatLng(35.328776,139.545577),15,Y.LayerSetId.NORMAL);
          map.addControl(new Y.LayerSetControl());
          map.addControl(new Y.ZoomControl());
          var layer = new Y.BlankMapLayer(); //下記白地図を重ねる
          layer.setStyle({             // レイヤの詳細を記述
            "area" : {                 // 各領域の色を指定
                    "default" : "eff"  // 指定外を#eff色で塗る
                   ,"14" : "off"       // 神奈川県を透過色(off)に
            },
            "label" : {                // ラベルの色を指定
                    "default" : "2d2"  // 全ラベルの色を#2d2にする
                   ,"city" : "22d"     // 市町村の色を#22dにする
                   ,"street" : "d22"   // 丁字界の色を#d22にする
            },
            "border" : {               // 境界線の色を指定
                    "default" : "2d2"  // 全境界線の色を#2d2にする
                   ,"city" : "22d"     // 市町村の色を#22dにする
                   ,"street" : "d22"   // 丁字界の色を#d22にする
            },
            "bg" : "off"               // 背景を透明色に指定
          });
          map.addLayer(layer);
        }
      //-->
    </script>
    <style>
      body{ background:url(../../img/p_bcg007.gif); }
      #link{ position:absolute; top:8px; left:10px; }
      section{ width:900px; height:700px; margin:0 auto; }
      #ymap{ width:100%; height:87%; }
    </style>
</head>
<body>
  <div id="link"><a href="../ex-ymap1.html">Ymap1</a></div>
  <section>
    <h3 style="text-align:center;">【Yahoo!地図 - 字界付き】</h3>
    <div id="ymap"></div>
    <!-- Begin Yahoo! JAPAN Web Services Attribution Snippet -->
    <a href="http://developer.yahoo.co.jp/about">
      <img src="http://i.yimg.jp/images/yjdn/yjdn_attbtn2_105_17.gif" width="105" height="17" title="Webサービス by Yahoo! JAPAN" alt="Webサービス by Yahoo! JAPAN" border="0" style="margin:15px 15px 15px 15px"></a>
    <!-- End Yahoo! JAPAN Web Services Attribution Snippet -->
  </section>
</body>
</html>

■ 参考サイト

KMLファイル

KMLの基本　 KML Reference　地点表示　 KMLとGPX　市町村に色を

QGIS

操作マニュアル　使い方　クリップの使い方　市区町村行政区域　 kmlに変換　 QGIS３

Google Chart

Google GeoChart　ビジュアル化　 CjangeLog　 Map Chart　 R1-Mapps

leaflet

日本白地図　日本酒生産量　

Yahoo!地図 static

白地図を表示　あれこれ【2020/10/31より Yahoo!地図は使用中止】

country codes

ISO 3166-2:JP　国名コード　市区町村コード

地図データ

国土数値情報　地図蔵　 CSVへ変換　地図を描く　色塗り地図　市区町村界

区界地図を描く

自治体色別　地図色分け　 Fusion Tables　行政区域map　市区町村界　街区図　

その他

VectorMapMaker　行政区域　 Japan Map　 Jmap jQuery plugin　小選挙区図