CSV形式の地物情報をLeafletに取り込みます。
CSVファイルの準備
簡単なCSVファイルを準備する。プラグインがUnicodeのみの対応であるため、日本語が含まれる場合には文字コードに注意する必要がある。
name,lat,lon
新宿駅,35.689564,139.700410
新宿御苑,35.685273,139.709422
明治神宮,35.677564,139.699337
新国立劇場,35.682588,139.685904使用するプラグイン
今回はOSSライブラリのPapa Parseを利用します。
- 大きなファイルサイズにも対応可能
- CSV⇔JSONで変換可能
- ローカルファイルにも対応
- 区切り文字の自動検出機能
- jQueryとの併用可能
- ライセンスはMIT
使い方
まず、HTMLファイルを作成し、Papa Parseのjsファイルを読み込みます。また、シンプルなGETリクエストでサーバー通信を行うために、jQueryも利用します。
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://unpkg.com/papaparse@5.4.1/papaparse.min.js"></script>サンプルのdata.csvデータを取得して、Papa.parse関数の引数として、fileオブジェクトを渡します。大きなファイルサイズのデータを扱う場合は、stepプロパティを使用し、ストリーミングでデータを取得します。そうすることで、csvデータを1行づつ取得できます。
$.get('./data.csv', function(csvString) {
var data = Papa.parse(csvString, {header: true, dynamicTyping: true}).data;
for (var i in data) {
var row = data[i];
L.marker([row.lat, row.lon]).bindPopup(row.name).addTo(_map);
}
});全体コード
<html lang="ja">
<head>
<title>Leafletのマーカー（CSV）の表示</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://unpkg.com/papaparse@5.4.1/papaparse.min.js"></script>
</head>
<body>
<div id="map" style="width:100%;height:100%"></div>
<script>
//表示位置を設定
var _map = L.map('map');
//初期表示時に中心座標とズームレベルを設定
_map.setView([35.6895, 139.69172], 10);
//初期表示時の表示地図を設定
L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
attribution: "<a href='https://maps.gsi.go.jp/development/ichiran.html' target='_blank'>国土地理院</a>"
}).addTo(_map);
//マーカー（CSV）の表示
$.get('./data.csv', function(csvString) {
var data = Papa.parse(csvString, {header: true, dynamicTyping: true}).data;
for (var i in data) {
var row = data[i];
L.marker([row.lat, row.lon]).bindPopup(row.name).addTo(_map);
}
});
</script>
</body>
</html>
コメント