晴歩雨描

晴れた日は外に出て歩き、雨の日は部屋で絵を描く

Leaflet地図:「日本)鉄道難読駅マップ」を作成。CSV使用。

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

今回、「日本)鉄道難読駅マップ」を作成。

駅マーカーをクリックすると読みを確認できる。

難読駅データは、以下の「ORIGAMI - 日本の伝統・伝承・和の心」の「日本全国難読駅名一覧」を使わせてもらった。一部駅名は修正して使用。

上記「難読駅データ」に以下の「駅データ.jp」の駅名をマッチングして緯度経度を合わせたCSVファイルを使用。一部、マッチングミス(同じ駅名がある場合)で違う場所に紐づいている駅があるかもしれない。

JavaScriptサンプルソース(抜粋)≫

<script>
fetch('csv/nandoki-eki.csv')
.then((response) => {
	if(response.ok) {
		return response.text();
	} else {
		throw new Error();
	}
})
.then((text) => {
	csv2map(text);
})
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) {
			var popStr = '<a class="ekimei" href="https://www.google.co.jp/search?q=' + data[2] + '駅" target="_blank">' + data[2] + '</a>';
			popStr += '<br>読み:<span class="yomi">' + data[6] + '</span>';
			popStr += '<br>' + data[7];
			place.push([data[2], data[4], data[5], popStr]);
		}
	}
	place2map(place);	// place[0] = ['地名', 緯度, 経度, 'ポップアップ文字']
}
</script>