// mapping.jsの部分
const map = L.map('map').setView([39.0192, 139.7523], 11); //setview：開いたときに最初に表示される場所を指定する。

var osmTile = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors'
}).addTo(map);

// location.jsの部分
let currentLocationMarker = null;
let geoErrorShown = false;

if (navigator.geolocation) {
  const ask = confirm("現在地を取得しますか？");

  if (ask) {
    navigator.geolocation.watchPosition(
      position => {
        const lat = position.coords.latitude;
        const lng = position.coords.longitude;
        geoErrorShown = false;
        
        if(!currentLocationMarker) {
          currentLocationMarker = L.marker([lat, lng])
            .addTo(map)
            .bindPopup("現在地")
            .openPopup();
         
         map.setView([lat, lng], 16);
        } else {
           currentLocationMarker.setLatLng([lat, lng]);
         }
      },
   
      error => {
        if (!geoErrorShown) {
          alert("現在地が取得できませんでした");
          geoErrorShown = true;
        }
      },
	      
      {
        enableHighAccuracy: false,
        timeout: 10000,
        maximumAge: 30000
      }
    );
  }

} else {
    alert("このブラウザでは現在地取得が使えません");
}
 
// OSRMルート表示用の変数
let routeLayer = null;

// 現在地からchten.csvの地点までのルートを引く関数
async function routeFromCurrentLocation(toLat, toLng) {
  //現在地が未取得の場合
  if (!currentLocationMarker) {
    alert("先に現在地を取得してください");
    return;
  }
  
  // 現在地の座標
  const from = currentLocationMarker.getLatLng();
  const fromLat = from.lat;
  const fromLng = from.lng;

  // OSRMのURL
  const url = `https://router.project-osrm.org/route/v1/driving/${fromLng},${fromLat};${toLng},${toLat}?overview=full&geometries=geojson`;

  // OSRMへアクセス
  const response = await fetch(url);
  const data = await response.json();

  if (!data.routes || data.routes.length === 0) {
    alert("ルートが見つかりません");
    return;
  }

  // ルート座標(lng,lat → lat,lngに変換)
  const routeCoords = data.routes[0].geometry.coordinates.map(c => [c[1], c[0]]);

  // 距離(km)と時間(分)
  const distance = (data.routes[0].distance / 1000).toFixed(2);
  const duration = (data.routes[0].duration / 60).toFixed(1);

  // 既存ルートを削除
  if (routeLayer) {
    map.removeLayer(routeLayer);
  }

  // ルート描画
  routeLayer = L.polyline(routeCoords, {
    weight: 5
  }).addTo(map);

  map.fitBounds(routeLayer.getBounds());

  alert(`距離：${distance} km\n時間：約${duration}分`);
}

// データ読込み
(() => {
    var customLayer = L.geoJson(null, {	// omnivoreに引き渡すGeoJSONレイヤ
    onEachFeature: function(f, osmTile) {	// このブロックは
	let p = f.properties;		// triangle-umap.js と同じ
	if (p) {
	    let name = p.name, desc = p.description;		// 
            var urla = desc.match(/\[\[(.+)\]\]/g);
            if (urla !== null){
              var url = urla[0].substr(2, urla[0].length-4);
            }
	    let popup = `<b>${name}</b><br>${desc.replace(/\\n/g, '<br>').replace(/\[\[(.+)\]\]/g, `<a href=\"${url}\">${url}</a>`)}<br><button onclick = "routeFromCurrentLocation(${latNum}, ${lngNum})">現在地からの道のりを見る</button>`;
	    layer.bindPopup(popup);	// 
	}
    }
    });
    var gjl = omnivore.geojson("mapping.geojson", null, customLayer);
    // ↑引数は順に: ファイル, 解析オプション, カスタムレイヤ
    gjl.on("ready", function() {	// 'ready' イベントに読み終わったときの処理
      jsonmap.fitBounds(gjl.getBounds());	// 読み取り失敗時は 'error' イベント
    });
    gjl.addTo(jsonmap);		// マップに足す
})();
const latNum = parseFloat(lat); // 緯度・経度を数値に変換
const lngNum = parseFloat(lng);
const layer = ["菓子類","その他食料品","その他食料品・飲料","タバコ類","衣類","化粧品・香水","病院","クリニック","調剤薬局","ドラッグストア"];
      
//var ovlLayers  = {};
/*
var item = desc.split("\\n")[0];
marker = L.marker([latNum, lngNum], {
  icon: L.divIcon({
    html: '<a class="marker">あ</a>',
    className: 'marker1', 
    iconSize: [40, 40]
  }),
}).addTo(map) //L.marker()で地図上にマーカーを立てるように指示 bindPopupはマーカーをクリックした時にふきだしを表示させる
  .bindPopup(`<b>${name}</b><br>${desc.replace(/\\n/g, '<br>').replace(/\[\[(.+)\]\]/g, `<a href=\"${url}\">${url}</a>`)}<br><button onclick = "routeFromCurrentLocation(${latNum}, ${lngNum})">現在地からの道のりを見る</button> 
        `); //これを押すことにより、現在地から地点までのルートを計算して表示
//ovlLayers[item][item] = marker;
//console.log(ovlLayers);
*/
var baseLayers = {'OpenStreetMap': osmTile};
//   マーカーを2つオーバーレイレイヤに指定
//   ベースレイヤとオーバーレイレイヤをマップに追加
L.control.layers(baseLayers, ovlLayers).addTo(map);