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) {
    return pos1.distanceTo(pos2);
}
var path = [];
var line = null;
var polygon = null;
var lineprop = {
    color: 'navy', opacity: 0.6, weight: 8
};
var sMarker, gMarker;
var totalDist = 0;
var totalArea = 0;
var info = document.getElementById('info');

function updatedistance(delta) {
    totalDist += delta;
    updateInfo();
}

function updateInfo() {
    info.innerHTML = '距離: ' + Math.round(totalDist*100)/100 + 'm, 面積: ' + Math.round(totalArea*100)/100 + ' km²';
    if (totalArea > 602.98) {
        info.innerHTML += '<br><strong>クリア!</strong>';
    }
}

function resetPath() {
    if (sMarker) sMarker.remove(mymap);
    if (gMarker) gMarker.remove(mymap);
    if (line) line.remove(mymap);
    if (polygon) polygon.remove(mymap);
    line = sMarker = gMarker = polygon = null;
    path = [];
    totalDist = 0;
    totalArea = 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) {
        return null;
    }
    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)
        info.innerHTML = imsg;
    } else {
        line.addLatLng(e.latlng);
        gMarker.setLatLng(e.latlng);
    }
    if (path.length > 1) {
        updatedistance(latlngdist(path[path.length-2], path[path.length-1]));
    }
    if (path.length > 2) {
        if (polygon) {
            mymap.removeLayer(polygon);
        }
        polygon = L.polygon(path, {color: 'red', fillOpacity: 0.2}).addTo(mymap);
        
        var turfPolygon = turf.polygon([path.map(p => [p.lng, p.lat])]);
        totalArea = turf.area(turfPolygon) / 1000000; // km²に変換
        
        updateInfo();
    }
    if (e.originalEvent.shiftKey) {
        resetPath(e);
    }
}

function removePoint(e) {
    if (path.length > 1) {
        var rm = path.pop();
        updatedistance(-latlngdist(rm, path[path.length-1]));
        line.setLatLngs(path);
        gMarker.setLatLng(path[path.length-1]);
        mymap.panTo(path[path.length-1]);
        
        if (path.length > 2) {
            if (polygon) {
                mymap.removeLayer(polygon);
            }
            polygon = L.polygon(path, {color: 'red', fillOpacity: 0.2}).addTo(mymap);
            
            var turfPolygon = turf.polygon([path.map(p => [p.lng, p.lat])]);
            totalArea = turf.area(turfPolygon) / 1000000; // km²に変換
            
            updateInfo();
        } else {
            totalArea = 0;
            updateInfo();
        }
    } else {
        info.innerHTML = '始点は削れません。'
    }
}

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