Leafletで地図を作ろう － (都道府県別人口統計マップ)

-
1.都道府県別人口統計マップ

作品例として、都道府県別人口統計マップを作成します。この題材はベース地図タイル上に都道府県別の人口統計人数をレンジ(10段階)に 設定した範囲に応じた都道府県境界を設定した色にて塗りつぶし色分けして表示します。ソースコードの大部分は、すでに公開している 「気象庁震度観測点マップ」からの流用です。内容が重複するので「気象庁震度観測点マップ」で説明していない追加、変更部分のみを中心に 説明していきます。

都道府県別の色分け描画部分のソースコードは、下記のサイト様のサンプルコードより借用させて頂きました。
マップポリゴンデータ (var prefs)は、下記のサイト様より入手したものを利用させて頂きました。

2.ソースコードの説明

都道府県人口統計マップのメインとなる(demographics.html)コードです。各実装部品の定義ファイル類は外部ファイルとしています。 leaflet.css、all.css、demogra.css、leaflet.js、SlideMenu.js、jsframe.js、demographics.js、pospop.js、prefs.jsライブラリ等をヘッダー部分に指定しています。

demogra.css、demographics.js、pospop.jsは筆者が作成したものです。尚、マップポリゴンデータ(geoJSONデータ)は上記で入手したものをprefs.jsとしました。

DEMO 

   //***** テキスト時計 *****
   function clock() {
       var twoDigit =function(num){
      　   var digit;
           if( num < 10 )
               { digit = "0" + num; }
           else { digit = num; }
           return digit;
   }
        var now = new Date();
        var hour = twoDigit(now.getHours());
        var minute = twoDigit(now.getMinutes());
        var second = twoDigit(now.getSeconds());
        document.getElementById("c_time").textContent = hour + ":" + minute + ":" + second;
   }
   setInterval(clock, 1000);

   //***** 人口統計グラフ *****
   function popupwin() {
        const jsFrame = new JSFrame();
        const frame = jsFrame.create({
            name: 'gp-window',
            title: '人口統計グラフ',
            left:50, top: 10, width: 730, height: 560,
            resizable: false,
            appearanceName: 'redstone',
            style: {
                backgroundColor: 'rgba(255,255,255,1.0)',
                overflow: 'hidden'
            },
            html: '<center><img src="./image/jinkou.png" border=0 align="absmiddle" width=730 height=520></center>'
        });
        //指定したボタンを非表示にする (mini,max,zoom)
        frame.hideFrameComponent('minimizeButton');
        frame.hideFrameComponent('maximizeButton');
        frame.hideFrameComponent('zoomButton');
        frame.show();
        frame.requestFocus();
    }

    // ****** 背景色変更 ******
    var obj,evobj;
    function bgrecover(bg) { evobj.style.backgroundColor=bg; }
    function setColor(obj,col) { obj.style.backgroundColor = col; }
    function ResetColor(obj,col) { obj.style.backgroundColor = col; }

    // ****** 'table' , 'tr'タグ部分を避ける制御  *****
    function cellbgcolor(bg) {
        evobj=event.srcElement;
        if(evobj.tagName=="TABLE") {
           return
        }
        while(evobj.tagName!="TR") {
              evobj=evobj.parentElement;
        }
        evobj.style.backgroundColor=bg;
    }

    // ****** 別のHTMLに切替 (target="_blank") ******
    function JumpURL(URL) {
        window.open(URL,'_blank',"directories=no,location=yes,menubar=yes,resizable=yes,scrollbars=yes,status=yes,toolbar=yes");
    }

    //*****  2019年人口統計 (都道府県番号 : 値) *****
    var valueMap = {
      1:525,2:125,3:123,4:230,5:97,6:108,
      7:185,8:287,9:194,10:194,11:734,12:628,
     13:1394,14:920,15:222,16:104,17:114,18:77,
     19:81,20:205,21:199,22:364,23:755,24:178,
     25:141,26:258,27:882,28:546,29:133,30:92,
     31:55,32:67,33:189,34:281,35:136,36:73,
     37:96,38:134,39:70,40:511,41:81,42:133,
     43:175,44:113,45:107,46:160,47:145
  };
    //***** 色定義 *****
    var colorDefs = [
      { min:  900, max: null, color: '#ff5722' },
      { min:  800, max:  899, color: '#ff6a3d' },
      { min:  700, max:  799, color: '#ff9800' },
      { min:  600, max:  699, color: '#ffa51f' },
      { min:  500, max:  599, color: '#ffc107' },
      { min:  400, max:  499, color: '#ffc824' },
      { min:  300, max:  399, color: '#4caf50' },
      { min:  200, max:  299, color: '#cddc39' },
      { min:  100, max:  199, color: '#68cefd' },
      { min: null, max:  99, color: '#03a9f4' }
  ];
    //***** 色を取得する関数 *****
    var color = function(prefCode) {
         var value = valueMap[prefCode];
         var colorDef = null;
         for (var i = 0; i < colorDefs.length; i++) {
                colorDef = colorDefs[i];
                var minOK = (colorDef.min == null || colorDef.min <= value);
                var maxOK = (colorDef.max == null || value <= colorDef.max);
                if (minOK && maxOK) return colorDef.color;
        }
         return colorDef.color;
  };

  //***** 都道府県名配列 *****
  //***** SlideMenu *****
   var selbox= [
       { val:"",name:"都道府県名"},{val:"0",name:"01.北海道 (ほっかいどう)"},{val:"1",name:"02.青森県 (あおもりけん)"},{val:"2",name:"03.岩手県 (いわてけん)"},
       { val:"3",name:"04.宮城県 (みやぎけん)"},{val:"4",name:"05.秋田県 (あきたけん)"},{val:"5",name:"06.山形県 (やまがたけん)"},{val:"6",name:"07.福島県 (ふくしまけん)"},
       { val:"7",name:"08.茨城県 (いばらきけん)"},{val:"8",name:"09.栃木県 (とちぎけん)"},{val:"9",name:"10.群馬県 (ぐんまけん)"},{val:"10",name:"11.埼玉県 (さいたまけん)"},
       { val:"11",name:"12.千葉県 (ちばけん)"},{val:"12",name:"13.東京都 (とうきょうと)"},{val:"13",name:"14.神奈川県 (かながわけん)"},{val:"14",name:"15.山梨県 (やまなしけん)"},
       { val:"15",name:"16.長野県 (ながのけん)"},{val:"16",name:"17.新潟県 (にいがたけん)"},{val:"17",name:"18.富山県 (とやまけん)"},{val:"18",name:"19.石川県 (いしかわけん)"},
       { val:"19",name:"20.福井県 (ふくいけん)"},{val:"20",name:"21.岐阜県 (ぎふけん)"},{val:"21",name:"22.静岡県 (しずおかけん)"},{val:"22",name:"23.愛知県 (あいちけん)"},
       { val:"23",name:"24.三重県 (みえけん)"},{val:"24",name:"25.滋賀県 (しがけん)"},{val:"25",name:"26.京都府 (きょうとふ)"},{val:"26",name:"27.大阪府 (おおさかふ)'"},
       { val:"27",name:"28.兵庫県 (ひょうごけん)"},{val:"28",name:"29.奈良県 (ならけん)"},{val:"29",name:"30.和歌山県 (わかやまけん)"},{val:"30",name:"31.鳥取県 (とっとりけん)'"},
       { val:"31",name:"32.島根県 (しまねけん)"},{val:"32",name:"33.岡山県 (おかやまけん)"},{val:"33",name:"34.広島県 (ひろしまけん)"},{val:"34",name:"35.山口県 (やまぐちけん)'"},
       { val:"35",name:"36.徳島県 (とくしまけん)"},{val:"36",name:"37.香川県 (かがわけん)"},{val:"37",name:"38.愛媛県 (えひめけん)"},{val:"38",name:"39.高知県 (こうちけん)'"},
       { val:"39",name:"40.福岡県 (ふくおかけん)"},{val:"40",name:"41.佐賀県 (さがけん)"},{val:"41",name:"42.長崎県 (ながさきけん)"},{val:"42",name:"43.熊本県 (くまもとけん)'"},
       { val:"43",name:"44.大分県 (おおいたけん)"},{val:"44",name:"45.宮崎県 (みやざきけん)"},{val:"45",name:"46.鹿児島県 (かごしまけん)"},{val:"46",name:"47.沖縄県 (おきなわけん)'"}
   ];

  //***** 簡易マイ・メニュー定義( SlideMenu) *****
  var SlideMenu_ma = [
       { title: 'e-Stat(政府統計の総合窓口)', url: 'https://www.e-stat.go.jp/',img: '"./image/ball3.png" width=8 height=8 align="absmiddle"' },
       { title: '統計ダッシュボード',url: 'https://dashboard.e-stat.go.jp/',img: '"./image/ball3.png" width=8 height=8 align="absmiddle"' },
       { title: '政府CIOポータル',url: 'https://cio.go.jp/policy-opendata',img: '"./image/ball3.png" width=8 height=8 align="absmiddle"' },
       { title: 'DATA.GO.JP',url: 'https://www.data.go.jp/',img: '"./image/ball3.png" width=8 height=8 align="absmiddle"' },
       { title: '総務省統計局', url: 'https://www.stat.go.jp/index.html',img: '"./image/ball3.png" width=8 height=8 align="absmiddle"' }
   ];

  var SlideMenu_mb = [
      { title: '都道府県庁所在地一覧', url: './html/prefsheet.html',img: '"./image/ball5.png" width=8 height=8 align="absmiddle"' },
      { title: '自治体所在地 (北海道地方)', url: './html/prefsheet01.html',img: '"./image/ball5.png" width=8 height=8 align="absmiddle"' },
      { title: '自治体所在地 (東北地方)', url: './html/prefsheet02.html',img: '"./image/ball5.png" width=8 height=8 align="absmiddle"' },
      { title: '自治体所在地 (関東・甲信地方)', url: './html/prefsheet03.html',img: '"./image/ball5.png" width=8 height=8 align="absmiddle"' },
      { title: '自治体所在地 (北陸地方)', url: './html/prefsheet04.html',img: '"./image/ball5.png" width=8 height=8 align="absmiddle"' },
      { title: '自治体所在地 (東海地方)', url: './html/prefsheet05.html',img: '"./image/ball5.png" width=8 height=8 align="absmiddle"' },
      { title: '自治体所在地 (関西地方)', url: './html/prefsheet06.html',img: '"./image/ball5.png" width=8 height=8 align="absmiddle"' },
      { title: '自治体所在地 (中国地方)', url: './html/prefsheet07.html',img: '"./image/ball5.png" width=8 height=8 align="absmiddle"' },
      { title: '自治体所在地 (四国地方)', url: './html/prefsheet08.html',img: '"./image/ball5.png" width=8 height=8 align="absmiddle"' },
      { title: '自治体所在地 (九州地方)', url: './html/prefsheet09.html',img: '"./image/ball5.png" width=8 height=8 align="absmiddle"' },
      { title: '自治体所在地 (沖縄地方)', url: './html/prefsheet10.html',img: '"./image/ball5.png" width=8 height=8 align="absmiddle"' }
   ];

  var SlideMenu_mc = [
      { title: '都道府県 - Wikipedia', url: 'https://ja.wikipedia.org/wiki/%E9%83%BD%E9%81%93%E5%BA%9C%E7%9C%8C',img: '"./image/ball4.png" width=8 height=8 align="absmiddle"' }
   ];

a           { font-size: 11px;text-decoration:none; color:#003399;font-family:Meiryo UI; }
a:link      { color:#003399; }
a:hover     { color:#003399; }
a:visited   { color:#003399; }
body        { font-size: 11px;font-family:Meiryo; }
.ifstyle {
            border-left: 0px solid #ffffff;
            border-right: 0px solid #ffffff;
            border-top: 0px solid #ffffff;
            border-bottom: 0px solid #ffffff;
}
.info {
            padding: 10px 10px; 
            font-color: #333333;
            background: white;
            border-radius: 3px;
} 
.legend-item {
            display: flex;
            width: 165px;
            align-items: center;
            color: #555;
}
.legend-item-color {
            display: block;
            width: 15px; 
            height: 15px;
            margin-right: 5px; 
}
.clock-info {
            display: block;
            width: 166px;
            height: 48px;
            padding-left: 20px;
            margin-top: 1px;
            margin-bottom: 1px;
            background: #ff9907;
}
b        {  font-family : Meiryo UI;
            font-size:30px;
            font-weight:bold;
            color : #ffffff;
}
.cstm-slidmenu-header {
            display: block;
            margin: 0;
            font-size: 14px;
            font-weight: bold;
            width: 180px;
            color: #ffffff;
            text-align : center;
}
.menustr {
            font-size: 11px;
            font-family: Meiryo UI;
            padding-left: 6px;
            color: #ffffff;
            cursor: pointer;
}
.combinfo-set {
            font-size: 11px;
            font-family:Meiryo;
            color: #000000;
            width: 180px;
            height: 20px;
            margin-top: 1px;
            margin-bottom: 1px;
            background: #fefcc8;
            cursor: pointer;
}

2-1.スライドメニューコントロールの追加

スライドメニューコントロールについては、「気象庁震度観測点マップ」で説明していますので、詳細は割愛します。変更点としては、 都道府県を選択してポップアップと連携させている点です。スライドメニュー内にコンボボックスを追加しています。 demographics.js内に定義している都道府県名配列を読み込みコンボボックスに展開します。先頭行は都道府県名の表題部分としているため、 選択できないようにしています。都道府県名が選択されると、selText(obj)関数に選択インデックスを代入して該当のポップアップを表示します。 

      //***** Slide Menu Content html *****
      var header1  = '<span class="cstm-slidmenu-header" style=" background-color: #0033aa">都道府県を選択</span>';
      var contents1  = '<select class="combinfo-set" name="select" onchange="selText(this);">';
          for(var i=0;i<selbox.length;i++){
                if (i==0) {
                    contents1 += '<option disabled selected value=' + selbox[i].val + '>' + selbox[i].name + '</option>';
                    }else{
                    contents1 += '<option  value=' + selbox[i].val + '>' + selbox[i].name + '</option>';
                }
          }
          contents1 += '</select>';
          
          ～ 以下省略 ～
          
          

  //***** 都道府県名配列 *****
  //***** SlideMenu *****
   var selbox= [
       { val:"",name:"都道府県名"},{val:"0",name:"01.北海道 (ほっかいどう)"},{val:"1",name:"02.青森県 (あおもりけん)"},{val:"2",name:"03.岩手県 (いわてけん)"},
       { val:"3",name:"04.宮城県 (みやぎけん)"},{val:"4",name:"05.秋田県 (あきたけん)"},{val:"5",name:"06.山形県 (やまがたけん)"},{val:"6",name:"07.福島県 (ふくしまけん)"},
       { val:"7",name:"08.茨城県 (いばらきけん)"},{val:"8",name:"09.栃木県 (とちぎけん)"},{val:"9",name:"10.群馬県 (ぐんまけん)"},{val:"10",name:"11.埼玉県 (さいたまけん)"},
       { val:"11",name:"12.千葉県 (ちばけん)"},{val:"12",name:"13.東京都 (とうきょうと)"},{val:"13",name:"14.神奈川県 (かながわけん)"},{val:"14",name:"15.山梨県 (やまなしけん)"},
       { val:"15",name:"16.長野県 (ながのけん)"},{val:"16",name:"17.新潟県 (にいがたけん)"},{val:"17",name:"18.富山県 (とやまけん)"},{val:"18",name:"19.石川県 (いしかわけん)"},
       { val:"19",name:"20.福井県 (ふくいけん)"},{val:"20",name:"21.岐阜県 (ぎふけん)"},{val:"21",name:"22.静岡県 (しずおかけん)"},{val:"22",name:"23.愛知県 (あいちけん)"},
       { val:"23",name:"24.三重県 (みえけん)"},{val:"24",name:"25.滋賀県 (しがけん)"},{val:"25",name:"26.京都府 (きょうとふ)"},{val:"26",name:"27.大阪府 (おおさかふ)'"},
       { val:"27",name:"28.兵庫県 (ひょうごけん)"},{val:"28",name:"29.奈良県 (ならけん)"},{val:"29",name:"30.和歌山県 (わかやまけん)"},{val:"30",name:"31.鳥取県 (とっとりけん)'"},
       { val:"31",name:"32.島根県 (しまねけん)"},{val:"32",name:"33.岡山県 (おかやまけん)"},{val:"33",name:"34.広島県 (ひろしまけん)"},{val:"34",name:"35.山口県 (やまぐちけん)'"},
       { val:"35",name:"36.徳島県 (とくしまけん)"},{val:"36",name:"37.香川県 (かがわけん)"},{val:"37",name:"38.愛媛県 (えひめけん)"},{val:"38",name:"39.高知県 (こうちけん)'"},
       { val:"39",name:"40.福岡県 (ふくおかけん)"},{val:"40",name:"41.佐賀県 (さがけん)"},{val:"41",name:"42.長崎県 (ながさきけん)"},{val:"42",name:"43.熊本県 (くまもとけん)'"},
       { val:"43",name:"44.大分県 (おおいたけん)"},{val:"44",name:"45.宮崎県 (みやざきけん)"},{val:"45",name:"46.鹿児島県 (かごしまけん)"},{val:"46",name:"47.沖縄県 (おきなわけん)'"}
   ];

     //***** コンボボックスの都道府県名を選択するとポップアップ *****
     function selText(obj){
         var idx = obj.selectedIndex;
         var value = obj.options[idx].value;
         markers[value].openPopup();
     }

2-2.凡例の追加

都道府県別の人口を10段階にレンジ分けした凡例を作成します。単位は万人です。demographics.js内に定義している色定義の最小値、最大値、色コードを 読み込み、色コード別に最小値と最大値のレンジ分けした凡例を作成しています。 

      //***** 凡例を右下に追加(1) *****
      var legend = L.control({position: 'bottomright'});
      legend.onAdd = function (map) {
          var div = L.DomUtil.create('div', 'info legend');
          var labels = [];
          for (var i = 0; i < colorDefs.length; i++) {
              var colorDef = colorDefs[i];
              var text = '';
              if (colorDef.min != null && colorDef.max != null) {
                  text = colorDef.min + ' ～ ' + colorDef.max;
              }
              else if (colorDef.max != null) {
                  text = '       ～   ' + colorDef.max;
              }
              else if (colorDef.min != null) {
                  text = colorDef.min + ' ～';
              }
              labels.push('<span class="legend-item"><span class="legend-item-color" style="background:' + colorDef.color + '"></span> ' + text + '</span>');
          }
          div.innerHTML = labels.join('');
          return div;
      };
      legend.addTo(map);

    //***** 色定義 *****
    var colorDefs = [
      { min:  900, max: null, color: '#ff5722' },
      { min:  800, max:  899, color: '#ff6a3d' },
      { min:  700, max:  799, color: '#ff9800' },
      { min:  600, max:  699, color: '#ffa51f' },
      { min:  500, max:  599, color: '#ffc107' },
      { min:  400, max:  499, color: '#ffc824' },
      { min:  300, max:  399, color: '#4caf50' },
      { min:  200, max:  299, color: '#cddc39' },
      { min:  100, max:  199, color: '#68cefd' },
      { min: null, max:  99, color: '#03a9f4' }
  ];

2-3.都道府県のエリアをポリゴンで描画

都道府県のエリアをポリゴンで描画します。demographics.js内の色を取得する関数にて、2019年人口統計 (都道府県番号 : 値) valueMapの 都道府県番号と値(人口)を代入してレンジ分けした範囲に値が一致したら、色定義のカラーコードを取得して返します。 prefs.jsのgeoJSON形式のデータを読み込み、取得したカラーコードで都道府県のエリアをポリゴンで描画します。人口統計のマップグラフとして可視化されます。 

      //***** 都道府県のエリアをポリゴンで描画 *****
      L.geoJSON(prefs, {
          style: function(feature) {
              return {
                  weight: 1,
                  opacity: 1,
                  color: 'white',
                  dashArray: '3',
                  fillOpacity: 1,
                  fillColor: color( feature.properties.prefectures_code )
              };
          }
      }).addTo(map);

    //*****  2019年人口統計 (都道府県番号 : 値) *****
    var valueMap = {
      1:525,2:125,3:123,4:230,5:97,6:108,
      7:185,8:287,9:194,10:194,11:734,12:628,
     13:1394,14:920,15:222,16:104,17:114,18:77,
     19:81,20:205,21:199,22:364,23:755,24:178,
     25:141,26:258,27:882,28:546,29:133,30:92,
     31:55,32:67,33:189,34:281,35:136,36:73,
     37:96,38:134,39:70,40:511,41:81,42:133,
     43:175,44:113,45:107,46:160,47:145
  };

    //***** 色を取得する関数 *****
    var color = function(prefCode) {
         var value = valueMap[prefCode];
         var colorDef = null;
         for (var i = 0; i < colorDefs.length; i++) {
                colorDef = colorDefs[i];
                var minOK = (colorDef.min == null || colorDef.min <= value);
                var maxOK = (colorDef.max == null || value <= colorDef.max);
                if (minOK && maxOK) return colorDef.color;
        }
         return colorDef.color;
  };

※データ量が非常に多いため、一部分のみ抜粋

var prefs = {
"type": "FeatureCollection",
"crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:EPSG::4612" } },
"features": [
{ "type": "Feature", "properties": { "prefectures_code": 21, "prefectures_name": "岐阜県" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 137.275788807, 35.290612721 ], [ 137.262663774, 35.285201946000015 ], [ 137.249943191, 35.268546946 ], [ 137.2435907, 35.26853725199999 ], [ 137.224574553, 35.256492532 ], [ 137.21127594000001, 35.259690865 ], [ 137.19995758799999, 35.25146364 ], [ 137.18948814500001, 35.252569198 ], [ 137.176368975, 35.260396414 ], [ 137.176093165, 35.270382801999986 ], [ 137.16545538299999, 35.28225725199999 ], [ 137.14582983099999, 35.27979946799999 ], [ 137.13159428000003, 35.293627802 ], [ 137.101027082, 35.301616108 ], [ 137.09627927400001, 35.29070110799999 ], [ 137.081310661, 35.292190838 ], [ 137.07978374800001, 35.306778892 ], [ 137.072164034, 35.306652775 ], [ 137.064078223, 35.32066330599999 ], [ 137.072978807, 35.326456918999988 ], [ 137.06175744500001, 35.339031333 ], [ 137.04989856, 35.334369387 ], [ 137.046311336, 35.339541333 ], [ 137.04984975400001, 35.359600468 ], [ 137.04762169899999, 35.36469294599999 ], [ 137.03398172499999, 35.368045973 ], [ 137.02828147899999, 35.375324279 ], [ 137.002123748, 35.381480613 ], [ 136.999245188, 35.39004836 ], [ 136.991491946, 35.393068027 ], [ 136.98731275, 35.401983865 ], [ 136.97857669300001, 35.406420225 ], [ 136.98525144000001, 35.417477972999983 ], [ 136.993215642, 35.424195775 ], [ 136.964372607, 35.420939027 ], [ 136.96111703, 35.41458210799999 ], [ 136.961713022, 35.399771333 ], [ 136.935120117, 35.388246135 ], [ 136.921450026, 35.37902953199999 ], [ 136.892717756, 35.378089 ], [ 136.864931829, 35.37260541399999 ], [ 136.86126238700001, 35.368377108 ], [ 136.83403900100001, 35.35594464 ], [ 136.83094788599999, 35.35667464 ], [ 136.81037955900001, 35.359690467999989 ], [ 136.80423204900001, 35.360141586 ], [ 136.794063722, 35.366068225 ], [ 136.79445566799996, 35.368334613000115 ], [ 136.77464094699999, 35.369604054 ], [ 136.76811538300001, 35.366901837999983 ], [ 136.75911175100001, 


       ～ 中略 ～


130.65734832699999, 31.257075279 ], [ 130.64911166, 31.238948613 ], [ 130.65799, 31.221768613 ], [ 130.65470194599999, 31.217245 ], [ 130.640958885, 31.21692 ], [ 130.62971277599999, 31.21079082899999 ], [ 130.645794747, 31.202586198 ], [ 130.64039861200001, 31.190399441 ], [ 130.62609472099999, 31.180956387 ], [ 130.601366394, 31.182301108 ], [ 130.590607224, 31.175595 ], [ 130.58577639399999, 31.160659162 ], [ 130.56477, 31.175616108 ], [ 130.55376194600001, 31.178354441 ], [ 130.540113891, 31.16710333299999 ], [ 130.52956666700001, 31.163393892 ], [ 130.518115279, 31.16585749499999 ], [ 130.50861389100001, 31.175104721 ], [ 130.50824861199999, 31.193622494999989 ], [ 130.515613333, 31.198415 ], [ 130.50857306099999, 31.213390559 ], [ 130.48625805400002, 31.237129441 ], [ 130.474463891, 31.245253054 ], [ 130.45953805400001, 31.251274162 ], [ 130.44420194599999, 31.252615559 ], [ 130.43107972799999, 31.24658249499999 ], [ 130.41337722399999, 31.248521667 ], [ 130.402985551, 31.253550829 ], [ 130.38755666700001, 31.25086777499999 ], [ 130.36858211399999, 31.251883387 ] ] ], [ [ [ 131.03261861199999, 31.377553333 ], [ 131.03538749699999, 31.367889441 ], [ 131.02040944199999, 31.364562775 ], [ 131.02242, 31.377018333 ], [ 131.03261861199999, 31.377553333 ] ] ] ] } },
{ "type": "Feature", "properties": { "prefectures_code": 32, "prefectures_name": "島根県" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 133.15673313235527, 35.494878060093285 ], [ 133.16027425155605, 35.508058892673937 ], [ 133.18093078022721, 35.502943942717266 ], [ 133.1903737647626, 35.501370111961371 ], [ 133.18643918787285, 35.48602526209136 ], [ 133.17109433800286, 35.484648160179944 ], [ 133.15673313235527, 35.494878060093285 ] ] ] ] } },
{ "type": "Feature", "properties": { "prefectures_code": 32, "prefectures_name": "島根県" }, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ 133.18919339169568, 35.517895334898299 ], [ 133.19509525703032, 35.521436454099074 ], [ 133.20237422427633, 35.509632723429839 ], [ 133.18919339169568, 35.506681790762528 ], [ 133.18919339169568, 35.517895334898299 ] ] ] ] } }
]
}

2-4.アイコンマーカーの配置とポップアップ

マーカーの配置やポップアップのコード部分は、「気象庁震度観測点マップ」と同じです。コードの説明は「気象庁震度観測点マップ」を参照して下さい。 大量のアイコンマーカーの配置とポップアップ(吹き出し)を指定した座標(緯度、経度)の位置に展開します。 種類の違う複数の任意アイコン画像のマーカーを指定した位置に配置するために外部ファイルとしてpospop.jsとして作成します。 pospop.jsも「気象庁震度観測点マップ」の構成と相違ありません。データ内容が違うだけです。

※リスト表示にsyntaxhighlighterを利用していますが、スクリプト中に<br>タグを含んでいる 箇所が何箇所かあり、pospop.jsコード表示が正しく表示されないため掲載していません。コードは一部分のみのサンプルですが、下記から確認して下さい。

pospop.jsファイル確認


3.ソースコードについて

掲載しているソースコードのライセンスは、CC0 (クレジット表示不要、改変可、商用可) とします。自由に利用して頂いてかまいません。 作品で利用しているアイコンマーカー画像ファイル等は提供していませんので、お手数ですが各自で準備して下さい。尚、ソースコードは予告なく修正を加えて 更新することがあります。予めご了承願います。また、ブラウザのソースコード表示などで表示して確認やコピー、URLから直接ダウンロードするなども自由に行ってもかまいません。 全て自己責任でお願いします。

■関連記事
・Leafletで地図を作ろう － (イントロダクション)
・Leafletで地図を作ろう － (気象庁震度観測点マップ)
・Leafletで地図を作ろう － (東海道五十三次ルートマップ)
・Leafletで地図を作ろう － (富嶽三十六景浮世絵マップ)
・Leafletで地図を作ろう － (四国遍路巡礼マップ)

コメント

コメントを投稿

このブログの人気の投稿

Excelアドインで日本語形態素解析

-
イメージ
1.概要 日本語形態素解析とは、文法的な情報の注記の無い自然言語のテキストデータ（文）から、対象言語の文法や、辞書と呼ばれる単語の品詞等の情報に基づき、 形態素（Morpheme, おおまかにいえば、言語で意味を持つ最小単位）の列に分割し、それぞれの形態素の品詞等を判別する作業です。（出典:Wikipedia） 形態素解析エンジンとしては、Mecabが有名です。筆者もPythonにインストールして、テキストマイニングに利用しています。しかし、会社などで利用したい 場合は、このような環境を個人的な利用目的で構築するにしても、セキュリティ上の問題などでIT管理者などから利用許可が下りない場合があります。 今回は、普段から利用しているExcelのアドインでテキストマイニングをして見たいと思います。特別なサーバーなどへのインストールなしで、 個人PCにアドインのインストール許可さえもらえれば誰でも簡単にテキストマイニング(ワードクラウド)分析をすることができます。 2.利用方法 (1)Excelのアドインである「E2D3」を追加します。「挿入」→「アドインを入手」をクリックし      「データ分析」を選択して、「E2D3」を探します。見つかったら、「追加」をクリックしま      す。これで、「E2D3」が利用できるようになります。 (2)分析するデータ(テキスト文書)を準備します。 (3)下記サイトの日本語形態素解析サービス(無料ツール)を利用して、文書を解析し品詞毎に分解、      統計データとして出力します。 日本語形態素解析サービス(無料ツール) URL : https://opendata-web.site/tool/parse/ ※ブックマーク等に登録しておくと良いでしょう。 (4)分析するデータ(テキスト文書)をテキストボックスに貼付け、解析ボタンをクリックします。 (5)解析結果が日本語形態素と統計の2種類画面出力されるので、統計の表をコピペして、Excelの      空きシートに一時的に貼り付けます。 (6)フィルタを追加して、品詞で名詞を選択してフィルタリングします。名詞のみのデータになるの      で、フィルタしたシートのB列(出現数)、C列(表記)をコピーして退避し、B列とC列を入れ替え

階層構造JSONファイルの作成

-
イメージ
1.はじめに 仕事や趣味でいろいろなデータを扱いますが、プログラミングで扱うデータ形式も多種多様でデータベース、テキスト、csv、xml、json形式など 思い付くだけで数十種類でてきます。データの見える化 (可視化) をやりたくて階層構造のJSON形式のファイルを扱う必要性があり、 元データ収集・編集 ⇒ Excelでデータ作成 ⇒ CSV出力 ⇒ 階層構造のJSONファイルへ変換出力と言ったステップでJSONファイルを作成して見ましたので紹介致します。 2.階層構造CSVtoJSONコンバータ 最初は、テキストエディタで手作業でJSONファイルを作成しょうと試みましたが、{}の対応付けや[,などの挿入漏れなど ミスすることが多くてデータを読み込むとエラーで動かないことの連続でした。何とか効率良く元データより階層構造の JSON形式のファイルを作成することができないものかとネット検索しても意図したものを見つけ出すことが出来ませんでした。 そこで今回、試行錯誤してExcel VBAで作成した 「階層構造CSVtoJSONコンバータ」 によるデータ作成手順をまとめて見ました。 階層構造のJSONファイルとは、 親、子、孫、曾孫・・・といった 階層構造のデータ形式のァイル です。 2-1.データの収集について まずは、目的とすべき元となるデータを収集しなければなりません。データの入手や収集手段はいろいろあると思いますが、 1回限りでのみ利用する場合や不定期、日次、週次、月次など継続的に利用する場合に応じて効率良い方法を選択する必要があります。 企業では自社内の各種システムにて収集や加工・編集などができるツール類もあると思いますが、個人ではなかなか揃えられません。 尚、今回は小規模なデータを扱うことを前提としているので効率的なデータの収集方法などについては別の機会にでも考えていきたいと 思います。ここでは、 「階層構造CSVtoJSONコンバータ」 の説明のためのテストデータを利用しての手順について説明します。 2-2.作成手順 (1)元データの準備 (テスト用に鳥類目録データの一部を利用) (2)Excelで元データを利用して、階層構造のデータ表を作成する。     ※【お願い】ファイルの終端判定のため、A列の末尾のセルにEOFと追記して下

HSPでコマンドプロンプトを制御する

-
イメージ
1.概要 最近は、Excel VBAやPythonなどによる自動化というキーワードを良く耳にしますが、昔からある自動化で最も安定性が あり、比較的単純な手順の記述とコマンド発行といったコマンドプロンプトによる操作およびバッチファイルによる自動処理 があります。システムの運用管理者やネットワーク管理者の人達も多く利用されています。 筆者も一時期は、良く利用していましたがGUIの操作に慣れ過ぎて最近は利用する機会も減ってきています。 今回は、HSP言語によるコマンドプロンプトを操作して外部から文字列(コマンド)を送信する方法を模索して見たいと思います。 2.コマンドプロンプトに文字列送信 コマンドプロンプトにGUI画面上からキー入力された文字列を送信する方法について説明します。 まず、概略の処理の流れを整理します。 (1) コマンドプロンプトを起動させる。 ただし、環境依存を無くすため環境変数 'comspec' より取得したパス名を、 exec 命令のp1パラメータとして渡す。 (2) 入力ボックス等より入力したコマンド（ テキスト文字列 ）をクリップボードにコピーする。 (3) コマンドプロンプト画面をアクティブにする。 (4) クリップボードよりコマンドを貼り付ける。 整理すると、これらの処理を実現させるためには、 ・環境変数'comspec'よりパス名を取得する処理 ・クリップボードにテキスト文字列をコピーする処理 ・任意の画面をアクティブにする処理 ・クリップボードよりテキスト文字列を貼り付ける処理 となります。ここで、一番難しいのはコンソールに対してクリップボードよりテキスト文字列を貼り付ける処理です。 [ ALT ]+[ SP ]+[ e ]+[ p ]+[ Enter ] キーという操作を keybd_event APIを 利用 して送り、貼り付け処理をしても良いのですが、メニューの操作をエミュレートするので、 [ ALT ]+[ SP ] で メニュー がポップアップし、次に [ e ] で編集がクリックされ、更に [ p ]+[ Enter ] キーといった流れとなって メニューの 操作が丸見えとなります。もちろん、動作的にも遅くスマートではありません。 コマンド

TOP