Leaflet地図：「Jawg Maps」世界地図に国旗表示（２）。首都に全世界の国旗を表示。

先日、「Leaflet」＋「Jawg Maps」を使った世界地図に国旗表示機能を付けた。

クリックした場所に、その国の国旗を表示するタイプ。

今回、首都の場所に世界の国旗全てを表示するタイプを作成。

国旗のアイコンサイズ40px版と80px版を作成。

■ 世界地図：Jawg Maps ＋ 雨雲 ＋ 世界の国旗（40px）

■ 世界地図：Jawg Maps ＋ 雨雲 ＋ 世界の国旗（80px）

国旗をクリックすると、国と首都の名前を表示。

40px版では、国の任意の場所クリックで80pxのアイコン表示機能も追加。こちらの国名表記には、「Reverse - Nominatim」の逆ジオコーディングAPIサービスを利用。

ウクライナの首都はキーウと表示。

モルドバの首都はキシナウと表示。

国旗アイコンは、前回と同じく「ASTI アマノ技研」 の「National Flags of the World（v1.0.1）」を使用。コソボのアイコン名は「xk.png」に変更。

首都の位置データは、「ASTI アマノ技研」 の「Location Data of World Capitals（v1.0.11）」を使用。

CSV1行目の列名は削除し、ウクライナの首都名をキーウに変更、モルドバの首都名をキシナウに変更して使用。コソボの国コードもXKに変更している。

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

fetch('csv/capital.csv')
.then((response) => {
	if(response.ok) {
		return response.text();
	} else {
		throw new Error();
	}
})
.then((text) => {
	csv2map(text);
	map.setView([18, -10], 3);
})
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/40px/' + data[0].toLowerCase() + '.png', 
				iconSize: [40, 40],
				iconAnchor: [20, 24],
				popupAnchor: [0, -20],
			});
			var popStr = '<span class="country_code">' + data[0].toUpperCase() + '</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>';
			L.marker([data[7], data[8]], { icon: worldFlag }).addTo(map).bindPopup(popStr);
		}
	}
}