Leaflet地図：世界地図に国別宗教構成を表示。

地図データを扱うJavaScript ライブラリ「Leaflet」を使って、地図をいくつか作成してきた。

今回、世界地図に国別宗教構成を表示するようにした。

以前に作成した世界地図の国旗マーカーのクリックで、その国の宗教構成をポップアップで表示する。

宗教構成データは「Religious Composition by Country, 2010-2050 - Pew Research Center」の2020年データを使用。

作成した地図が以下。

国旗マーカーをクリックするとその国の2020年の人口と宗教構成の比率を表示する。データの都合上、一部表示されない国もある。比率が合計して100%にはならないかもしれない。

「Pew Research Center」のデータによれば、日本は無宗教が60%となっている。

ヨーロッパの英国、フランス、ドイツでも無宗教の比率が30%前後となっている。

≪JavaScript サンプルソース（抜粋）≫

2つのCSVデータ「religion-country.csv」「capital.csv」を使っている。2桁の国コードで照合して使用。

fetch('csv/religion-country.csv')		// 国別宗教構成データ
.then((response) => {
	if(response.ok) {
		return response.text();
	} else {
		throw new Error();
	}
})
.then((text) => {
	csv2array(text);
	marker2map();
})
var country = Array();
function csv2array(csv) {
	var line = csv.split("\n");
	for (var i=0; i<line.length; ++i) {
		var data = line[i].split(',');
		if (data.length > 2) {
/*
			data[0] country_code
			data[1] 国名
			data[2] 人口
			---	data[3] 100%
			data[4] キリスト教
			data[5] イスラム教
			data[6] 無宗教
			data[7] ヒンズー教
			data[8] 仏教
			data[9] 民間信仰
			data[10] ユダヤ教
			data[11] その他
*/
			country[data[0]] = [data[1],data[2],data[4],data[5],data[6],data[7],data[8],data[9],data[10],data[11]];
		}
	}
}
// -----------------------------------
function marker2map() {
	fetch('csv/capital.csv')		// 世界の首都の緯度経度データ
	.then((response) => {
		if(response.ok) {
			return response.text();
		} else {
			throw new Error();
		}
	})
	.then((text) => {
		csv2map(text);
		map.setView([30,10], 2);
	})
}
function csv2map(csv) {
	var line = csv.split("\n");
	for (var i=0; i<line.length; ++i) {
		var data = line[i].split('\t');
		if (data.length > 2) {
/*
			data[0]	country_code
			data[1]	name_jp
			data[3]	capital_jp
			data[7]	lat
			data[8]	lon
*/
			var worldFlag = L.icon({
				iconUrl: 'worldflags/80px/' + data[0].toLowerCase() + '.png', 
				iconSize: [80, 80],
				iconAnchor: [40, 48],
				popupAnchor: [0, -36],
			});
			var country_code = data[0].toUpperCase();
			var popStr = '<span class="country_code">' + country_code + '</span> ';
			popStr += '<span class="country">' + data[1] + '</span><br>';
			popStr += '<span class="capital">' + data[3] + '</span><br>';
			popStr += '<span class="lat_lng">緯度:' + data[7] + ' 経度:' + data[8] + '</span>';
			if (country[country_code]) {
				popStr += '<br>人口: <span class="population">' + Number(country[country_code] [1]).toLocaleString() + ' 人</span>';
				popStr += '<br>キリスト教: <span class="religion">' + country[country_code] [2] + ' %</span>';
				popStr += '<br>イスラム教: <span class="religion">' + country[country_code] [3] + ' %</span>';
				popStr += '<br>無宗教: <span class="religion">' + country[country_code] [4] + ' %</span>';
				popStr += '<br>ヒンズー教: <span class="religion">' + country[country_code] [5] + ' %</span>';
				popStr += '<br>仏教: <span class="religion">' + country[country_code] [6] + ' %</span>';
				popStr += '<br>民間信仰: <span class="religion">' + country[country_code] [7] + ' %</span>';
				popStr += '<br>ユダヤ教: <span class="religion">' + country[country_code] [8] + ' %</span>';
				popStr += '<br>その他: <span class="religion">' + country[country_code] [9] + ' %</span>';
			}
			L.marker([data[7],data[8]],{icon:worldFlag}).addTo(map).bindPopup(popStr);
		}
	}
}