Newer
Older
leaflet / map / web / tanakai-map / tanakai-map.js
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);
 
var csvFilePath = 'index.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 nameIndex = headers.indexOf('場所名');
      var latIndex = headers.indexOf('緯度');
      var lngIndex = headers.indexOf('経度');
      var flyIndex= headers.indexOf('番号')
      var imgIndex = headers.indexOf('画像');
      var addrIndex = headers.indexOf('住所');
      var bunkenIndex = headers.indexOf('参考文献')
 
      if (nameIndex === -1 || latIndex === -1 || lngIndex === -1 || imgIndex === -1 || addrIndex === -1 ||bunkenIndex === -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 bunken = columns[bunkenIndex];
 
          // 緯度経度が正しくない場合はスキップ
          if (!isNaN(lat) && !isNaN(lng)) {
              let marker = L.marker([lat, lng]).addTo(map).bindPopup(`
                  <div class="popup">
                      <h2>${name}</h2>
                      <div>
                          <p class="address">${addr}</p>
                          <a href="${bunken}">参考文献</a>
                          <img src="images/${img}" alt="${name}" />
                      </div>
                  </div>
              `);
 
              marker.on('click', function (e) {
                  e.originalEvent.stopPropagation(); // クリックイベントの伝播を停止
 
                  // 確認ダイアログを表示
                  let choice = confirm(`${name} の情報を開きますか?\nOK: 情報を開く\nキャンセル: 距離を測る`);
 
                  if (choice) {
                      marker.openPopup(); // OKならポップアップを開く
                      map.panTo(marker.getLatLng()); // マップのセンターをポップアップ位置に移動
                  } else {
                      // ここでポップアップを閉じる
                      marker.closePopup();
 
                      // 距離測定を開始する処理
                      measurePath({ latlng: marker.getLatLng(), originalEvent: {} });
                  }
              });
          }
      });
  })
  .catch(error => {
      console.error('エラーが発生しました:', error);
  });
  
  let currentLocationMarker = null;
 
    if (navigator.geolocation) {
    	const shouldLocate = confirm("現在地を取得しますか?");
    	
    	if (shouldLocate) {
      navigator.geolocation.watchPosition(
        position => {
          const lat = position.coords.latitude;
          const lng = position.coords.longitude;
 
          if (!currentLocationMarker) {
            currentLocationMarker = L.marker([lat, lng])
              .addTo(map)
              .bindPopup('現在地')
              .openPopup();
          } else {
            currentLocationMarker.setLatLng([lat, lng]);
          }
        },
        error => {
          console.error('位置情報の取得に失敗しました:', error.message);
        },
        {
          enableHighAccuracy: true,
          maximumAge: 10000,
          timeout: 5000
        }
      );
    	}
    } else {
      alert('このブラウザは位置情報に対応していません');
    }