Newer
Older
j2321-tanakai / html / sisaku2.js
@j2321 j2321 on 25 May 3 KB 更新
var map = L.map('map', {
    center: [38.857138, 139.959705],
    zoom: 15,
  });
  
  L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
  }).addTo(map);
  
  const csvFilePath = 'sakura.csv'; // CSVファイルのパスを指定
  
  fetch(csvFilePath)
    .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 latIndex = headers.indexOf('緯度');
        var lngIndex = headers.indexOf('経度');
        var imgIndex = headers.indexOf('画像');
  
        if (latIndex === -1 || lngIndex === -1 || imgIndex === -1 ){
               throw new Error('CSVファイルのフォーマットが正しくありません');
        }                         
    // for (let i = startRow; i < endRow; i++) {
    //     const cells = rows[i].split(',');
    //     const longitude = parseFloat(cells[0]);
    //     const latitude = parseFloat(cells[1]);
    //     const img = parseFloat(cells[2]);
    //     if (!img || isNaN(longitude) || isNaN(latitude)) continue;
    //     marker.bindPopup(`
    //         <img src="${img}" alt="" loading="lazy" width="100%" height="auto"> 
    //     `)}; 

                                                                                                                                      
  
        // データ行を処理
        rows.slice(1).forEach(row => {
            var columns = row.split(',');
            var lat = parseFloat(columns[latIndex]);
            var lng = parseFloat(columns[lngIndex]);
            var img = columns[imgIndex];
  
            // 緯度経度が正しくない場合はスキップ
            if (!isNaN(lat) && !isNaN(lng)) {
                let marker = L.marker([lat, lng]).addTo(map).bindPopup(`
                    <div class="popup">
                        <div>
                            <img src="images/${img}" />
                        </div>
                    </div>
                `);
  
                //marker.on('click', function (e) {
                  //  e.originalEvent.stopPropagation(); // クリックイベントの伝播を停止
  
                    // 確認ダイアログを表示
                    //let choice = confirm(` の情報を開きますか?\nOK: 情報を開く\nキャンセル: 距離を測る`);
  
                    //if (choice) {
                      //  marker.openPopup(); // OKならポップアップを開く
                        //map.panTo(marker.getLatLng()); // マップのセンターをポップアップ位置に移動
                    //} else {
                        // ここでポップアップを閉じる
                      //  marker.closePopup();
  
                        // 距離測定を開始する処理
                        //measurePath({ latlng: marker.getLatLng(), originalEvent: {} });
                    //}
                //});
            }
        });
    })
// .catch(error => {
//     console.error('エラーが発生しました:', error);
// });
//somePromise()
  //.then((result) => {
    //// 成功時
 // })
  //.catch((error) => {
    //console.error(error);
 // });