Improve GIS import and add measurement tools

wwwroot/js/lme-map.js

@@ -7,9 +7,16 @@ const lmeState = {
     cadastreLayers: ["CP.CadastralParcel", "codice_plla", "CP.CadastralZoning", "fabbricati"],
     cadastreOpacity: 0.75,
     imported: null,
+    importedMeasurements: null,
     drawings: null,
+    drawingMeasurements: null,
     drawControl: null,
+    activeDrawHandler: null,
     drawEventsBound: false,
+    importParcelOnly: true,
+    showImportedMeasurements: false,
+    showDrawingMeasurements: true,
+    measurementRefreshTimer: null,
     gpsMarker: null,
     gpsAccuracy: null,
     gpsTrail: null,
@@ -40,7 +47,11 @@ window.lmeMap = {
     clearMapElements,
     fitImported,
     clearImported,
+    setImportParcelOnly,
+    setImportedMeasurementsVisible,
+    setDrawingMeasurementsVisible,
     addProjectMarker,
+    startMeasurementDrawing,
     setDrawToolsVisible,
     clearDrawings,
     createProjectSnapshot,
@@ -114,6 +125,8 @@ function init() {
     lmeState.currentBase = lmeState.baseLayers.satellite.addTo(lmeState.map);
     lmeState.imported = L.featureGroup().addTo(lmeState.map);
     lmeState.drawings = L.featureGroup().addTo(lmeState.map);
+    lmeState.importedMeasurements = L.layerGroup().addTo(lmeState.map);
+    lmeState.drawingMeasurements = L.layerGroup().addTo(lmeState.map);
     lmeState.selectedParcelsLayer = L.featureGroup().addTo(lmeState.map);
     lmeState.gpsParcelLayer = L.featureGroup().addTo(lmeState.map);
     lmeState.gpsTrail = L.polyline([], { color: "#f97316", weight: 4, opacity: 0.85 }).addTo(lmeState.map);
@@ -133,7 +146,10 @@ function init() {
             L.popup().setLatLng(event.latlng).setContent(info).openOn(lmeState.map);
         }
     });
-    lmeState.map.on("moveend", () => void updateAzureAttribution());
+    lmeState.map.on("moveend", () => {
+        void updateAzureAttribution();
+        scheduleMeasurementRefresh();
+    });
 
     document.getElementById("closeWmsPreview")?.addEventListener("click", closeCadastrePreview);
     document.getElementById("wmsPreview")?.addEventListener("click", event => {
@@ -417,7 +433,8 @@ function bindFileImport() {
         }
 
         try {
-            const geojson = await readGisFile(file);
+            const result = await readGisFile(file);
+            const geojson = result.geojson;
             const layer = L.geoJSON(geojson, {
                 style: { color: "#22c55e", weight: 3, opacity: 0.95, fillOpacity: 0.18 },
                 pointToLayer: (feature, latlng) => L.circleMarker(latlng, { radius: 7, color: "#22c55e", fillColor: "#ffffff", fillOpacity: 0.9 }),
@@ -427,10 +444,18 @@ function bindFileImport() {
                 }
             }).addTo(lmeState.imported);
             fitLayer(layer);
-            setInfo(`Caricato ${file.name}`);
+            refreshImportedMeasurements();
+            const featureCount = geojson.features.length;
+            const ignored = result.ignoredCount
+                ? `; esclusi ${result.ignoredCount} elementi non particella`
+                : "";
+            const reprojected = result.reprojected ? "; coordinate Web Mercator convertite" : "";
+            setInfo(`Caricato ${file.name}: ${featureCount} elementi${ignored}${reprojected}.`);
             updateGpsInsideState();
         } catch (error) {
             setInfo(`File non leggibile: ${error.message}`);
+        } finally {
+            event.target.value = "";
         }
     });
     lmeState.fileImportBound = true;
@@ -440,28 +465,336 @@ async function readGisFile(file) {
     const lowerName = file.name.toLowerCase();
 
     if (lowerName.endsWith(".geojson") || lowerName.endsWith(".json")) {
-        return JSON.parse(await file.text());
+        const text = (await readFileText(file)).replace(/^\uFEFF/, "").trim();
+        if (!text) {
+            throw new Error("GeoJSON vuoto");
+        }
+        let parsed;
+        try {
+            parsed = JSON.parse(text);
+            if (typeof parsed === "string") {
+                parsed = JSON.parse(parsed);
+            }
+        } catch (error) {
+            throw new Error(`GeoJSON non valido: ${error.message}`);
+        }
+        return normalizeGeoJson(parsed, file.name);
     }
 
     if (lowerName.endsWith(".kml")) {
-        return kmlTextToGeoJson(await file.text());
+        return normalizeKmlFiles([{ name: file.name, text: await readFileText(file) }]);
     }
 
     if (lowerName.endsWith(".kmz")) {
         const zip = await JSZip.loadAsync(await file.arrayBuffer());
-        const kmlName = Object.keys(zip.files).find(name => name.toLowerCase().endsWith(".kml"));
-        if (!kmlName) {
+        const kmlEntries = Object.values(zip.files).filter(entry =>
+            !entry.dir
+            && !entry.name.startsWith("__MACOSX/")
+            && entry.name.toLowerCase().endsWith(".kml"));
+        if (!kmlEntries.length) {
             throw new Error("KMZ senza file KML interno");
         }
-        return kmlTextToGeoJson(await zip.files[kmlName].async("text"));
+        const files = await Promise.all(kmlEntries.map(async entry => ({
+            name: entry.name,
+            text: await entry.async("text")
+        })));
+        return normalizeKmlFiles(files);
     }
 
     throw new Error("Formato supportato: KML, KMZ, GeoJSON");
 }
 
-function kmlTextToGeoJson(text) {
+function readFileText(file) {
+    if (typeof file.text === "function") {
+        return file.text();
+    }
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(String(reader.result || ""));
+        reader.onerror = () => reject(new Error("lettura del file non riuscita"));
+        reader.readAsText(file);
+    });
+}
+
+function normalizeGeoJson(value, fileName) {
+    let root;
+    if (Array.isArray(value)) {
+        root = {
+            type: "FeatureCollection",
+            features: value.map(item => item?.type === "Feature"
+                ? item
+                : { type: "Feature", properties: {}, geometry: item })
+        };
+    } else if (value?.type === "FeatureCollection") {
+        root = value;
+    } else if (value?.type === "Feature") {
+        root = { type: "FeatureCollection", features: [value], crs: value.crs };
+    } else if (isGeoJsonGeometry(value)) {
+        root = {
+            type: "FeatureCollection",
+            features: [{ type: "Feature", properties: {}, geometry: value }],
+            crs: value.crs
+        };
+    } else {
+        throw new Error("il contenuto non e' un Feature, una geometria o una FeatureCollection");
+    }
+
+    root.features = (root.features || []).filter(feature => feature?.type === "Feature" && feature.geometry);
+    if (!root.features.length) {
+        throw new Error("nessuna geometria presente nel GeoJSON");
+    }
+    root.features.forEach(feature => {
+        feature.properties = feature.properties && typeof feature.properties === "object"
+            ? feature.properties
+            : {};
+        feature.properties._lmeSource = feature.properties._lmeSource || fileName;
+    });
+
+    const crsText = root.crs ? JSON.stringify(root.crs).toUpperCase() : "";
+    const coordinates = collectGeoJsonCoordinates(root);
+    const hasProjectedCoordinates = coordinates.some(point => Math.abs(point[0]) > 180 || Math.abs(point[1]) > 90);
+    const webMercator = /EPSG[^0-9]*(3857|900913)/.test(crsText)
+        || (!crsText && hasProjectedCoordinates && coordinates.every(point =>
+            Math.abs(point[0]) <= 20037508.35 && Math.abs(point[1]) <= 20048966.1));
+
+    if (webMercator) {
+        root.features.forEach(feature => {
+            feature.geometry = transformGeoJsonGeometry(feature.geometry, webMercatorToWgs84);
+        });
+    } else if (crsText && !/(4326|4258|CRS84|CRS:84)/.test(crsText)) {
+        throw new Error(`sistema di coordinate non supportato (${crsText.slice(0, 80)})`);
+    }
+
+    const normalizedCoordinates = collectGeoJsonCoordinates(root);
+    if (!normalizedCoordinates.length || normalizedCoordinates.some(point =>
+        !Number.isFinite(point[0])
+        || !Number.isFinite(point[1])
+        || Math.abs(point[0]) > 180
+        || Math.abs(point[1]) > 90)) {
+        throw new Error("coordinate non valide o non espresse in WGS84/EPSG:4326");
+    }
+
+    delete root.crs;
+    return { geojson: root, ignoredCount: 0, reprojected: webMercator };
+}
+
+function isGeoJsonGeometry(value) {
+    return [
+        "Point",
+        "MultiPoint",
+        "LineString",
+        "MultiLineString",
+        "Polygon",
+        "MultiPolygon",
+        "GeometryCollection"
+    ].includes(value?.type);
+}
+
+function collectGeoJsonCoordinates(geojson) {
+    const points = [];
+    const visitGeometry = geometry => {
+        if (!geometry) {
+            return;
+        }
+        if (geometry.type === "GeometryCollection") {
+            (geometry.geometries || []).forEach(visitGeometry);
+            return;
+        }
+        const visit = coordinates => {
+            if (Array.isArray(coordinates)
+                && coordinates.length >= 2
+                && typeof coordinates[0] === "number"
+                && typeof coordinates[1] === "number") {
+                points.push(coordinates);
+                return;
+            }
+            if (Array.isArray(coordinates)) {
+                coordinates.forEach(visit);
+            }
+        };
+        visit(geometry.coordinates);
+    };
+    (geojson.features || []).forEach(feature => visitGeometry(feature.geometry));
+    return points;
+}
+
+function transformGeoJsonGeometry(geometry, transform) {
+    if (!geometry) {
+        return geometry;
+    }
+    if (geometry.type === "GeometryCollection") {
+        return {
+            ...geometry,
+            geometries: (geometry.geometries || []).map(item => transformGeoJsonGeometry(item, transform))
+        };
+    }
+    const visit = coordinates => {
+        if (Array.isArray(coordinates)
+            && coordinates.length >= 2
+            && typeof coordinates[0] === "number"
+            && typeof coordinates[1] === "number") {
+            return transform(coordinates);
+        }
+        return Array.isArray(coordinates) ? coordinates.map(visit) : coordinates;
+    };
+    return { ...geometry, coordinates: visit(geometry.coordinates) };
+}
+
+function webMercatorToWgs84(coordinate) {
+    const longitude = coordinate[0] * 180 / 20037508.34;
+    const latitudeRadians = Math.PI / 2 - 2 * Math.atan(Math.exp(-coordinate[1] / 6378137));
+    return [longitude, latitudeRadians * 180 / Math.PI, ...coordinate.slice(2)];
+}
+
+function normalizeKmlFiles(files) {
+    const features = files.flatMap(file => kmlTextToGeoJson(file.text, file.name));
+    if (!features.length) {
+        throw new Error("KML senza geometrie utilizzabili");
+    }
+
+    const selected = lmeState.importParcelOnly ? filterKmlParcelFeatures(features) : features;
+    if (!selected.length) {
+        throw new Error("nessuna particella trovata; disattiva 'solo particelle' per importare tutti gli elementi");
+    }
+    return {
+        geojson: { type: "FeatureCollection", features: selected },
+        ignoredCount: features.length - selected.length,
+        reprojected: false
+    };
+}
+
+function kmlTextToGeoJson(text, sourceName) {
     const xml = new DOMParser().parseFromString(text, "text/xml");
-    return toGeoJSON.kml(xml);
+    if (xml.getElementsByTagName("parsererror").length) {
+        throw new Error(`KML non valido (${sourceName})`);
+    }
+    const tree = toGeoJSON.kmlWithFolders(xml, { skipNullGeometry: true });
+    const features = [];
+    const visit = (node, folders) => {
+        if (node?.type === "Feature") {
+            node.properties = {
+                ...(node.properties || {}),
+                _lmeFolder: folders.filter(Boolean).join(" / "),
+                _lmeSource: sourceName
+            };
+            features.push(node);
+            return;
+        }
+        const nextFolders = node?.type === "folder"
+            ? [...folders, node.meta?.name || ""]
+            : folders;
+        (node?.children || []).forEach(child => visit(child, nextFolders));
+    };
+    visit(tree, []);
+    return features;
+}
+
+function filterKmlParcelFeatures(features) {
+    const polygons = features
+        .map(feature => ({ ...feature, geometry: polygonOnlyGeometry(feature.geometry) }))
+        .filter(feature => feature.geometry);
+    const filtered = polygons.filter(feature => {
+        const properties = feature.properties || {};
+        if (properties["@geometry-type"] === "groundoverlay") {
+            return false;
+        }
+        const name = String(properties.name || properties.Name || properties.LABEL || "").trim();
+        const identity = [name, properties.layer, properties.Layer, properties.type, properties.Tipo]
+            .filter(Boolean)
+            .join(" ")
+            .toLowerCase();
+        const folder = String(properties._lmeFolder || "").toLowerCase();
+        const isParcel = /particell|mappal|parcel/.test(`${identity} ${folder}`)
+            || /^[a-z]?\s*\d+[a-z]?(?:[\/. -]\d+[a-z]?)?$/i.test(name);
+        const isSheet = /\bfoglio\b|\bsheet\b|quadro[ _-]?d[' ]?unione|perimetro[ _-]?foglio/.test(identity);
+        return isParcel || !isSheet;
+    });
+    return removeLikelySheetOutline(filtered);
+}
+
+function polygonOnlyGeometry(geometry) {
+    if (!geometry) {
+        return null;
+    }
+    if (geometry.type === "Polygon" || geometry.type === "MultiPolygon") {
+        return geometry;
+    }
+    if (geometry.type === "GeometryCollection") {
+        const geometries = (geometry.geometries || []).filter(item =>
+            item.type === "Polygon" || item.type === "MultiPolygon");
+        return geometries.length ? { type: "GeometryCollection", geometries } : null;
+    }
+    return null;
+}
+
+function removeLikelySheetOutline(features) {
+    if (features.length < 3) {
+        return features;
+    }
+    const candidates = features.map(feature => ({ feature, bounds: geoJsonBounds(feature.geometry) }));
+    const valid = candidates.filter(item => item.bounds);
+    if (valid.length < 3) {
+        return features;
+    }
+    const areas = valid.map(item => boundsArea(item.bounds)).sort((a, b) => a - b);
+    const median = areas[Math.floor(areas.length / 2)];
+    const largest = valid.reduce((current, item) =>
+        boundsArea(item.bounds) > boundsArea(current.bounds) ? item : current);
+    const others = valid.filter(item => item !== largest);
+    const contained = others.filter(item => boundsContains(largest.bounds, boundsCenter(item.bounds))).length;
+    const looksLikeSheet = boundsArea(largest.bounds) > median * 8
+        && contained >= Math.ceil(others.length * 0.75);
+    return looksLikeSheet ? features.filter(feature => feature !== largest.feature) : features;
+}
+
+function geoJsonBounds(geometry) {
+    const wrapper = { features: [{ geometry }] };
+    const points = collectGeoJsonCoordinates(wrapper);
+    if (!points.length) {
+        return null;
+    }
+    return points.reduce((bounds, point) => ({
+        west: Math.min(bounds.west, point[0]),
+        south: Math.min(bounds.south, point[1]),
+        east: Math.max(bounds.east, point[0]),
+        north: Math.max(bounds.north, point[1])
+    }), { west: Infinity, south: Infinity, east: -Infinity, north: -Infinity });
+}
+
+function boundsArea(bounds) {
+    return Math.max(0, bounds.east - bounds.west) * Math.max(0, bounds.north - bounds.south);
+}
+
+function boundsCenter(bounds) {
+    return [(bounds.west + bounds.east) / 2, (bounds.south + bounds.north) / 2];
+}
+
+function boundsContains(bounds, point) {
+    return point[0] >= bounds.west && point[0] <= bounds.east
+        && point[1] >= bounds.south && point[1] <= bounds.north;
+}
+
+function setImportParcelOnly(enabled) {
+    lmeState.importParcelOnly = Boolean(enabled);
+    setInfo(lmeState.importParcelOnly
+        ? "Importazione KML/KMZ: verranno caricate solo le particelle."
+        : "Importazione KML/KMZ: verranno caricati tutti gli elementi.");
+}
+
+function setImportedMeasurementsVisible(enabled) {
+    lmeState.showImportedMeasurements = Boolean(enabled);
+    refreshImportedMeasurements();
+    setInfo(lmeState.showImportedMeasurements
+        ? "Misure dei file GIS visibili."
+        : "Misure dei file GIS nascoste.");
+}
+
+function setDrawingMeasurementsVisible(enabled) {
+    lmeState.showDrawingMeasurements = Boolean(enabled);
+    refreshDrawingMeasurements();
+    setInfo(lmeState.showDrawingMeasurements
+        ? "Misure dei disegni visibili."
+        : "Misure dei disegni nascoste.");
 }
 
 function fitImported() {
@@ -470,6 +803,7 @@ function fitImported() {
 
 function clearImported() {
     lmeState.imported.clearLayers();
+    lmeState.importedMeasurements.clearLayers();
     setInfo("File GIS rimossi.");
     updateGpsInsideState();
 }
@@ -483,6 +817,7 @@ function addProjectMarker(name) {
         properties: { name: label }
     };
     marker.bindPopup(`<strong>${escapeHtml(label)}</strong><br>${center.lat.toFixed(6)}, ${center.lng.toFixed(6)}`).openPopup();
+    refreshDrawingMeasurements();
     setInfo(`POI aggiunto: ${label}`);
 }
 
@@ -496,25 +831,107 @@ function enableDrawTools() {
         position: "topright",
         edit: { featureGroup: lmeState.drawings },
         draw: {
-            circle: false,
+            circle: { metric: true, feet: false },
             circlemarker: false,
             marker: true,
-            polygon: true,
-            polyline: true,
+            polygon: { metric: true, feet: false, showArea: true, allowIntersection: false },
+            polyline: { metric: true, feet: false, showLength: true },
             rectangle: true
         }
     });
     lmeState.map.addControl(lmeState.drawControl);
     if (!lmeState.drawEventsBound) {
         lmeState.map.on(L.Draw.Event.CREATED, event => {
+            annotateDrawingLayer(event.layer, event.layerType);
             lmeState.drawings.addLayer(event.layer);
+            refreshDrawingMeasurements();
             updateGpsInsideState();
+            const completedLabels = {
+                polygon: "Area completata: superficie, perimetro e lati aggiornati.",
+                rectangle: "Rettangolo completato: superficie, perimetro e lati aggiornati.",
+                polyline: "Distanza completata: lunghezza totale e tratti aggiornati.",
+                circle: "Cerchio completato: superficie, raggio e circonferenza aggiornati.",
+                marker: "Punto aggiunto alla mappa."
+            };
+            setInfo(completedLabels[event.layerType] || "Disegno completato.");
+        });
+        lmeState.map.on(L.Draw.Event.EDITED, event => {
+            event.layers.eachLayer(layer => annotateDrawingLayer(layer));
+            refreshDrawingMeasurements();
+            updateGpsInsideState();
+        });
+        lmeState.map.on(L.Draw.Event.DELETED, () => {
+            refreshDrawingMeasurements();
+            updateGpsInsideState();
+        });
+        lmeState.map.on(L.Draw.Event.DRAWSTOP, () => {
+            lmeState.activeDrawHandler = null;
         });
         lmeState.drawEventsBound = true;
     }
     setInfo("Disegno attivo: crea POI, linee e aree sulla mappa.");
 }
 
+function startMeasurementDrawing(mode) {
+    if (!lmeState.map) {
+        return;
+    }
+    if (!lmeState.drawEventsBound) {
+        enableDrawTools();
+        setDrawToolsVisible(false);
+    }
+    if (lmeState.activeDrawHandler) {
+        lmeState.activeDrawHandler.disable();
+    }
+
+    const handlers = {
+        area: () => new L.Draw.Polygon(lmeState.map, {
+            allowIntersection: false,
+            showArea: true,
+            metric: true,
+            feet: false,
+            shapeOptions: { color: "#f97316", weight: 4, fillColor: "#fb923c", fillOpacity: 0.2 }
+        }),
+        distance: () => new L.Draw.Polyline(lmeState.map, {
+            metric: true,
+            feet: false,
+            showLength: true,
+            shapeOptions: { color: "#f97316", weight: 4, opacity: 0.95 }
+        }),
+        circle: () => new L.Draw.Circle(lmeState.map, {
+            metric: true,
+            feet: false,
+            showRadius: true,
+            shapeOptions: { color: "#f97316", weight: 4, fillColor: "#fb923c", fillOpacity: 0.2 }
+        })
+    };
+    const createHandler = handlers[mode];
+    if (!createHandler) {
+        setInfo("Modalita di misura non riconosciuta.");
+        return;
+    }
+
+    lmeState.activeDrawHandler = createHandler();
+    lmeState.activeDrawHandler.enable();
+    const labels = {
+        area: "Tocca i vertici dell'area; chiudi toccando il primo punto.",
+        distance: "Tocca i punti del percorso; termina sull'ultimo punto.",
+        circle: "Tocca il centro e trascina fino al raggio desiderato."
+    };
+    setInfo(labels[mode]);
+}
+
+function annotateDrawingLayer(layer, layerType) {
+    layer.feature = layer.feature || { type: "Feature", properties: {} };
+    layer.feature.properties = layer.feature.properties || {};
+    if (layer instanceof L.Circle) {
+        layer.feature.properties._lmeShape = "circle";
+        layer.feature.properties._lmeRadius = layer.getRadius();
+    } else if (layerType) {
+        layer.feature.properties._lmeShape = layerType;
+    }
+}
+
 function setDrawToolsVisible(visible) {
     if (visible) {
         enableDrawTools();
@@ -547,10 +964,238 @@ function clearDrawings() {
     }
 
     lmeState.drawings.clearLayers();
+    lmeState.drawingMeasurements.clearLayers();
     updateGpsInsideState();
     setInfo("Disegni e POI eliminati dalla mappa.");
 }
 
+function scheduleMeasurementRefresh() {
+    window.clearTimeout(lmeState.measurementRefreshTimer);
+    lmeState.measurementRefreshTimer = window.setTimeout(() => {
+        refreshImportedMeasurements();
+        refreshDrawingMeasurements();
+    }, 80);
+}
+
+function refreshImportedMeasurements() {
+    renderMeasurements(
+        lmeState.imported,
+        lmeState.importedMeasurements,
+        lmeState.showImportedMeasurements,
+        "imported");
+}
+
+function refreshDrawingMeasurements() {
+    renderMeasurements(
+        lmeState.drawings,
+        lmeState.drawingMeasurements,
+        lmeState.showDrawingMeasurements,
+        "drawing");
+}
+
+function renderMeasurements(sourceGroup, targetGroup, visible, sourceType) {
+    if (!sourceGroup || !targetGroup) {
+        return;
+    }
+    targetGroup.clearLayers();
+    if (!visible) {
+        return;
+    }
+
+    const context = {
+        count: 0,
+        max: 600,
+        showSides: lmeState.map.getZoom() >= 17,
+        bounds: lmeState.map.getBounds(),
+        sourceType
+    };
+    visitMeasurableLayers(sourceGroup, layer => {
+        if (context.count >= context.max || !layerIsInView(layer, context.bounds)) {
+            return;
+        }
+        if (layer instanceof L.Circle) {
+            renderCircleMeasurement(layer, targetGroup, context);
+        } else if (layer instanceof L.Polygon) {
+            renderPolygonMeasurement(layer, targetGroup, context);
+        } else if (layer instanceof L.Polyline) {
+            renderPolylineMeasurement(layer, targetGroup, context);
+        }
+    });
+}
+
+function visitMeasurableLayers(layer, visitor) {
+    if (layer instanceof L.Circle || layer instanceof L.Polygon || layer instanceof L.Polyline) {
+        visitor(layer);
+        return;
+    }
+    if (typeof layer.eachLayer === "function") {
+        layer.eachLayer(child => visitMeasurableLayers(child, visitor));
+    }
+}
+
+function layerIsInView(layer, mapBounds) {
+    if (typeof layer.getBounds === "function") {
+        const bounds = layer.getBounds();
+        return !bounds.isValid || !bounds.isValid() || bounds.intersects(mapBounds);
+    }
+    if (typeof layer.getLatLng === "function") {
+        return mapBounds.contains(layer.getLatLng());
+    }
+    return true;
+}
+
+function renderCircleMeasurement(layer, targetGroup, context) {
+    const radius = layer.getRadius();
+    const area = Math.PI * radius * radius;
+    const circumference = 2 * Math.PI * radius;
+    addMeasurementLabel(
+        targetGroup,
+        layer.getLatLng(),
+        `S: ${formatArea(area)}<br>R: ${formatDistance(radius)} · C: ${formatDistance(circumference)}`,
+        "summary",
+        context);
+}
+
+function renderPolygonMeasurement(layer, targetGroup, context) {
+    const polygons = polygonLatLngGroups(layer.getLatLngs());
+    let area = 0;
+    let perimeter = 0;
+    polygons.forEach(rings => {
+        rings.forEach((ring, index) => {
+            const ringArea = Math.abs(L.GeometryUtil.geodesicArea(ring));
+            area += index === 0 ? ringArea : -ringArea;
+            perimeter += latLngPathLength(ring, true);
+            if (context.showSides) {
+                addSegmentLabels(ring, true, targetGroup, context);
+            }
+        });
+    });
+    const center = typeof layer.getCenter === "function"
+        ? layer.getCenter()
+        : layer.getBounds().getCenter();
+    addMeasurementLabel(
+        targetGroup,
+        center,
+        `S: ${formatArea(Math.max(0, area))}<br>P: ${formatDistance(perimeter)}`,
+        "summary",
+        context);
+}
+
+function renderPolylineMeasurement(layer, targetGroup, context) {
+    const lines = lineLatLngGroups(layer.getLatLngs());
+    const length = lines.reduce((total, line) => total + latLngPathLength(line, false), 0);
+    if (context.showSides) {
+        lines.forEach(line => addSegmentLabels(line, false, targetGroup, context));
+    }
+    const longest = lines.reduce((current, line) => line.length > current.length ? line : current, []);
+    if (longest.length) {
+        addMeasurementLabel(
+            targetGroup,
+            longest[Math.floor(longest.length / 2)],
+            `L: ${formatDistance(length)}`,
+            "summary",
+            context);
+    }
+}
+
+function polygonLatLngGroups(latLngs) {
+    if (!Array.isArray(latLngs) || !latLngs.length) {
+        return [];
+    }
+    if (isLatLng(latLngs[0])) {
+        return [[latLngs]];
+    }
+    if (Array.isArray(latLngs[0]) && isLatLng(latLngs[0][0])) {
+        return [latLngs];
+    }
+    return latLngs.flatMap(polygonLatLngGroups);
+}
+
+function lineLatLngGroups(latLngs) {
+    if (!Array.isArray(latLngs) || !latLngs.length) {
+        return [];
+    }
+    if (isLatLng(latLngs[0])) {
+        return [latLngs];
+    }
+    return latLngs.flatMap(lineLatLngGroups);
+}
+
+function isLatLng(value) {
+    return value && Number.isFinite(value.lat) && Number.isFinite(value.lng);
+}
+
+function latLngPathLength(points, closed) {
+    if (points.length < 2) {
+        return 0;
+    }
+    let total = 0;
+    for (let index = 1; index < points.length; index += 1) {
+        total += lmeState.map.distance(points[index - 1], points[index]);
+    }
+    if (closed && !points[0].equals(points[points.length - 1])) {
+        total += lmeState.map.distance(points[points.length - 1], points[0]);
+    }
+    return total;
+}
+
+function addSegmentLabels(points, closed, targetGroup, context) {
+    if (points.length < 2) {
+        return;
+    }
+    const segmentCount = closed ? points.length : points.length - 1;
+    for (let index = 0; index < segmentCount && context.count < context.max; index += 1) {
+        const start = points[index];
+        const end = points[(index + 1) % points.length];
+        if (start.equals(end)) {
+            continue;
+        }
+        addMeasurementLabel(
+            targetGroup,
+            L.latLng((start.lat + end.lat) / 2, (start.lng + end.lng) / 2),
+            formatDistance(lmeState.map.distance(start, end)),
+            "side",
+            context);
+    }
+}
+
+function addMeasurementLabel(targetGroup, latLng, html, labelType, context) {
+    if (context.count >= context.max) {
+        return;
+    }
+    L.marker(latLng, {
+        interactive: false,
+        keyboard: false,
+        icon: L.divIcon({
+            className: `lme-measure-label ${context.sourceType} ${labelType}`,
+            html: `<span>${html}</span>`,
+            iconSize: null
+        })
+    }).addTo(targetGroup);
+    context.count += 1;
+}
+
+function formatDistance(meters) {
+    if (meters >= 1000) {
+        return `${formatNumber(meters / 1000, 3)} km`;
+    }
+    return `${formatNumber(meters, meters < 100 ? 1 : 0)} m`;
+}
+
+function formatArea(squareMeters) {
+    if (squareMeters >= 10000) {
+        return `${formatNumber(squareMeters / 10000, 4)} ha`;
+    }
+    return `${formatNumber(squareMeters, squareMeters < 100 ? 1 : 0)} m²`;
+}
+
+function formatNumber(value, digits) {
+    return new Intl.NumberFormat("it-IT", {
+        minimumFractionDigits: 0,
+        maximumFractionDigits: digits
+    }).format(value);
+}
+
 function createProjectSnapshot(includeCadastralParcels) {
     const center = lmeState.map.getCenter();
     return JSON.stringify({
@@ -589,13 +1234,29 @@ function loadProjectSnapshot(raw, projectName) {
 
         lmeState.drawings.clearLayers();
         lmeState.imported.clearLayers();
+        lmeState.drawingMeasurements.clearLayers();
+        lmeState.importedMeasurements.clearLayers();
         lmeState.selectedParcelsLayer.clearLayers();
         lmeState.gpsParcelLayer.clearLayers();
 
-        L.geoJSON(data.drawings || emptyFeatureCollection(), {
+        const restoredDrawings = L.geoJSON(data.drawings || emptyFeatureCollection(), {
             style: { color: "#f97316", weight: 3, fillOpacity: 0.16 },
+            pointToLayer: (feature, latlng) => {
+                const properties = feature?.properties || {};
+                if (properties._lmeShape === "circle" && Number(properties._lmeRadius) > 0) {
+                    return L.circle(latlng, {
+                        radius: Number(properties._lmeRadius),
+                        color: "#f97316",
+                        weight: 3,
+                        fillColor: "#fb923c",
+                        fillOpacity: 0.2
+                    });
+                }
+                return L.marker(latlng, { draggable: true });
+            },
             onEachFeature: bindStoredFeaturePopup
-        }).addTo(lmeState.drawings);
+        });
+        restoredDrawings.eachLayer(layer => lmeState.drawings.addLayer(layer));
         L.geoJSON(data.imported || emptyFeatureCollection(), {
             style: { color: "#22c55e", weight: 3, opacity: 0.95, fillOpacity: 0.18 },
             pointToLayer: (feature, latlng) => L.circleMarker(latlng, {
@@ -621,6 +1282,8 @@ function loadProjectSnapshot(raw, projectName) {
 
         lmeState.gpsTrailPoints = Array.isArray(data.trail) ? data.trail : [];
         lmeState.gpsTrail.setLatLngs(lmeState.gpsTrailPoints);
+        refreshImportedMeasurements();
+        refreshDrawingMeasurements();
 
         const projectLayers = L.featureGroup([
             lmeState.drawings,
@@ -956,6 +1619,8 @@ function clearMapElements() {
     lmeState.gpsParcelLayer.clearLayers();
     lmeState.imported.clearLayers();
     lmeState.drawings.clearLayers();
+    lmeState.importedMeasurements.clearLayers();
+    lmeState.drawingMeasurements.clearLayers();
     lmeState.gpsTrailPoints = [];
     lmeState.gpsTrail.setLatLngs([]);
     updateGpsInsideState();