地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図をいくつか作成してきた。
以前に「日本酒生産量:都道府県別マップ」を作成した。
最近、「日本白地図」を作成した。
今回、「日本酒生産量:都道府県別マップ」の「白地図+Google Charts版」を作成。
白地図の上に「Google Charts > Image Charts」で作成した棒グラフで日本酒生産量を表示する。
「Google Charts > Image Charts」で作成した棒グラフでは左側のY軸を消す方法が見つからなかったので、グレーの縦線が付いてしまう。
マウスクリックで、その都道府県の日本酒生産量を表示する。
「Google Charts > Image Charts」を使っているが、これは非推奨になっているようなので、そのうち使えなくなるかもしれない。
「Google Charts > Image Charts」の代替になりそうな「Image-Charts」というのもある。
ただし、フリープランではロゴが入ってしまう。
https://image-charts.com/chart?chs=60x300&cht=bvg&chco=00A5C6&chf=bg,s,ffffff00&chd=t:100
その後、「QuickChart.io」というのが見つかった。「QuickChart.io」を使って「日本酒生産量:都道府県別マップ」を作った。(↓)
「Google Charts > Image Charts」の棒グラフのサンプルは以下が分かり易い。
URLでパラメーターを渡すだけで、PNG画像でグラフが返ってくる。
≪Google Charts > Image Charts サンプル≫
https://chart.apis.google.com/chart?chs=300x300&chd=t:20,60,50|14,21,12|82,14,45&cht=bvg&chco=ff0000,aa0000,770000
https://chart.apis.google.com/chart?cht=bvs&chs=300x250&chtt=グラフのタイトル&chd=t:30,40,70,90,20,50,60,30&chxt=x,y&chm=N,ff0000,0,,12
「日本酒生産量:都道府県別マップ(白地図+Google Charts版)」のJavaScriptソースの抜粋。
Google Chartsで作成したPNG画像をマーカーとして表示するための緯度経度は、都道府県の中央あたりにした。マーカーに合わせて調整しているので必ずしも正確な中央ではない。
地図の拡大縮小でマーカーの表示位置が必ずしも、中央には来ない。Leaflet地図のマーカーの「iconAnchor」は左上が起点だが、棒グラフは左下起点でPNG画像が出来るため仕方ない。
var todofuken = [
// 都道府県 中央?
['',0,0], // ダミー
['北海道',42.66628070564928,140.86669921875003],
['青森県',40.6723059714534,140.51513671875003],
['岩手県',39.554883059924016,141.02600097656253],
['宮城県',38.17343267903542,140.78979492187503],
['秋田県',39.470125122358176,140.20751953125003],
['山形県',38.440682264173894,139.97131347656253],
['福島県',37.28716518793858,139.88891601562503],
['茨城県',36.07574221562703,140.19104003906253],
['栃木県',36.672824886786564,139.65820312500003],
['群馬県',36.421282443649496,138.81225585937503],
['埼玉県',35.88014896488361,139.28466796875003],
['千葉県',35.31736632923788,140.13061523437503],
['東京都',35.62158189955968,139.33410644531253],
['神奈川県',35.38457160381764,139.12811279296878],
['新潟県',37.47921744485059,138.87817382812503],
['富山県',36.474306755095235,137.07092285156253],
['石川県',36.30627216957992,136.47216796875003],
['福井県',35.88459964717596,136.21948242187503],
['山梨県',35.563512051219696,138.51013183593753],
['長野県',36.08018188118015,137.82348632812503],
['岐阜県',35.572448615622804,136.82373046875003],
['静岡県',34.84536693184101,137.99377441406253],
['愛知県',34.903952965590065,137.12036132812503],
['三重県',34.35250666867596,136.43371582031253],
['滋賀県',35.043489514314686,136.03820800781253],
['京都県',35.15584570226544,135.45043945312503],
['大阪府',34.53371242139567,135.46142578125003],
['兵庫県',34.912962495216966,134.69238281250003],
['奈良県',34.17090836352573,135.84045410156253],
['和歌山県',33.760882000869195,135.40100097656253],
['鳥取県',35.40696093270201,133.72558593750003],
['島根県',34.962497232449145,132.28088378906253],
['岡山県',34.77771580360469,133.59375000000003],
['広島県',34.38877925439021,132.57202148437503],
['山口県',34.102707993174874,131.41571044921878],
['徳島県',33.81110228864701,134.15405273437503],
['香川県',34.17772537282446,133.95629882812503],
['愛媛県',33.5665726400041,132.58575439453128],
['高知県',33.44977658311846,133.38500976562503],
['福岡県',33.502468829034314,130.50384521484378],
['佐賀県',33.128351191631566,130.06988525390628],
['長崎県',32.76649095995108,129.84741210937503],
['熊本県',32.43561304116276,130.64392089843753],
['大分県',32.983324091837474,131.46789550781253],
['宮崎県',32.01739159980399,131.23443603515628],
['鹿児島県',31.55981453201843,130.50384521484378],
['沖縄県',26.369724677109755,127.8204345703125]
];
// 都道府県番号:日本酒生産量(kl)/ 2020年
var fukenValue = {
1:3487,
2:3145,
3:2833,
4:5420,
5:12589,
6:7256,
7:8587,
8:2595,
9:6164,
10:2234,
11:15189,
12:6372,
13:1275,
14:778,
15:28693,
16:3805,
17:4091,
18:2592,
19:7737,
20:6455,
21:3403,
22:3125,
23:9799,
24:1900,
25:2954,
26:59975,
27:688,
28:93599,
29:2672,
30:1732,
31:587,
32:1420,
33:1747,
34:5747,
35:5493,
36:291,
37:782,
38:1221,
39:3853,
40:2613,
41:2108,
42:741,
43:703,
44:1887,
45:0,
46:0,
47:0
};
var maxvalue = 93599; // 兵庫
for (var ix = 1; ix <= 47; ix++) {
var value = fukenValue[ix];
var barData = Math.ceil(value / maxvalue * 100); // 最大:100
var chartSize = barData * 3; // 最大:300
if (chartSize > 0) {
var chartIcon = L.icon({
// *** Google Charts API ***
// chs=60x300 サイズ
// cht=bvg 棒グラフ
// chco=00A5C6 色
// chf=bg,s,ffffff00 背景透過(ffffff00)
// chd=t:100 データ(最大:100)
// chl=兵庫 ラベル
iconUrl: 'https://chart.apis.google.com/chart?chs=60x' + chartSize + '&cht=bvg&chco=00A5C6&chf=bg,s,ffffff00&chd=t:100',
iconSize: [60, chartSize],
iconAnchor: [0, chartSize],
popupAnchor: [0, -20]
});
L.marker([todofuken[ix][1], todofuken[ix][2]], { icon: chartIcon }).addTo(map);
}
}
map.setView([37, 137], 6);
最初、グラフのサイズを60x300として、日本酒生産量の棒グラフにしたが、下図のようにグラフの左側のY軸が消せない上に、Leaflet地図のマーカーの「iconAnchor」は左上が起点だが、棒グラフは左下起点でPNG画像が出来るため表示位置がおかしくなる。
iconUrl: 'https://chart.apis.google.com/chart?chs=60x300&cht=bvg&chco=00A5C6&chf=bg,s,ffffff00&chd=t:' + barData,
iconSize: [60, 300],
...
(↓↓↓)よって、グラフのサイズの縦の長さ自体を生産量とする方式にした。
iconUrl: 'https://chart.apis.google.com/chart?chs=60x' + chartSize + '&cht=bvg&chco=00A5C6&chf=bg,s,ffffff00&chd=t:100',
iconSize: [60, chartSize],
...