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 = 'CSV/place.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('経度');
    var imgIndex = headers.indexOf('画像');
    var addrIndex = headers.indexOf('住所');
    var descIndex = headers.indexOf('説明');

    if (nameIndex === -1 || latIndex === -1 || lngIndex === -1 || imgIndex === -1
    || addrIndex === -1 ||descIndex === -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]);
      var img = columns[imgIndex];
      var addr = columns[addrIndex];
      var desc = columns[descIndex];

      // 緯度経度が正しくない場合はスキップ
      if (!isNaN(lat) && !isNaN(lng)) {
        // マーカーを追加し、ポップアップに文字と画像を表示
        L.marker([lat, lng]).addTo(map).bindPopup(`
          <div class="popup">
            <h2>${name}<h2>
            <div>
              <p class= "address">${addr}</p>
	      <p>${desc}</p>
              <img src="images/${img}" alt="${name}"/>
            </div>
          </div>
        `);
      }
    });
  })
  .catch(error => {
    console.error('エラーが発生しました:', error);
  });
