viewof map = { const container = html`

`; const map = L.map(container).setView([4.518, -72.528], 15); L.tileLayer("https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}", { attribution: 'Tiles © Esri — Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community', maxZoom: 19 }).addTo(map); const styles = { "Self-intersection": { color: "red", weight: 2, fillOpacity: 0.2 }, "Unclosed boundary": { color: "blue", weight: 2, dashArray: "5, 5" }, "Excess vertices": { color: "orange", weight: 2, fillOpacity: 0.2 } }; function renderGeoJSON(data) { const geojsonLayer = L.geoJSON(data, { style: feature => styles[feature.properties.error], onEachFeature: (feature, layer) => { if (feature.properties) { let popupContent = ` Error: ${feature.properties.error || 'N/A'}
Description: ${feature.properties.desc || 'N/A'}
Geometry Type: ${feature.geometry.type || 'N/A'} `; layer.bindPopup(popupContent, { maxWidth: 300 }); } } }).addTo(map); const overlayMaps = { "Self-intersection": L.geoJSON(data.features.filter(f => f.properties.error === "Self-intersection"), { style: styles["Self-intersection"] }), "Unclosed boundary": L.geoJSON(data.features.filter(f => f.properties.error === "Unclosed boundary"), { style: styles["Unclosed boundary"] }), "Excess vertices": L.geoJSON(data.features.filter(f => f.properties.error === "Excess vertices"), { style: styles["Excess vertices"] }) }; return geojsonLayer; } renderGeoJSON(geojsonData); return container; }