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

demographics.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>2019年都道府県別人口統計マップグラフ</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css"
  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
  crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
  integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
  crossorigin=""></script>
<link rel="stylesheet" type="text/css" media="screen" href="./css/demogra.css">
<link rel="stylesheet" href="./css/L.Control.SlideMenu.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
   integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<script src="./jsscr/L.Control.SlideMenu.js"></script>
<script src="./jsscr/prefs.js"></script>
<script src="./jsscr/pospop.js"></script>
<script src="./jsscr/demographics.js"></script>
<script src="https://riversun.github.io/jsframe/jsframe.js"></script>
<script>
  var markers=[];
 
  function init(){
      //***** 表示中心座標の指定 *****
      var mpoint = [36.5626, 139.130859];
      var map = L.map('mapcontainer').setView(mpoint, 7);
 
      //***** 地図タイルを設定 *****
      var gsiattr = "<a href='http://portal.cyberjapan.jp/help/termsofuse.html' target='_blank'>地理院タイル</a>";
      var gsi = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', { attribution: gsiattr });
      var gsipale = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', { attribution: gsiattr });
      var osm = L.tileLayer('http://tile.openstreetmap.jp/{z}/{x}/{y}.png',
          { attribution: "<a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors" });
      //***** オーバーレイ用のタイルレイヤ *****
      var gsirelief = L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/relief/{z}/{x}/{y}.png',
          { opacity: 0.3, maxNativeZoom: 15, attribution: gsiattr });
      var baseMaps = {
          "地理院地図": gsi,
          "淡色地図": gsipale,
          "オープンストリートマップ": osm
      };
      var overlayMaps = {
          "色別標高図": gsirelief
      };
      L.control.layers(baseMaps, overlayMaps).addTo(map);
      gsi.addTo(map);
      gsirelief.addTo(map);
       
      //***** 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>';
      var contents2  = '<br><br>';
 
      var header3  = '<span class="cstm-slidmenu-header" style="background-color: #dd3366">統計関係情報</span>';
      var contents3  = '<table width=180 border=0 cellspacing=0 cellpadding=0 bgcolor="#303040" ' +
                       'onMouseOver="cellbgcolor(¥'' + "#805080" + '¥');" ' +
                       'onMouseOut="bgrecover(¥'' + "#303040" + '¥')">';
          for (var i = 0; i < SlideMenu_ma.length; i++) {
              var smenuDef = SlideMenu_ma[i];
              var text = smenuDef.title;
              contents3 += '<tr><td width=15 align="right"><img src=' + smenuDef.img + '></td>' +
                           '<td width=165 height=20 align="left" class="menustr" onClick="JumpURL(¥'' + smenuDef.url+ '¥')">' + text + '</td></tr>';
          }
          contents3 += '</table>';
 
      var header4  = '<span class="cstm-slidmenu-header" style="background-color: #118833">全国自治体基本情報</span>';
      var contents4  = '<table width=180 border=0 cellspacing=0 cellpadding=0 bgcolor="#303040" ' +
                       'onMouseOver="cellbgcolor(¥'' + "#009070" + '¥');" ' +
                       'onMouseOut="bgrecover(¥'' + "#303040" + '¥')">';
          for (var i = 0; i < SlideMenu_mb.length; i++) {
              var smenuDef = SlideMenu_mb[i];
              var text = smenuDef.title;
              contents4 += '<tr><td width=15 align="right"><img src=' + smenuDef.img + '></td>' +
                           '<td width=165 height=20 align="left" class="menustr" onClick="JumpURL(¥'' + smenuDef.url+ '¥')">' + text + '</td></tr>';
          }
          contents4 += '</table>';
 
      var header5  = '<span class="cstm-slidmenu-header" style="background-color: #ff6a3d">都道府県概要</span>';
      var contents5  = '<table width=180 border=0 cellspacing=0 cellpadding=0 bgcolor="#303040" ' +
                       'onMouseOver="cellbgcolor(¥'' + "#ffa51f" + '¥');" ' +
                       'onMouseOut="bgrecover(¥'' + "#303040" + '¥')">';
          for (var i = 0; i < SlideMenu_mc.length; i++) {
              var smenuDef = SlideMenu_mc[i];
              var text = smenuDef.title;
              contents5 += '<tr><td width=15 align="right"><img src=' + smenuDef.img + '></td>' +
                           '<td width=165 height=20 align="left" class="menustr" onClick="JumpURL(¥'' + smenuDef.url+ '¥')">' + text + '</td></tr>';
          }
          contents5 += '</table>';
 
        // ***** SlideMenu Option *****
        var options = {
            width:  '200px',
            height: '500px'
        }
        L.control.slideMenu(header1+contents1+contents2+header3+contents3+header4+contents4+header5+contents5, options).addTo(map);
 
      //***** IEのみ利用可とする *****
      var userAgent = window.navigator.userAgent.toLowerCase();
      if (userAgent.indexOf('msie') !== -1 || userAgent.indexOf('trident') !== -1) {
      //***** ユーザーコントロールを追加(外部コンテンツ呼び出し用) *****
      var ourCustomControl = L.Control.extend({
           options: {
           position: 'topleft'
      },
           onAdd: function (map) {
              var container = L.DomUtil.create('div', 'leaflet-bar');
              container.style.backgroundColor = '#ffffff';
              container.style.width  = '30px';
              container.style.height = '30px';
              container.innerHTML = ' <a href="javascript:popupwin();"><img src="./image/graphic.png"' +
              ' width=24 height=24 title="人口統計グラフ" align="absmiddle"></a>'
             return container;
         },
      });
      map.addControl(new ourCustomControl());
      }
 
      //***** 都道府県のエリアをポリゴンで描画 *****
      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);
 
      //***** 凡例を右下に追加(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);
 
      //***** 時計を右下に追加(2) *****
      var tokei = L.control({position: 'bottomright'});
           tokei.onAdd = function (map) {
           this._div = L.DomUtil.create('div', 'timeinfo');
           this.update();
           return this._div;
      };
          tokei.update = function () {
          this._div.innerHTML = '<span class="clock-info">' +
                                '<b><span id="c_time"></span></b></span>'
&#12288;   };
      tokei.addTo(map);
 
      //***** 画像を右下に追加(2) *****
      var img = L.control({position: 'bottomright'});
          img .onAdd = function (map) {
          this._div = L.DomUtil.create('div', 'imglinfo');
          this.update();
          return this._div;
      };
          img.update = function () {
          this._div.innerHTML = '<img src="./image/demogp2.png" width=185 height=150>'
      };
      img.addTo(map);
 
      //***** スケールの表示 *****
      L.control.scale({imperial:false}).addTo(map);
 
      //***** マーカー全体が入るボックスを作る *****
      var bound = L.latLngBounds(markerList[0].pos, markerList[0].pos);
 
      //***** markerListの設定でマーカーを追加 *****
      for (var num in markerList) {
           var mk = markerList[num];
           var popup = L.popup().setContent(mk.name);
 
           //***** ツールチップ付加で地域ブロック毎にアイコン色分け表示 *****
           var mIcon = L.icon({
               iconUrl: mk.iconUrl,
               iconSize: mk.iconSize
           });
           markers[num]=L.marker(mk.pos,{ icon:mIcon }).bindPopup(popup).bindTooltip(mk.title).addTo(map);
 
    &#12288;     //***** マーカー全体が入るボックスを広げる *****
           bound.extend(mk.pos);
      }
   }
 
     //***** コンボボックスの都道府県名を選択するとポップアップ *****
     function selText(obj){
         var idx = obj.selectedIndex;
         var value = obj.options[idx].value;
         markers[value].openPopup();
     }
</script>
</head>
<body onload="init()">
  <div id="mapcontainer" style="position:absolute;top:0;left:0;right:0;bottom:0;"></div>
</body>
</html>

demographics.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
//***** テキスト時計 *****
 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"' }
 ];
demogra.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
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)関数に選択インデックスを代入して該当のポップアップを表示します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//***** 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>';
     
    ～ 以下省略 ～
     
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//***** 都道府県名配列 *****
//***** 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.沖縄県 (おきなわけん)'"}
 ];
1
2
3
4
5
6
//***** コンボボックスの都道府県名を選択するとポップアップ *****
function selText(obj){
    var idx = obj.selectedIndex;
    var value = obj.options[idx].value;
    markers[value].openPopup();
}

2-2.凡例の追加

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//***** 凡例を右下に追加(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);
1
2
3
4
5
6
7
8
9
10
11
12
13
  //***** 色定義 *****
  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形式のデータを読み込み、取得したカラーコードで都道府県のエリアをポリゴンで描画します。人口統計のマップグラフとして可視化されます。

1
2
3
4
5
6
7
8
9
10
11
12
13
//***** 都道府県のエリアをポリゴンで描画 *****
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);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
  //*****  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;
};
prefs.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
※データ量が非常に多いため、一部分のみ抜粋
 
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の      空きシートに一時的に貼り付けます。 (...

階層構造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列の末...

キーボードのキーコードの一覧表

-
イメージ
1.概要 HSPやExcel VBAなどを利用していて、キーボードのキー定数が知りたい場合があります。その都度、ネットで調べているのが手間なので、 一覧表にして見ました。このキーコードは、 Win32API の keybd_event 関数等を利用して送信することができるコードです。 プログラム上からキーコードを送信する場合は、誤操作防止のため十分なウェイトを入れるなりの工夫が必要です。 2.キーボードのキーコード一覧表 キーボードのキーコード一覧表です。全部で127個あります。 キーボードのキーコード一覧表 No. 記号定数名 値 ( HEX ) 値 ( DEC ) 意味 ( 該当するキー ) 1  VK_LBUTTON $01 01 2  VK_RBUTTON $02 02 3  VK_CANCEL $03 03  Cancel（[Ctrl]+[Break]) 4  VK_MBUTTON $04 04 5  VK_BACK $08 08  [BackSpace] 6  VK_TAB $09 09  [Tab] 7  VK_CLEAR $0C 12 8  VK_RETURN $0D 13  [Enter] 9  VK_SHIFT $10 16  [Shift] 10  VK_CONTROL $11 17  [Ctrl] 11  VK_MENU $12 18  [Alt] 12  VK_PAUSE $13 19  [Pause] 13  VK_CAPITAL $14 20  [CapsLock] 14  VK_ESCAPE $1B 27  [Esc] 15  VK_SPACE $20 32  [スペースキー] 16  VK_PRIOR $2...