Newer
Older
j2321-tanakai / fetch.js
var map = L.map("map").setView([38.891, 139.824], 16);
L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 attribution:
   '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
 
    // CSVファイルのURLを指定
    var csv = 'place.csv'; // CSVファイルのパスを指定
 
    // CSVをfetchで取得
    fetch(csv)
      .then(response => {
        if (!response.ok) {
          throw new Error('CSVファイルの取得に失敗しました');
        }
        return response.text();
      })
      .then(csvText => {
        var rows = csvText.trim().split('\n'); // 行ごとに分割
        var headers = rows[0].split(','); // ヘッダーを取得
 
        // ヘッダーを元に文字列を取得
        var nameIndex = headers.indexOf('場所名');
        var latIndex = headers.indexOf('緯度');
        var lngIndex = headers.indexOf('経度');
 
        if (nameIndex === -1 || latIndex === -1 || lngIndex === -1) {
          throw new Error('CSVファイルのフォーマットが正しくありません');
        }
 
        // データ行を処理
        rows.slice(1).forEach(row => {
          var columns = row.split(',');
          var name = columns[nameIndex];
          var lat = parseFloat(columns[latIndex]);
          var lng = parseFloat(columns[lngIndex]);
 
          // 緯度経度が正しくない場合はスキップ
          if (!isNaN(lat) && !isNaN(lng)) {
            L.marker([lat, lng]).addTo(map).bindPopup(`<b>${name}</b>`);
          }
        });
      })
      .catch(error => {
        console.error('エラーが発生しました:', error);
      });