// 折れ線(PolyLine)の長さ
     
//var mymap = L.map('mymap').setView([38.891, 139.824], 16);
//L.tileLayer('http://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
// attribution:
//   '<a href="http://maps.gsi.go.jp/development/ichiran.html">国土地理院</a>'
//}).addTo(mymap);
 
function latlngdist(pos1, pos2) { // leaflet.js の distanceTo() を利用して距離(m)を求める
    return pos1.distanceTo(pos2);
}

var path = []; // クリックしたすべての点を保持
var line = null; // polylineオブジェクトを保持
var lineprop = { // polylineのプロパティ
    color: 'navy', opacity: 0.6, weight: 8
};
var sMarker, gMarker; // 始点終点マーカ
var totalDist = 0; // 積算距離
var info = document.getElementById('info'); // 情報表示用要素

function updatedistance(delta) { // 距離の加算を行ない結果を info要素に表示
    totalDist += delta;
    info.innerHTML = '距離: ' + Math.round(totalDist * 100) / 100 + 'm';
}

function resetPath() { // 初期状態に戻す
    if (sMarker) sMarker.remove();
    if (gMarker) gMarker.remove();
    if (line) line.remove();
    line = sMarker = gMarker = null;
    path = [];
    totalDist = 0;
    map.doubleClickZoom.enable(); // ダブルクリックズーム許可
    info.innerHTML = 'クリアしました';
}

function measurePath(e, fromExisting = false) { // クリック時の処理
    var imsg = '北緯 ' + e.latlng.lat + ' 東経 ' + e.latlng.lng;
    map.doubleClickZoom.disable(); // ダブルクリックズーム禁止

    if (path.length > 1 &&
        e.latlng.lat === path[path.length - 1].lat &&
        e.latlng.lng === path[path.length - 1].lng) {
        return null;
    }

    path.push(e.latlng);

    if (!fromExisting) { // 既存ピンでない場合、新しいマーカーを作成
        if (path.length === 1) { // 始点未設定なら
            sMarker = L.marker(path[0]).addTo(map).bindPopup(imsg);
            gMarker = L.marker(path[0]).addTo(map).bindPopup(imsg);
        } else {
            gMarker.setLatLng(e.latlng); // 終点マーカーの移動
        }
    }

    // **Polylineの処理を統一**
    if (!line) {
        line = L.polyline(path, lineprop).addTo(map); // 最初の線を作成
    } else {
        line.addLatLng(e.latlng); // 追加点を線に反映
    }

    if (path.length > 1) { // 2点以上なら距離計算
        updatedistance(latlngdist(path[path.length - 2], path[path.length - 1]));
    }

    if (e.originalEvent && e.originalEvent.shiftKey) { // SHIFT+クリックで終了
        resetPath();
    }
}

function removePoint() { // 1つ取消
    if (path.length > 1) {
        let rm = path.pop();
        updatedistance(-latlngdist(rm, path[path.length - 1]));
        line.setLatLngs(path);
        gMarker.setLatLng(path[path.length - 1]);
        map.panTo(path[path.length - 1]);
    } else {
        info.innerHTML = '始点は削れません。';
    }
}

map.on('click', measurePath);
map.on('contextmenu', removePoint);
document.getElementById('undo').addEventListener('click', removePoint);
document.getElementById('finish').addEventListener('click', resetPath);
