Leaflet地図：複数地点マーカー表示。CSVファイルをURL指定。

地図データを扱うJavaScript ライブラリ「Leaflet」を使ってKMLやCSVファイルで地点表示をいくつか行ってきた。

今回、シンプルなCSVファイルをURLで指定するタイプを作成。

CSV形式は、以下。

地点名,緯度,経度

≪CSVサンプル≫

月桂冠,34.929136,135.76161
京姫,34.9303522,135.7576211
神聖,34.9311122,135.7616193

≪プログラムサンプル≫

https://ok2nd.github.io/leaflet/csv2.html?csv=csv/kyoto-fushimi.csv&name=京都伏見酒蔵マップ

≪プログラムソース一部抜粋≫

let arg = new Object;
let pair = location.search.substring(1).split('&');
for (var i=0; pair[i]; i++) {
	let kv = pair[i].split('=');
	arg[kv[0]] = kv[1];
}
if (typeof arg.name != 'undefined' && arg.name != '') {
	let title = decodeURI(arg.name);
	document.title = title;
}
if (typeof arg.csv === 'undefined' || arg.csv == '') {		// arg.csv: csvファイル名（'xxx/xxx.csv'）
	let div = document.getElementById('container');
	let href = location.href.split('?');
	div.innerHTML = '<div class="msg"><p>CSVファイルを指定してください。</p><p>例：' + href[0] + '<span class="emp">?csv=xxx/xxx.csv</span></p></div>';
} else {
	fetch(arg.csv)
	.then((response) => {
		if(response.ok) { // ステータスがokならば
			return response.text(); // レスポンスをテキストとして変換する
		} else {
			throw new Error();
		}
	})
	.then((text) => {
		csv2map(text);
	})
	.catch((error) => {
		let div = document.getElementById('container');
		div.innerHTML = '<div class="msg"><p>CSVファイル（<span class="emp">' + arg.csv + '</span>）が見つかりません。</span></p></div>';
	})
}
function csv2map(csv) {
	var place = Array();
	line = csv.split("\n");
	for (var i=0; i<line.length; ++i) {
		data = line[i].split(',');
		if (data.length > 2) {
			place.push([data[0], data[1], data[2]]);
		}
	}
	place2map(place, false, false);	// place[0] = ['地名', 緯度, 経度];
}