Leaflet地図：「日本酒生産量：都道府県別マップ」作成。サンプルソース。逆ジオコーディング付き。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図表示を試してきた。

今回、「日本酒生産量：都道府県別マップ」を作成した。（↓）

「knooto.info」の以下の地図とJavaScriptを参考にした。

都道府県別の県境データは、政府CIOポータル「ITダッシュボード」に以前あったデータを利用。現在どこにあるのか不明。

[県境データ] → https://ok2nd.github.io/leaflet/js/prefs.js

【ソースコード抜粋】

<script src="js/prefs.js"></script>
<script>
// 都道府県番号 : 日本酒生産量
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 colorDefs = [
	{ min: 20000, max: null, color: '#FF1905' },
	{ min: 10000, max: 19999, color: '#ff6a3d' },
	{ min: 7000, max: 9999, color: '#ff9800' },
	{ min: 5000, max: 6999, color: '#ffc824' },
	{ min: 4000, max: 4999, color: '#F7EB45' },
	{ min: 3000, max: 3999, color: '#cddc39' },
	{ min: 2000, max: 2999, color: '#4caf50' },
	{ min: 1000, max: 1999, color: '#03a9f4' },
	{ min: 200, max: 999, color: '#68cefd' },
	{ min: null, max: 199, color: '#A9A9A9' },
];
var color = function(prefCode) {
	var value = fukenValue[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 map = L.map('map').setView([38, 138], 6);
var tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
	continuousWorld: false
});
tileLayer.addTo(map);
L.geoJSON(prefs, {
	style: function(feature) {
		return {
			weight: 1,
			opacity: 1,
			color: 'white',
		//	dashArray: '3',
			fillOpacity: 0.6,
			fillColor: color( feature.properties.prefectures_code )
		};
	}
}).addTo(map);
// 凡例を右下に追加
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);
</script>

地図をクリックすると、その都道府県名と日本酒生産量を表示する。

緯度経度から住所検索（逆ジオコーディング）は、以下のWebページを参考に、国土地理院APIを利用。

【ソースコード抜粋】

var todofuken = {
	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:'沖縄県'
}
map.on('click', onMapClick);
var posMarker = null;
function onMapClick(e) {
	posMarkerRemove();
	var lat = e.latlng.lat;
	var lng = e.latlng.lng;
	// 地理院地図サーバから逆ジオコーディングで都道府県を調べる
	var src = 'https://mreversegeocoder.gsi.go.jp/reverse-geocoder/LonLatToAddress?lat=' + lat + '&lon=' + lng;
	fetch(src)
	.then((response) => {
		return response.text();
	})
	.then((text) => {
		var results = JSON.parse(text);
		var kenCode = Number(results.results.muniCd.substr(0,2));	// 都道府県コード
		var popStr = '<span class="kenmei">' + todofuken[kenCode] + '</span><br>日本酒生産量（2020年）<br><span class="seisanryo">' + fukenValue[kenCode].toLocaleString() + '</span> キロリットル';
		posMarker = L.marker(e.latlng).on('click', posMarkerRemove).addTo(map).bindPopup(popStr).openPopup();
	})
}
function posMarkerRemove() {
	if (posMarker) {
		map.removeLayer(posMarker);
		posMarker = null;
	}
}

【2020年 都道府県別日本酒生産量】

「2020年 都道府県別日本酒生産量」は以下のデータを利用。

都道府県	日本酒生産量
兵庫県	93,599 kl
京都府	59,975 kl
新潟県	28,693 kl
埼玉県	15,189 kl
秋田県	12,589 kl
愛知県	9,799 kl
福島県	8,587 kl
山梨県	7,737 kl
山形県	7,256 kl
長野県	6,455 kl
千葉県	6,372 kl
栃木県	6,164 kl
広島県	5,747 kl
山口県	5,493 kl
宮城県	5,420 kl
石川県	4,091 kl
高知県	3,853 kl
富山県	3,805 kl
北海道	3,487 kl
岐阜県	3,403 kl
青森県	3,145 kl
静岡県	3,125 kl
滋賀県	2,954 kl
岩手県	2,833 kl
奈良県	2,672 kl
福岡県	2,613 kl
茨城県	2,595 kl
福井県	2,592 kl
群馬県	2,234 kl
佐賀県	2,108 kl
三重県	1,900 kl
大分県	1,887 kl
岡山県	1,747 kl
和歌山県	1,732 kl
島根県	1,420 kl
東京都	1,275 kl
愛媛県	1,221 kl
香川県	782 kl
神奈川県	778 kl
長崎県	741 kl
熊本県	703 kl
大阪府	688 kl
鳥取県	587 kl
徳島県	291 kl
宮崎県	0 kl
鹿児島県	0 kl
沖縄県	0 kl