function latlngdist(pos1, pos2) {    // leaflet.js標準 distanceTo()
    return pos1.distanceTo(pos2);    // を利用して距離(m)を求める
}
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) {  // 距離の加算を行ない結果を
    totalDist += delta;          // info要素に距離を表示する
    info.innerHTML = '距離: ' + Math.round(totalDist * 100) / 100 + 'm';
}
 
function resetPath() {          // 初期状態に戻す
    sMarker.remove(map);        // 始点マーカの除去
    gMarker.remove(map);        // 終点マーカの除去
    line.remove(map);           // 軌跡Polylineの除去
    line = sMarker = gMarker = null;
    path = [];
    totalDist = 0;
    map.doubleClickZoom.enable();  // ダブルクリックズーム許可
    info.innerHTML = 'クリアしました';
}
 
function measurePath(e) {         // クリック時の主となる処理
    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) {
        // ダブルクリック等により同じ箇所で2度クリックが起きた場合は
        return null;  // 何もせず return
    }
    path.push(e.latlng);        // クリック緯度経度を配列に追加
    if (path.length == 1) {     // 始点未設定なら
        // 始点終点マーカを生成しマップに貼り付けポップアップ文字列を登録
        sMarker = L.marker(path[0]).addTo(map).bindPopup(imsg);
        gMarker = L.marker(path[0]).addTo(map).bindPopup(imsg);
        line = L.polyline(path, lineprop).addTo(map); // polyline生成
        info.innerHTML = imsg;    // 情報表示
    } else {                    // 2個目以後のポイント打ちなら
        line.addLatLng(e.latlng);  // polylineにクリック点を追加
        gMarker.setLatLng(e.latlng); // 終点マーカをそこに移動
    }
    if (path.length > 1) {        // 2個以上点が打たれたら計算
        updatedistance(latlngdist(path[path.length - 2], path[path.length - 1]));
    }
    if (e.originalEvent.shiftKey) {  // SHIFT+クリックで
        resetPath(e);           // 終了
    }
}
 
function removePoint(e) {       // 1つ取消
    if (path.length > 1) {      // 2つ以上点があれば
        let rm = path.pop();    // 点保持配列の末尾を抜き取る
        updatedistance(-latlngdist(rm, path[path.length - 1])); // 引き算
        line.setLatLngs(path);   // polylineの点リストを更新
        gMarker.setLatLng(path[path.length - 1]);  // 終点マーカを最終点に移動
        map.panTo(path[path.length - 1]); // 最終点が見えるようにする
    } else {                    // polylineの点が1つ以下なら
        info.innerHTML = '始点は削れません。'
    }
}
 
map.on('click', measurePath);    // クリックイベントで measurePath()
map.on('contextmenu', removePoint);  // 右クリックで removePoint()
// id="undo" のボタンクリックで「1つ取消」
document.getElementById('undo').addEventListener('click', removePoint);
// id="finish" のボタンクリックで「終了」
document.getElementById('finish').addEventListener('click', resetPath);