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 start = null, goal = null;		// 測定始点と終点
var sMarker, gMarker;			// 始点終点マーカ
function startOrGoal(e) {
    var info = document.getElementById("info");
    var imsg = "北緯 "+e.latlng.lat+" 東経 "+e.latlng.lng;
    if (!start) {			// 始点未設定なら
	start = e.latlng;		// クリックされた緯度経度
	// 始点マーカを生成しマップに貼り付けポップアップ文字列を登録
	sMarker = L.marker(start).addTo(mymap).bindPopup(imsg);
	info.innerHTML = imsg;		// 情報表示
    } else if (!goal) {
	goal = e.latlng;
	let lng1 = start.lng, lat1 = start.lat,	// 緯度経度を個別に取得
	    lng2 = goal.lng,  lat2 = goal.lat;
	// 終点マーカを生成しマップに貼り付けポップアップ文字列を登録
	gMarker = L.marker(goal).addTo(mymap).bindPopup(imsg);
	let d = distance(lng1, lat1, lng2, lat2);		// 距離を計算
	info.innerHTML = "距離: "+Math.round(d*100)/100+"m";	// 表示
    } else {				// 始点終点ともに存在するとき
	sMarker.remove(mymap);		// 始点マーカの除去
	gMarker.remove(mymap);		// 終点マーカの除去
	start = goal = sMarker = gMarker = null;
	info.innerHTML = "クリアしました";
    }
}
mymap.addEventListner('click', startOrGoal);