// var mymap = L.map("mymap");
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 distance(x1, y1, x2, y2) {	// ヒュベニ式による距離概算
    rx = 6378137;			// 赤道半径(m) WGS84
    ry = 6356752.314;			// 極半径(m)   WGS84
    e2=(rx*rx-ry*ry)/rx/rx;		// 離心率 E^2
    dx = (x2-x1)*Math.PI/180;		// 経度の差をラジアン変換
    dy = (y2-y1)*Math.PI/180;		// 緯度の差をラジアン変換
    my = (y1+y2)/2.0*Math.PI/180;	// 緯度の平均をラジアン変換
    w = Math.sqrt(1-e2*Math.sin(my)*Math.sin(my));
    m = rx*(1-e2)/Math.pow(w,3);		// 子午線曲率半径
    n = rx/w;				// 卯酉線曲率半径
    return Math.sqrt(Math.pow(dy*m,2) + Math.pow(dx*n*Math.cos(my),2));
}

var path = [];
var line = null;
var lineprop = { color: 'blue', weight: 4 };
var sMarker, gMarker;			// 始点終点マーカ
var totalDist =0;
var info = document.getElementById("info");
function updatedistance(delta) {
    totalDist += delta;
    info.innerHTML = '距離: '+Math.round(totalDist*100)/100+'m';
}

function resetPath() {
sMarker.remove(mymap);		// 始点マーカの除去
gMarker.remove(mymap);		// 終点マーカの除去
line.remove(mymap);			// 軌跡Polylineの除去
line = sMarker = gMarker = null;
path = [];
totalDist = 0;
mymap.doubleClickZoom.enable();	// ダブルクリックズーム許可
info.innerHTML = 'クリアしました';
mymap.doubleClickZoom.enable();
}

function measurePath(e) {
    var imsg = "北緯 "+e.latlng.lat+" 東経 "+e.latlng.lng;
    mymap.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(mymap).bindPopup(imsg);
        gMarker = L.marker(path[0]).addTo(mymap).bindPopup(imsg);
        line = L.polyline(path, lineprop).addTo(mymap)	// 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]));
        updatedistance(distance(
            path[path.length - 2].lng, path[path.length - 2].lat,
            path[path.length - 1].lng, path[path.length - 1].lat
        ));
    }
    if (e.originalEvent.shiftKey) {	// SHIFT+クリックで
        resetPath(e);			// 終了
    }
}
    function removePoint(e) {		// 1つ取消
        if (path.length > 1) {		// 2つ以上点があれば
        let rm = path.pop();		// 点保持配列の末尾を抜き取る
        updatedistance(-distance(
            rm.lng, rm.lat,
            path[path.length - 1].lng, path[path.length - 1].lat));
        line.setLatLngs(path);		// polylineの点リストを更新
        gMarker.setLatLng(path[path.length-1]);	// 終点マーカを最終点に移動
        mymap.panTo(path[path.length-1]);	// 最終点が見えるようにする
        } else {				// polylineの点が1つ以下なら
        info.innerHTML = '始点は削れません。'
        }
    }

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