


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()
    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(mymap);		// ????????????????
    gMarker.remove(mymap);		// ????????????????
    line.remove(mymap);			// ????Polyline??????
    line = sMarker = gMarker = null;
    path = [];
    totalDist = 0;
    mymap.doubleClickZoom.enable();	// ????????????????????????
    info.innerHTML = '??????????????';
}
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]));
    }
    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]);	// ????????????????????????
	mymap.panTo(path[path.length-1]);	// ????????????????????????
    } else {				// polyline??????1??????????
	info.innerHTML = '??????????????????'
    }
}
mymap.on('click', measurePath);		// ?????????????????? measurePath()
mymap.on('contextmenu', removePoint);	// ???????????? removePoint()
// id="undo" ????????????????????1????????
document.getElementById('undo').addEventListener('click', removePoint);
// id="finish" ??????????????????????????
document.getElementById('finish').addEventListener('click', resetPath);
