Newer
Older
j2321-tanakai / html / sisaku.js
@j2321 j2321 on 31 Aug 4 KB 更新
let fontSize = 16; 
 
function changeFontSize(change) { 
	fontSize += change; 
	if (fontSize < 10) fontSize = 10;
	document.getElementById("moji").style.fontSize = fontSize + "px";
}
 
function reset() {
	fontSize = 16; 
	document.getElementById("moji").style.fontSize = fontSize + "px"; 
}



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 imgIndex = headers.indexOf('画像');
      var addrIndex = headers.indexOf('住所');

      if (nameIndex === -1 || latIndex === -1 || lngIndex === -1 || imgIndex === -1 || addrIndex === -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];

          // 緯度経度が正しくない場合はスキップ
          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>
                          <img src="images/${img}" alt="${name}" />
                          <p><a href = "#${name}">詳細はコチラ</a></p>
                      </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('このブラウザは位置情報に対応していません');
    }