From 00053e4d5fdbcaac5577cfc512ca0ceb5a13dd35 Mon Sep 17 00:00:00 2001 From: livio Date: Fri, 25 Sep 2026 15:40:20 +0200 Subject: [PATCH] Fix layer actions and add reusable color editors --- Components/MenuHelp.razor | 7 +- Components/Pages/Home.razor | 10 +- LMEMappeCatastaliApp.csproj | 4 +- README.md | 9 ++ Services/MapExportService.cs | 2 +- wwwroot/css/app.css | 54 ++++++++- wwwroot/js/lme-map.js | 205 +++++++++++++++++++++++++++++++---- 7 files changed, 254 insertions(+), 37 deletions(-) diff --git a/Components/MenuHelp.razor b/Components/MenuHelp.razor index 93f681a..10ae50a 100644 --- a/Components/MenuHelp.razor +++ b/Components/MenuHelp.razor @@ -38,6 +38,7 @@ "Gerarchia: premi la freccia accanto alla maniglia per aprire un gruppo. Il rientro, il carattere e la tonalita indicano se una riga e figlia, nipote o di livello successivo.", "Selezione multipla: attiva il flag sulle righe desiderate. Esempio: seleziona tre poligoni per esportare solo quelli oppure per bloccarli con una sola operazione.", "Rinomina e attributi: Rinomina modifica il nome mostrato e salvato nei progetti e nei file esportati; Attributi apre un editor multilinea per consultare o correggere i dati associati.", + "Colori: espandi un padre o un figlio e usa gli editor di linea e riempimento. Puoi scegliere il colore, prelevarlo con il contagocce se supportato, oppure inserire e copiare i valori HEX, RGB e HSL; sul padre viene applicato a tutto il gruppo.", "Blocco: il lucchetto impedisce modifiche e spostamenti involontari. Sblocca l'oggetto prima di usare la matita o gli strumenti geometrici.", "Sposta nel gruppo cambia l'appartenenza. Esempio: trasferisci un poligono da Disegni e POI a Progetti e dati importati, oppure in un nuovo sottogruppo chiamato Rilievo nord.", "Sposta geometria cambia invece le coordinate dell'oggetto, per esempio 100 metri verso nord; non modifica il gruppo di appartenenza.", @@ -48,9 +49,9 @@ [ "Compila i campi nell'ordine Regione, Comune, Foglio e Particella: ogni scelta carica l'elenco necessario al campo successivo.", "Esempio: scegli Campania, il Comune, il foglio 12 e la particella 345, poi premi Mostra particella sulla mappa.", - "Il confine ufficiale viene evidenziato in rosso. Se Centra e zooma quando seleziono un oggetto e attivo nelle Impostazioni, la mappa lo inquadra automaticamente.", + "Il confine ufficiale viene evidenziato sulla mappa. Se Centra e zooma quando seleziono un oggetto e attivo nelle Impostazioni, la mappa lo inquadra automaticamente.", "Se la particella e gia presente tra disegni, progetti o file GeoJSON, KML e KMZ, l'app riconosce il riferimento catastale o la geometria e riutilizza l'oggetto esistente senza duplicarlo.", - "Se un oggetto gia presente era nascosto, viene reso nuovamente visibile. La visibilita generale dei contorni rossi e dei dati importati resta controllabile dal pannello Layer.", + "Se un oggetto gia presente era nascosto, viene reso nuovamente visibile. La visibilita generale dei contorni evidenziati e dei dati importati resta controllabile dal pannello Layer.", "Quando il servizio ufficiale non restituisce subito il confine, attendi il completamento indicato nel pannello e riprova mantenendo gli stessi dati selezionati." ], "data" => @@ -76,7 +77,7 @@ ], "projects" => [ - "Nuovo progetto: inserisci un nome, scegli se includere i contorni catastali rossi e premi Salva progetto. Vengono conservati oggetti, gruppi, nomi, attributi e opzioni di visualizzazione.", + "Nuovo progetto: inserisci un nome, scegli se includere i contorni catastali evidenziati e premi Salva progetto. Vengono conservati oggetti, gruppi, nomi, attributi e opzioni di visualizzazione.", "Aggiornamento: dopo aver aperto un progetto, usa di nuovo Salva progetto con lo stesso nome per aggiornarlo. Se nelle Impostazioni attivi Aggiorna automaticamente il progetto aperto, le modifiche vengono registrate dopo 3 secondi di inattivita.", "Cartelle: seleziona un progetto, scrivi per esempio Cantieri 2026 e premi Sposta per organizzarlo nell'archivio; questa operazione non sposta le geometrie sulla mappa.", "Duplica crea una copia modificabile, utile prima di una variante importante o quando ricevi un progetto in sola lettura.", diff --git a/Components/Pages/Home.razor b/Components/Pages/Home.razor index abcf7ac..2951382 100644 --- a/Components/Pages/Home.razor +++ b/Components/Pages/Home.razor @@ -81,7 +81,7 @@ Particelle catastali evidenziate - Contorni rossi ottenuti da ricerca o GPS + Contorni ottenuti da ricerca o GPS @@ -1558,8 +1558,8 @@ await JS.InvokeVoidAsync( "lmeMap.showInfo", IncludeCadastralParcels - ? $"Progetto salvato: {saved.Name}, incluse le particelle rosse." - : $"Progetto salvato: {saved.Name}, senza particelle rosse."); + ? $"Progetto salvato: {saved.Name}, incluse le particelle catastali evidenziate." + : $"Progetto salvato: {saved.Name}, senza particelle catastali evidenziate."); } catch (Exception error) { diff --git a/LMEMappeCatastaliApp.csproj b/LMEMappeCatastaliApp.csproj index 67ad1c9..41bc10a 100644 --- a/LMEMappeCatastaliApp.csproj +++ b/LMEMappeCatastaliApp.csproj @@ -28,8 +28,8 @@ com.companyname.lmemappecatastaliapp - 0.4.3 - 38 + 0.4.4 + 39 $(ApplicationDisplayVersion) diff --git a/README.md b/README.md index 2e738d1..e8a85b3 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,15 @@ App .NET MAUI Blazor Hybrid per Android, iOS, Mac Catalyst e Windows, pensata per consultare mappe catastali e lavorare sul campo con GPS. +## Versione 0.4.4 + +- I comandi `Rinomina`, `Sposta nel gruppo` e `Rimuovi` occupano una riga completa e restano visibili anche nei pannelli Layer molto stretti. +- `Sposta nel gruppo` e disponibile per padri e figli di disegni, dati importati, cornici, fogli importati e particelle evidenziate dalla ricerca catastale. +- Editor distinti per linea e riempimento su gruppi e singoli oggetti, con contagocce dove supportato e valori modificabili HEX, RGB e HSL. +- Copia HEX per riutilizzare esattamente un colore su altri oggetti; stili conservati nei progetti e negli export. +- Rimossi dai menu i riferimenti al colore rosso fisso delle particelle catastali. +- Nei progetti in sola lettura anche il trasferimento tra gruppi viene correttamente disabilitato. + ## Versione 0.4.3 - `Mostra particella sulla mappa` riattiva sempre il layer dei confini rossi e lo porta in primo piano. diff --git a/Services/MapExportService.cs b/Services/MapExportService.cs index 5ee2ace..ac06055 100644 --- a/Services/MapExportService.cs +++ b/Services/MapExportService.cs @@ -85,7 +85,7 @@ public sealed class MapExportService { var root = new XElement("gpx", new XAttribute("version", "1.1"), - new XAttribute("creator", "LME Mappe Catastali 0.4.3"), + new XAttribute("creator", "LME Mappe Catastali 0.4.4"), new XAttribute(XNamespace.Xmlns + "xsi", "http://www.w3.org/2001/XMLSchema-instance"), new XElement("metadata", new XElement("name", name))); foreach (var feature in features.EnumerateArray()) diff --git a/wwwroot/css/app.css b/wwwroot/css/app.css index c42c2d1..93af00a 100644 --- a/wwwroot/css/app.css +++ b/wwwroot/css/app.css @@ -484,6 +484,54 @@ input[type="checkbox"] { padding: 1px; } +.layer-color-editor { + grid-column: 1 / -1; + display: grid; + gap: 5px; + padding: 6px; + border: 1px solid #cbd5da; + border-radius: 4px; + background: rgba(255, 255, 255, 0.82); +} + +.layer-color-editor > header { + display: grid; + grid-template-columns: minmax(0, 1fr) 46px auto; + align-items: center; + gap: 5px; + font-size: 10px; +} + +.layer-color-editor > header input[type="color"] { + width: 46px; + min-height: 30px; +} + +.layer-color-editor button { + min-height: 28px; + min-width: 0; + padding: 3px 6px; + font-size: 9px; +} + +.layer-color-formats { + display: grid; + gap: 4px; +} + +.layer-color-formats label { + grid-template-columns: 30px minmax(0, 1fr); + align-items: center; +} + +.layer-color-formats input { + font-family: Consolas, "Courier New", monospace; +} + +.layer-color-copy { + justify-self: stretch; +} + .layer-photo-picker { position: relative; min-height: 32px; @@ -574,7 +622,7 @@ input[type="checkbox"] { grid-template-areas: "handle expand title count" ". . visibility moves" - ". . actions moves"; + "actions actions actions actions"; align-items: start; gap: 6px; min-height: 38px; @@ -625,8 +673,9 @@ input[type="checkbox"] { grid-area: actions; display: grid; grid-template-columns: minmax(0, 1fr); - width: min(130px, 100%); + width: 100%; gap: 4px; + margin-top: 2px; } .layer-manager-group > summary > input, @@ -747,6 +796,7 @@ input[type="checkbox"] { .project-readonly .leaflet-draw, .project-readonly .layer-rename-button, +.project-readonly .layer-membership-button, .project-readonly .layer-remove-button, .project-readonly .layer-inline-lock, .project-readonly .layer-object-tools, diff --git a/wwwroot/js/lme-map.js b/wwwroot/js/lme-map.js index ef181bd..e31b48e 100644 --- a/wwwroot/js/lme-map.js +++ b/wwwroot/js/lme-map.js @@ -410,9 +410,7 @@ function displayOfficialParcel(xmlText, latitude, longitude, parcel, label, shou ? findParcelLayerByReference(targetGroup, ref) || restoreHiddenParcelLayerByReference(ref) : null; if (existingLayer) { - if (typeof existingLayer.setStyle === "function") { - existingLayer.setStyle({ color: "#ef4444", weight: 4, opacity: 1, fillColor: "#fbbf24", fillOpacity: 0.26 }); - } + applyStyleFromProperties(existingLayer); targetGroup.bringToFront(); if (shouldFit) { fitLayer(existingLayer); @@ -444,7 +442,12 @@ function displayOfficialParcel(xmlText, latitude, longitude, parcel, label, shou feature.properties = { ...(feature.properties || {}), - _lmeParcelReference: String(ref || label || normalizedParcel) + _lmeParcelReference: String(ref || label || normalizedParcel), + _lmeColor: feature.properties?._lmeColor || "#ef4444", + _lmeFillColor: feature.properties?._lmeFillColor || "#fbbf24", + _lmeWeight: Number(feature.properties?._lmeWeight) || 4, + _lmeOpacity: Number.isFinite(Number(feature.properties?._lmeOpacity)) ? Number(feature.properties._lmeOpacity) : 1, + _lmeFillOpacity: Number.isFinite(Number(feature.properties?._lmeFillOpacity)) ? Number(feature.properties._lmeFillOpacity) : 0.26 }; const layer = L.geoJSON(feature, { pane: normalizedParcel ? "selectedParcelsPane" : "gpsParcelsPane", @@ -1493,6 +1496,10 @@ function managedObjectCanRemove(record) { return ["drawings", "imported", "importedSheets", "selectedParcels", "gpsParcels"].includes(record.categoryKey); } +function managedCategoryCanMove(categoryKey) { + return ["drawings", "imported", "importedSheets", "selectedParcels"].includes(categoryKey); +} + function layerManagerRowActions(renameButton, moveButton, removeButton) { if (!renameButton && !moveButton && !removeButton) { return ""; @@ -1607,7 +1614,7 @@ function managedMoveDestinations() { function showMoveManagedRecordsDialog(records, subject) { if (lmeState.readOnly) { setInfo("Il progetto e' in sola lettura."); return; } - if (!records.length || records.some(record => !["drawings", "imported"].includes(record.categoryKey))) { + if (!records.length || records.some(record => !managedCategoryCanMove(record.categoryKey))) { setInfo("Questo oggetto o gruppo non puo essere spostato."); return; } @@ -1623,9 +1630,12 @@ function showMoveManagedRecordsDialog(records, subject) { const categorySelect = form.elements.category; const groupSelect = form.elements.group; const newGroupInput = form.elements.newGroup; - const currentCategory = records.every(record => record.categoryKey === records[0].categoryKey) + const sourceCategory = records.every(record => record.categoryKey === records[0].categoryKey) ? records[0].categoryKey : "drawings"; + const currentCategory = destinations.some(destination => destination.key === sourceCategory) + ? sourceCategory + : "imported"; categorySelect.value = currentCategory; const refreshGroups = () => { const destination = destinations.find(item => item.key === categorySelect.value); @@ -1665,7 +1675,7 @@ function showMoveManagedRecordsDialog(records, subject) { function moveManagedRecordsToGroup(records, targetCategory, targetSource, targetGroupName) { if (lmeState.readOnly) { setInfo("Il progetto e' in sola lettura."); return; } - const movable = records.filter(record => ["drawings", "imported"].includes(record.categoryKey)); + const movable = records.filter(record => managedCategoryCanMove(record.categoryKey)); if (!movable.length || !["drawings", "imported"].includes(targetCategory)) { setInfo("Questo gruppo non puo essere spostato."); return; @@ -1808,7 +1818,7 @@ function renderLayerManagerCategory(category, records) { const removeButton = managedCategoryCanRemove(category, records) ? `` : ""; - const moveButton = records.length && ["drawings", "imported"].includes(category.key) + const moveButton = records.length && managedCategoryCanMove(category.key) ? `` : ""; const rowActions = layerManagerRowActions(renameButton, moveButton, removeButton); @@ -1932,7 +1942,7 @@ function renderLayerManagerObject(record, index) { const removeButton = managedObjectCanRemove(record) ? `` : ""; - const moveButton = ["drawings", "imported"].includes(record.categoryKey) + const moveButton = managedCategoryCanMove(record.categoryKey) ? `` : ""; const rowActions = layerManagerRowActions(renameButton, moveButton, removeButton); @@ -2033,16 +2043,26 @@ function renderLayerSelectionToolbar() { function renderManagedGroupTools(records) { const tools = document.createElement("div"); tools.className = "layer-group-tools"; - const properties = records[0]?.layer?.feature?.properties || {}; + const firstLayer = records[0]?.layer; + const properties = firstLayer?.feature?.properties || {}; + const lineColor = normalizedColor(properties._lmeColor || firstLayer?.options?.color, "#16806a"); + const fillColor = normalizedColor(properties._lmeFillColor || firstLayer?.options?.fillColor, lineColor); tools.innerHTML = `Azioni gruppo${escapeHtml(managedGroupTotals(records))}
- - -
+ ${managedColorEditorMarkup("color", "Colore linea", lineColor)} + ${managedColorEditorMarkup("fillColor", "Colore riempimento", fillColor)} + +
`; - const inputs = tools.querySelectorAll("input"); - inputs.forEach(input => input.addEventListener("change", () => { - applyManagedStyle(records, { color: inputs[0].value, weight: Number(inputs[1].value), opacity: Number(inputs[2].value) }); - })); + const applyCurrentStyle = () => { + applyManagedStyle(records, { + color: tools.querySelector("[data-color-picker='color']").value, + fillColor: tools.querySelector("[data-color-picker='fillColor']").value, + weight: Number(tools.querySelector("[data-field='weight']").value), + opacity: Number(tools.querySelector("[data-field='opacity']").value) + }); + }; + bindManagedColorEditors(tools, applyCurrentStyle); + tools.querySelectorAll("input[type='range']").forEach(input => input.addEventListener("change", applyCurrentStyle)); tools.querySelector("[data-group-action='select']").addEventListener("click", () => { records.forEach(record => lmeState.managerSelectedObjectIds.add(record.id)); refreshLayerManager(); }); @@ -2079,11 +2099,13 @@ function renderManagedObjectTools(record) { const locked = Boolean(properties._lmeLocked); const tools = document.createElement("section"); tools.className = "layer-object-tools"; + const lineColor = normalizedColor(properties._lmeColor || record.layer?.options?.color, "#f97316"); + const fillColor = normalizedColor(properties._lmeFillColor || record.layer?.options?.fillColor, lineColor); tools.innerHTML = ` -
- +
${managedColorEditorMarkup("color", "Colore linea", lineColor)} + ${managedColorEditorMarkup("fillColor", "Colore riempimento", fillColor)} @@ -2099,14 +2121,16 @@ function renderManagedObjectTools(record) { }); tools.querySelector("[data-field='locked']").addEventListener("change", event => updateManagedProperties([record], value => { value._lmeLocked = event.target.checked; })); tools.querySelector("[data-field='label']").addEventListener("change", event => updateManagedProperties([record], value => { value._lmeLabelVisible = event.target.checked; })); - tools.querySelectorAll(".layer-style-controls input,.layer-style-controls select").forEach(input => input.addEventListener("change", () => applyManagedStyle([record], { - color: tools.querySelector("[data-field='color']").value, - fillColor: tools.querySelector("[data-field='fillColor']").value, + const applyCurrentStyle = () => applyManagedStyle([record], { + color: tools.querySelector("[data-color-picker='color']").value, + fillColor: tools.querySelector("[data-color-picker='fillColor']").value, weight: Number(tools.querySelector("[data-field='weight']").value), opacity: Number(tools.querySelector("[data-field='opacity']").value), fillOpacity: Number(tools.querySelector("[data-field='fillOpacity']").value), dash: tools.querySelector("[data-field='dash']").value - }))); + }); + bindManagedColorEditors(tools, applyCurrentStyle); + tools.querySelectorAll(".layer-style-controls input[type='range'],.layer-style-controls select").forEach(input => input.addEventListener("change", applyCurrentStyle)); tools.querySelector("[data-field='notes']").addEventListener("change", event => updateManagedProperties([record], value => { value._lmeNotes = event.target.value.trim(); })); tools.querySelector("[data-field='photo']").addEventListener("change", async event => { const file = event.target.files?.[0]; if (!file) return; @@ -2128,6 +2152,131 @@ function normalizedColor(value, fallback) { return /^#[0-9a-f]{6}$/i.test(String(value || "")) ? value : fallback; } +function managedColorEditorMarkup(field, label, color) { + const formats = managedColorFormats(color); + return `
+
${escapeHtml(label)}
+
+ + + +
+ +
`; +} + +function bindManagedColorEditors(container, onChanged) { + container.querySelectorAll("[data-color-editor]").forEach(editor => { + const picker = editor.querySelector("[data-color-picker]"); + const formatInputs = [...editor.querySelectorAll("[data-color-format]")]; + const sync = (color, notify) => { + const formats = managedColorFormats(color); + picker.value = formats.hex; + formatInputs.forEach(input => { input.value = formats[input.dataset.colorFormat]; }); + if (notify) onChanged(); + }; + picker.addEventListener("change", () => sync(picker.value, true)); + formatInputs.forEach(input => input.addEventListener("change", () => { + const parsed = parseManagedColor(input.value); + if (!parsed) { + sync(picker.value, false); + setInfo("Colore non valido. Usa HEX, rgb(r, g, b) oppure hsl(h, s%, l%)."); + return; + } + sync(parsed, true); + })); + const eyedropper = editor.querySelector("[data-color-eyedropper]"); + if (typeof window.EyeDropper !== "function") { + eyedropper.hidden = true; + } else { + eyedropper.addEventListener("click", async () => { + try { + const result = await new window.EyeDropper().open(); + if (result?.sRGBHex) sync(result.sRGBHex, true); + } catch (error) { + if (error?.name !== "AbortError") setInfo("Contagocce non disponibile su questo dispositivo."); + } + }); + } + editor.querySelector("[data-color-copy]").addEventListener("click", async () => { + const value = picker.value.toUpperCase(); + try { + await navigator.clipboard.writeText(value); + setInfo(`Colore ${value} copiato. Puoi incollarlo nel campo HEX di un altro oggetto.`); + } catch { + const hexInput = editor.querySelector("[data-color-format='hex']"); + hexInput.focus(); + hexInput.select(); + setInfo(`Selezionato ${value}: usa il comando Copia del dispositivo.`); + } + }); + }); +} + +function parseManagedColor(value) { + const text = String(value || "").trim(); + const shortHex = text.match(/^#([0-9a-f]{3})$/i); + if (shortHex) return `#${[...shortHex[1]].map(part => part + part).join("")}`.toUpperCase(); + if (/^#[0-9a-f]{6}$/i.test(text)) return text.toUpperCase(); + const rgb = text.match(/^rgba?\(\s*(\d{1,3})\s*[, ]\s*(\d{1,3})\s*[, ]\s*(\d{1,3})(?:\s*[,/]\s*[\d.]+)?\s*\)$/i); + if (rgb) { + const values = rgb.slice(1, 4).map(Number); + if (values.every(channel => channel >= 0 && channel <= 255)) return managedRgbToHex(...values); + } + const hsl = text.match(/^hsla?\(\s*(-?[\d.]+)(?:deg)?\s*[, ]\s*([\d.]+)%\s*[, ]\s*([\d.]+)%(?:\s*[,/]\s*[\d.]+)?\s*\)$/i); + if (hsl) { + const saturation = Number(hsl[2]); const lightness = Number(hsl[3]); + if (saturation >= 0 && saturation <= 100 && lightness >= 0 && lightness <= 100) { + return managedRgbToHex(...managedHslToRgb(Number(hsl[1]), saturation, lightness)); + } + } + return null; +} + +function managedColorFormats(color) { + const hex = normalizedColor(color, "#000000").toUpperCase(); + const [red, green, blue] = [1, 3, 5].map(index => parseInt(hex.slice(index, index + 2), 16)); + const redUnit = red / 255; const greenUnit = green / 255; const blueUnit = blue / 255; + const max = Math.max(redUnit, greenUnit, blueUnit); const min = Math.min(redUnit, greenUnit, blueUnit); + const lightness = (max + min) / 2; const delta = max - min; + let hue = 0; let saturation = 0; + if (delta) { + saturation = delta / (1 - Math.abs(2 * lightness - 1)); + if (max === redUnit) hue = 60 * (((greenUnit - blueUnit) / delta) % 6); + else if (max === greenUnit) hue = 60 * ((blueUnit - redUnit) / delta + 2); + else hue = 60 * ((redUnit - greenUnit) / delta + 4); + } + if (hue < 0) hue += 360; + return { + hex, + rgb: `rgb(${red}, ${green}, ${blue})`, + hsl: `hsl(${managedColorDecimal(hue)}, ${managedColorDecimal(saturation * 100)}%, ${managedColorDecimal(lightness * 100)}%)` + }; +} + +function managedColorDecimal(value) { + return String(Number(value.toFixed(2))); +} + +function managedRgbToHex(red, green, blue) { + return `#${[red, green, blue].map(channel => Math.round(channel).toString(16).padStart(2, "0")).join("")}`.toUpperCase(); +} + +function managedHslToRgb(hue, saturation, lightness) { + const normalizedHue = ((hue % 360) + 360) % 360; + const saturationUnit = saturation / 100; const lightnessUnit = lightness / 100; + const chroma = (1 - Math.abs(2 * lightnessUnit - 1)) * saturationUnit; + const section = normalizedHue / 60; const intermediate = chroma * (1 - Math.abs(section % 2 - 1)); + const values = section < 1 ? [chroma, intermediate, 0] + : section < 2 ? [intermediate, chroma, 0] + : section < 3 ? [0, chroma, intermediate] + : section < 4 ? [0, intermediate, chroma] + : section < 5 ? [intermediate, 0, chroma] + : [chroma, 0, intermediate]; + const offset = lightnessUnit - chroma / 2; + return values.map(channel => Math.round((channel + offset) * 255)); +} + function editManagedAttributes(record) { if (lmeState.readOnly) { setInfo("Il progetto e' in sola lettura."); return; } const properties = record.layer?.feature?.properties || {}; @@ -4340,7 +4489,14 @@ function loadProjectSnapshot(raw, projectName) { applyImportedSheetVisibility(); L.geoJSON(data.selectedParcels || emptyFeatureCollection(), { pane: "selectedParcelsPane", - style: { color: "#ef4444", weight: 4, opacity: 1, fillColor: "#fbbf24", fillOpacity: 0.26 }, + style: feature => ({ + color: feature?.properties?._lmeColor || "#ef4444", + weight: Number(feature?.properties?._lmeWeight) || 4, + opacity: Number.isFinite(Number(feature?.properties?._lmeOpacity)) ? Number(feature.properties._lmeOpacity) : 1, + fillColor: feature?.properties?._lmeFillColor || "#fbbf24", + fillOpacity: Number.isFinite(Number(feature?.properties?._lmeFillOpacity)) ? Number(feature.properties._lmeFillOpacity) : 0.26, + dashArray: feature?.properties?._lmeDash || null + }), onEachFeature: (feature, layer) => { const properties = feature?.properties || {}; const reference = properties.NATIONALCADASTRALREFERENCE @@ -4349,6 +4505,7 @@ function loadProjectSnapshot(raw, projectName) { || "Particella catastale"; layer.lmeParcelReference = reference; layer.bindPopup(`${escapeHtml(reference)}`); + applyStyleFromProperties(layer); } }).addTo(lmeState.selectedParcelsLayer);