地図データを扱う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>