40:null 41:["$","title",null,{"children":"Explore the Datasets | Abebemulugeta2001 | Observable"}] 47:Tc5c,viewof DataSelector_form = { const form_elements = { hazardGroup_form: atlas_cat === "Hazard" ? Inputs.form( { hazard_sel: ScrollingMultiSelect_collapsible( // Object.keys(hazard_dict), new Map( Object.entries(hazard_dict).map(([key, value]) => [ _lang(nbText.general.hazards[key]), key ]) ), { label: _lang(nbText.selectVars.forms.Hazard.selectors.hazard.title), values: Object.keys(hazard_dict), } ), timeperiod_sel: ScrollingMultiSelect_collapsible( new Map([ [_lang(nbText.selectVars.forms.Hazard.selectors.period.options.baseline), "historic"], ["2021-2040", "2021_2040"], ["2041-2060", "2041_2060"] ]), { label: _lang(nbText.selectVars.forms.Hazard.selectors.period.title), values: ["historic", "2021_2040", "2041_2060" ] } ) }, { template: (inputs) => html`

${_lang(nbText.selectVars.forms.Hazard.mainTitle)}

${Object.values( inputs )}

` } ) : "", vulnerabilityGroup_form: atlas_cat === "Vulnerability" ? Inputs.form( { vulnerability_sel: ScrollingMultiSelect_collapsible( ["Education", "Poverty", "Gender"], { label: _lang(nbText.selectVars.forms.Vulnerability.selectors.variable.title), values: ["Education", "Poverty", "Gender"], format: (l) => _lang(nbText.selectVars.forms.Vulnerability.selectors.variable.options[l]) } ) }, { template: (inputs) => html`

${_lang(nbText.selectVars.forms.Vulnerability.mainTitle)}

${Object.values( inputs )}

` } ) : "", exposureGroup_form: atlas_cat === "Exposure" ? Inputs.form( { exposureGroup_sel: ScrollingMultiSelect_collapsible( // Object.values(commodities).flat(), ["Crop", "Livestock", "Population"], { label: "Exposure Category", values: ["Crop", "Livestock", "Population"], format: (l) => _lang(nbText.selectVars.forms.Exposure.selectors.variable.options[l]) } ) }, { template: (inputs) => html`

${_lang(nbText.selectVars.forms.Exposure.mainTitle)}

${Object.values( inputs )}

` } ) : "" }; return Inputs.form(form_elements); }48:T595,{ let adminOptions = [ Inputs.bind( Inputs.select(admin0_names, { label: _lang(nbText.selectGeog.selectors.admin0_name.title), value: "SSA", format: (l) => _lang(nbText.general.adminNames[l]) || l }), viewof country ) ]; if (["admin1_name", "admin2_name", "admin3_name"].includes(admin_aggregationLevel)) { adminOptions.push( Inputs.bind( Inputs.select(admin1_names, { label: _lang(nbText.selectGeog.selectors.admin1_name.title), format: (l) => _lang(nbText.general.adminNames[l]) || l }), viewof admin1_sel ) ); } if (["admin2_name", "admin3_name"].includes(admin_aggregationLevel)) { adminOptions.push( Inputs.bind( Inputs.select(admin2_names, { label: _lang(nbText.selectGeog.selectors.admin2_name.title), format: (l) => _lang(nbText.general.adminNames[l]) || l }), viewof admin2_sel ) ); } if (admin_aggregationLevel === "admin3_name") { adminOptions.push( Inputs.bind( Inputs.select(admin3_names, { label: _lang(nbText.selectGeog.selectors.aggregationLvl.options.admin3_name), format: (l) => l }), viewof admin3_sel ) ); } return Inputs.form(adminOptions, { template: (inputs) => htl.html`

${inputs}

` }); }49:T1bef,viewof data_to_visualise ={ if (previewType === "Map") { return generateMapForm() } else if (previewType === "Table") { return Inputs.search(NbData["explore_data"], {placeholder: _lang(nbText.general.search)}); } else if (previewType === "Plot") { return generatePlotForm() } function generateMapForm() { const form_elements = []; if (atlas_cat === "Hazard") { let hazardOptions = DataSelector_form.hazardGroup_form.hazard_sel; form_elements.push( Inputs.bind( Inputs.select( hazardOptions.map((value) => value), // new Map( // hazardOptions.map((value) => [_lang(nbText.selectVars.forms.Hazard.selectors.hazard.options[value]), value]) // ), { label: _lang(nbText.selectVars.forms.Hazard.selectors.hazard.title), format: l => _lang(nbText.general.hazards[l]) } ), viewof hazard_sel ) ); let timePeriodOptions = DataSelector_form.hazardGroup_form.timeperiod_sel; form_elements.push( Inputs.bind( Inputs.select( timePeriodOptions.map((value) => value), // new Map( // timePeriodOptions.map((value) => [timePeriod_dict[value], value]) // ), { label: _lang(nbText.selectVars.forms.Hazard.selectors.period.title), format: l => _lang(nbText.selectVars.forms.Hazard.selectors.period.options[l]) || l } ), viewof time_sel ) ); if (time_sel !== "historic") { form_elements.push( Inputs.bind( Inputs.select(["SSP245", "SSP585"], { label: _lang(nbText.ViewExplore.selectors.visualiseVars.hazards.scenario.title)}), viewof ssp_sel ) ); } } if (atlas_cat === "Vulnerability") { form_elements.push( Inputs.bind( Inputs.select( DataSelector_form.vulnerabilityGroup_form.vulnerability_sel, { label: _lang(nbText.selectCategory.selector.options.Vulnerability.title), format: l => _lang(nbText.selectVars.forms.Vulnerability.selectors.variable.options[l])||l // label: "Adaptive Capacity" } ), viewof ac_cat ) ); if (ac_cat === "Gender") { let ac_subcats = Object.keys(vulnerability_dict["gender"]) form_elements.push( Inputs.bind( Inputs.select(ac_subcats, { label: _lang(nbText.ViewExplore.selectors.visualiseVars.vulnerability.gender.title), format: l => _lang(nbText.ViewExplore.selectors.visualiseVars.vulnerability.gender.options[l]) }), viewof ac_subcat ) ); } else if (ac_cat === "Poverty") { // let ac_subcats = new Map( // Object.entries(vulnerability_dict["poverty"]).map(([key, value]) => [ // value, // key // ]) // ); let ac_subcats = Object.keys(vulnerability_dict["poverty"]) form_elements.push( Inputs.bind( Inputs.select(ac_subcats, { label: _lang(nbText.ViewExplore.selectors.visualiseVars.vulnerability.poverty.title), format: l => _lang(nbText.ViewExplore.selectors.visualiseVars.vulnerability.poverty.options[l]) }), viewof ac_subcat ) ); } } if (atlas_cat === "Exposure") { let subTitle; let subSelections; if (exposure_cat === "Population") { subTitle = _lang(nbText.ViewExplore.selectors.visualiseVars.exposure.population.title); subSelections = ["total_pop", "rural_pop", "urban_pop"] } else { subTitle = _lang(nbText.ViewExplore.selectors.visualiseVars.exposure.commodity.title); subSelections = commodities[exposure_cat]; } form_elements.push( Inputs.bind( Inputs.select( DataSelector_form.exposureGroup_form.exposureGroup_sel, { label: _lang(nbText.ViewExplore.selectors.visualiseVars.exposure.title), format: l => _lang(nbText.selectVars.forms.Exposure.selectors.variable.options[l]) } ), viewof exposure_cat ) ); form_elements.push( Inputs.bind( Inputs.select(subSelections, { label: subTitle, format: l => _lang(nbText.ViewExplore.selectors.visualiseVars.exposure.population.options[l] || nbText.general.commodities[l]) }), viewof exposure_subCat ) ); if (exposure_cat !== "Population") { form_elements.push( Inputs.bind( Inputs.select(exposure_var_choices, { label: _lang(nbText.ViewExplore.selectors.visualiseVars.exposure.exposureVariable.title), format: (t) => _lang(nbText.ViewExplore.selectors.visualiseVars.exposure.exposureVariable.options[t]) }), viewof exposure_var ) ) } } return Inputs.form(form_elements, { template: (inputs) => htl.html`

${_lang(nbText.ViewExplore.selectors.visualiseVars.titleMap)}

${inputs}

` }); } function generatePlotForm() { let form_elements = []; let title = _lang(nbText.ViewExplore.selectors.visualiseVars.titlePlot); if (atlas_cat === "Exposure") { form_elements.push( Inputs.bind( Inputs.select( DataSelector_form.exposureGroup_form.exposureGroup_sel, { label: _lang(nbText.ViewExplore.selectors.visualiseVars.exposure.title), format: l => _lang(nbText.selectVars.forms.Exposure.selectors.variable.options[l]) } ), viewof exposure_cat ) ); if (exposure_cat.includes("Crop") || exposure_cat.includes("Livestock")) { form_elements.push( Inputs.bind( Inputs.select(exposure_var_choices, { label: _lang(nbText.ViewExplore.selectors.visualiseVars.exposure.exposureVariable.title), format: (t) => _lang(nbText.ViewExplore.selectors.visualiseVars.exposure.exposureVariable.options[t]) }), viewof exposure_var ) ); } } if (atlas_cat === "Hazard") { let hazardOptions = DataSelector_form.hazardGroup_form.hazard_sel; form_elements.push( Inputs.bind( Inputs.select( hazardOptions.map((value) => value), { label: _lang(nbText.selectVars.forms.Hazard.selectors.hazard.title), format: l => _lang(nbText.general.hazards[l]) } ), viewof hazard_sel ) ); } if (atlas_cat === "Vulnerability") { title = ""; } return Inputs.form(form_elements, { template: (inputs) => htl.html`

${title}

${inputs}

` }); } } 4a:T5a62,viewof exportMapExploreDatasets = { const t = nbText.export.mapExplore; // Helper: Download blob const downloadBlob = (blob, filename) => { const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = filename; a.style.display = 'none'; document.body.appendChild(a); a.click(); document.body.removeChild(a); setTimeout(() => URL.revokeObjectURL(url), 100); }; // Helper: Show notification const showNotification = (message, isError = false) => { const notification = html`

${message}

`; document.body.appendChild(notification); setTimeout(() => { if (notification.parentNode) { notification.parentNode.removeChild(notification); } }, isError ? 5000 : 3000); }; // Helper: Download as SVG const downloadAsSvg = (svg, filename) => { const clone = svg.cloneNode(true); const serializer = new XMLSerializer(); const svgString = serializer.serializeToString(clone); const blob = new Blob([svgString], { type: 'image/svg+xml' }); downloadBlob(blob, filename); }; // Helper: Download as raster (PNG/JPEG) - fixed for tainted canvas const downloadAsRaster = (svg, filename, format) => { return new Promise((resolve, reject) => { const clone = svg.cloneNode(true); const serializer = new XMLSerializer(); let svgString = serializer.serializeToString(clone); if (!svgString.includes('\n' + svgString; } // Get dimensions from viewBox or attributes let width, height; const viewBox = svg.getAttribute('viewBox'); if (viewBox) { const parts = viewBox.split(/\s+|,/).filter(p => p).map(parseFloat); if (parts.length === 4) { width = parts[2]; height = parts[3]; } } // Fallback to width/height attributes or bounding rect if (!width || !height) { width = svg.getAttribute('width') ? parseFloat(svg.getAttribute('width')) : null; height = svg.getAttribute('height') ? parseFloat(svg.getAttribute('height')) : null; } if (!width || !height) { const rect = svg.getBoundingClientRect(); width = rect.width || 950; height = rect.height || 600; } // Use data URL instead of blob URL to avoid tainted canvas const svgDataUrl = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgString); const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = width; canvas.height = height; // Fill with white background for both PNG and JPEG ctx.fillStyle = 'white'; ctx.fillRect(0, 0, width, height); const img = new Image(); // Set crossOrigin to avoid tainted canvas img.crossOrigin = 'anonymous'; img.onload = () => { try { ctx.drawImage(img, 0, 0, width, height); canvas.toBlob( (blob) => { if (blob) { downloadBlob(blob, filename); resolve(); } else { reject(new Error('Failed to create blob from canvas')); } }, format === 'png' ? 'image/png' : 'image/jpeg', format === 'jpeg' || format === 'jpg' ? 0.92 : 1.0 ); } catch (drawError) { reject(new Error(`Failed to draw image: ${drawError.message}`)); } }; img.onerror = () => { reject(new Error('Failed to load SVG image')); }; img.src = svgDataUrl; }); }; // Helper: Download as CSV const downloadAsCsv = (data, filename) => { if (!data || data.length === 0) { throw new Error(_lang(t.noDataAvailable)); } const headers = Object.keys(data[0]); const csvRows = []; csvRows.push(headers.join(',')); for (const row of data) { const values = headers.map(header => { const value = row[header]; if (value === null || value === undefined) return ''; const stringValue = String(value); if (stringValue.includes(',') || stringValue.includes('"') || stringValue.includes('\n')) { return `"${stringValue.replace(/"/g, '""')}"`; } return stringValue; }); csvRows.push(values.join(',')); } const csvContent = csvRows.join('\n'); const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' }); downloadBlob(blob, filename); }; // Helper: Download as JSON const downloadAsJson = (data, filename) => { const jsonString = JSON.stringify(data, null, 2); const blob = new Blob([jsonString], { type: 'application/json' }); downloadBlob(blob, filename); }; // Helper: Download as GeoJSON const downloadAsGeoJson = (geojson, filename) => { const jsonString = JSON.stringify(geojson, null, 2); const blob = new Blob([jsonString], { type: 'application/geo+json' }); downloadBlob(blob, filename); }; // Find Map SVG - handles both Plot.js wrapper and D3.js direct SVG const findMap = () => { const cells = Array.from(document.querySelectorAll('.observablehq--cell')); let currentCellIndex = -1; // Find the current export cell for (let i = 0; i < cells.length; i++) { if (cells[i].contains(select)) { currentCellIndex = i; break; } } // Look in the immediately previous cell first if (currentCellIndex > 0) { const prevCell = cells[currentCellIndex - 1]; if (prevCell) { // First check for Plot.js wrapper (admin3 maps) const plotWrapper = prevCell.querySelector('.plot-map-wrapper'); if (plotWrapper) { const svg = plotWrapper.querySelector('svg'); if (svg) { console.log('Found Plot.js map SVG in wrapper'); return svg; } } // Then check for direct SVG (D3.js maps) const svg = prevCell.querySelector('svg'); if (svg) { // Check if it looks like a map (has many paths or is wide) const paths = svg.querySelectorAll('path'); const rect = svg.getBoundingClientRect(); // Maps typically have many path elements or are wide if (paths.length > 10 || rect.width > 500) { console.log('Found D3.js map SVG'); return svg; } } } } // Fallback: find all SVGs and pick the one that looks most like a map const allSvgs = Array.from(document.querySelectorAll('svg')); if (allSvgs.length > 0) { // Score each SVG based on map-like characteristics const scoredSvgs = allSvgs.map(svg => { const paths = svg.querySelectorAll('path'); const rect = svg.getBoundingClientRect(); const score = paths.length * 2 + (rect.width > 600 ? 100 : 0) + (rect.height > 400 ? 50 : 0); return { svg, score }; }); // Return the highest scoring SVG scoredSvgs.sort((a, b) => b.score - a.score); if (scoredSvgs[0].score > 50) { console.log('Found map SVG via scoring'); return scoredSvgs[0].svg; } } return null; }; // Get GeoJSON from adminLevel_spatial const getGeoJson = () => { return { type: "FeatureCollection", features: adminLevel_spatial.features.map(feature => ({ type: "Feature", geometry: feature.geometry, properties: { ...feature.properties, value: feature.properties.value !== undefined ? feature.properties.value : null } })) }; }; // Get CSV data from GeoJSON features const getCsvData = () => { return adminLevel_spatial.features.map(feature => { const props = feature.properties; return { ...props, value: props.value !== undefined ? props.value : null }; }); }; // Get JSON data (tabular format) const getJsonData = () => { return getCsvData(); }; // Helper: Download as Shapefile (pure-JS, no external dependencies) const downloadAsShapefile = (geojson, filename) => { showNotification('Generating shapefile...', false); const crcTable = (() => { const tb = new Uint32Array(256); for (let i = 0; i < 256; i++) { let c = i; for (let j = 0; j < 8; j++) c = (c & 1) ? (0xEDB88320 ^ (c >>> 1)) : (c >>> 1); tb[i] = c; } return tb; })(); const crc32 = (data) => { let crc = 0xFFFFFFFF; for (let i = 0; i < data.length; i++) crc = crcTable[(crc ^ data[i]) & 0xFF] ^ (crc >>> 8); return (crc ^ 0xFFFFFFFF) >>> 0; }; const buildShapefiles = (features) => { let shapeType = 5; for (const f of features) { if (!f.geometry) continue; if (f.geometry.type === 'Point' || f.geometry.type === 'MultiPoint') { shapeType = 1; break; } if (f.geometry.type === 'LineString' || f.geometry.type === 'MultiLineString') { shapeType = 3; break; } if (f.geometry.type === 'Polygon' || f.geometry.type === 'MultiPolygon') { shapeType = 5; break; } } const getRings = (geom) => { if (geom.type === 'Polygon') return geom.coordinates; if (geom.type === 'MultiPolygon') return geom.coordinates.flat(1); if (geom.type === 'LineString') return [geom.coordinates]; if (geom.type === 'MultiLineString') return geom.coordinates; return null; }; let gMinX = Infinity, gMinY = Infinity, gMaxX = -Infinity, gMaxY = -Infinity; const recs = features.map(f => { const geom = f.geometry; if (!geom) return { type: 0 }; if (shapeType === 1) { const coords = geom.type === 'Point' ? geom.coordinates : geom.coordinates[0]; const [x, y] = coords; if (x < gMinX) gMinX = x; if (y < gMinY) gMinY = y; if (x > gMaxX) gMaxX = x; if (y > gMaxY) gMaxY = y; return { type: 1, x, y, contentBytes: 20 }; } const rings = getRings(geom); if (!rings) return { type: 0 }; let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity, totalPts = 0; for (const ring of rings) { for (const [px, py] of ring) { if (px < minX) minX = px; if (py < minY) minY = py; if (px > maxX) maxX = px; if (py > maxY) maxY = py; totalPts++; } } if (minX < gMinX) gMinX = minX; if (minY < gMinY) gMinY = minY; if (maxX > gMaxX) gMaxX = maxX; if (maxY > gMaxY) gMaxY = maxY; const contentBytes = 44 + 4 * rings.length + 16 * totalPts; return { type: shapeType, rings, minX, minY, maxX, maxY, totalPts, contentBytes }; }); if (!isFinite(gMinX)) { gMinX = 0; gMinY = 0; gMaxX = 0; gMaxY = 0; } const HDR = 100; let shpSize = HDR; for (const r of recs) shpSize += 8 + (r.type === 0 ? 4 : r.contentBytes); const shpBuf = new Uint8Array(shpSize); const shxBuf = new Uint8Array(HDR + recs.length * 8); const sv = new DataView(shpBuf.buffer); const xv = new DataView(shxBuf.buffer); const writeHdr = (dv, fileLen) => { dv.setInt32(0, 9994, false); dv.setInt32(24, fileLen / 2, false); dv.setInt32(28, 1000, true); dv.setInt32(32, shapeType, true); dv.setFloat64(36, gMinX, true); dv.setFloat64(44, gMinY, true); dv.setFloat64(52, gMaxX, true); dv.setFloat64(60, gMaxY, true); }; writeHdr(sv, shpSize); writeHdr(xv, shxBuf.length); let shpOff = HDR; for (let i = 0; i < recs.length; i++) { const r = recs[i]; const cLen = r.type === 0 ? 4 : r.contentBytes; xv.setInt32(HDR + i * 8, shpOff / 2, false); xv.setInt32(HDR + i * 8 + 4, cLen / 2, false); sv.setInt32(shpOff, i + 1, false); sv.setInt32(shpOff + 4, cLen / 2, false); shpOff += 8; if (r.type === 0) { sv.setInt32(shpOff, 0, true); shpOff += 4; } else if (r.type === 1) { sv.setInt32(shpOff, 1, true); shpOff += 4; sv.setFloat64(shpOff, r.x, true); shpOff += 8; sv.setFloat64(shpOff, r.y, true); shpOff += 8; } else { sv.setInt32(shpOff, r.type, true); shpOff += 4; sv.setFloat64(shpOff, r.minX, true); shpOff += 8; sv.setFloat64(shpOff, r.minY, true); shpOff += 8; sv.setFloat64(shpOff, r.maxX, true); shpOff += 8; sv.setFloat64(shpOff, r.maxY, true); shpOff += 8; sv.setInt32(shpOff, r.rings.length, true); shpOff += 4; sv.setInt32(shpOff, r.totalPts, true); shpOff += 4; let ptIdx = 0; for (const ring of r.rings) { sv.setInt32(shpOff, ptIdx, true); shpOff += 4; ptIdx += ring.length; } for (const ring of r.rings) { for (const [px, py] of ring) { sv.setFloat64(shpOff, px, true); shpOff += 8; sv.setFloat64(shpOff, py, true); shpOff += 8; } } } } return { shp: shpBuf, shx: shxBuf }; }; const buildDbf = (features) => { const enc = new TextEncoder(); const allProps = features.map(f => f.properties || {}); const allKeys = [...new Set(allProps.flatMap(p => Object.keys(p)))]; const fields = allKeys.slice(0, 255).map(key => { const name = key.substring(0, 10); const vals = allProps.map(p => p[key]).filter(v => v !== null && v !== undefined); const isNum = vals.length > 0 && vals.every(v => typeof v === 'number' || (typeof v === 'string' && v.trim() !== '' && !isNaN(+v)) ); if (isNum) { const hasDecimal = vals.some(v => !Number.isInteger(typeof v === 'number' ? v : +v)); return { name, key, type: 'N', length: hasDecimal ? 18 : 11, decimals: hasDecimal ? 6 : 0 }; } const maxLen = Math.min(254, Math.max(1, ...vals.map(v => enc.encode(String(v)).length))); return { name, key, type: 'C', length: maxLen, decimals: 0 }; }); const n = features.length; const hdrSize = 32 + fields.length * 32 + 1; const recSize = 1 + fields.reduce((s, f) => s + f.length, 0); const buf = new Uint8Array(hdrSize + n * recSize + 1); const dv = new DataView(buf.buffer); const now = new Date(); buf[0] = 3; buf[1] = now.getFullYear() - 1900; buf[2] = now.getMonth() + 1; buf[3] = now.getDate(); dv.setUint32(4, n, true); dv.setUint16(8, hdrSize, true); dv.setUint16(10, recSize, true); let fOff = 32; for (const f of fields) { const nb = enc.encode(f.name); for (let i = 0; i < 11; i++) buf[fOff + i] = i < nb.length ? nb[i] : 0; buf[fOff + 11] = f.type.charCodeAt(0); buf[fOff + 16] = f.length; buf[fOff + 17] = f.decimals; fOff += 32; } buf[fOff] = 0x0D; for (let i = 0; i < n; i++) { const props = allProps[i]; let rOff = hdrSize + i * recSize; buf[rOff++] = 0x20; for (const f of fields) { const raw = props[f.key]; let s; if (raw === null || raw === undefined) { s = ' '.repeat(f.length); } else if (f.type === 'N') { s = String(typeof raw === 'number' ? raw : +raw).padStart(f.length).substring(0, f.length); } else { s = String(raw).substring(0, f.length).padEnd(f.length); } const bytes = enc.encode(s); for (let j = 0; j < f.length; j++) buf[rOff + j] = j < bytes.length ? bytes[j] : 0x20; rOff += f.length; } } buf[buf.length - 1] = 0x1A; return buf; }; const buildPrj = () => new TextEncoder().encode( 'GEOGCS["GCS_WGS_1984",DATUM["D_WGS_1984",SPHEROID["WGS_1984",6378137.0,298.257223563]],' + 'PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]]' ); const buildZip = (files) => { const enc = new TextEncoder(); const localParts = [], centralParts = []; let localOffset = 0; for (const { name, data } of files) { const nb = enc.encode(name); const crc = crc32(data), size = data.length; const lh = new Uint8Array(30 + nb.length); const lv = new DataView(lh.buffer); lv.setUint32(0, 0x04034b50, true); lv.setUint16(4, 20, true); lv.setUint16(8, 0, true); lv.setUint32(14, crc, true); lv.setUint32(18, size, true); lv.setUint32(22, size, true); lv.setUint16(26, nb.length, true); lh.set(nb, 30); const cdh = new Uint8Array(46 + nb.length); const cv = new DataView(cdh.buffer); cv.setUint32(0, 0x02014b50, true); cv.setUint16(4, 20, true); cv.setUint16(6, 20, true); cv.setUint32(16, crc, true); cv.setUint32(20, size, true); cv.setUint32(24, size, true); cv.setUint16(28, nb.length, true); cv.setUint32(42, localOffset, true); cdh.set(nb, 46); localParts.push(lh, data); centralParts.push(cdh); localOffset += lh.length + size; } const cdirOffset = localOffset; const cdirSize = centralParts.reduce((s, p) => s + p.length, 0); const eocd = new Uint8Array(22); const ev = new DataView(eocd.buffer); ev.setUint32(0, 0x06054b50, true); ev.setUint16(8, files.length, true); ev.setUint16(10, files.length, true); ev.setUint32(12, cdirSize, true); ev.setUint32(16, cdirOffset, true); const all = [...localParts, ...centralParts, eocd]; const total = all.reduce((s, p) => s + p.length, 0); const out = new Uint8Array(total); let pos = 0; for (const p of all) { out.set(p, pos); pos += p.length; } return out; }; const { shp, shx } = buildShapefiles(geojson.features); const dbf = buildDbf(geojson.features); const prj = buildPrj(); const base = filename.replace(/\.[^.]+$/, ''); const zipData = buildZip([ { name: `${base}.shp`, data: shp }, { name: `${base}.shx`, data: shx }, { name: `${base}.dbf`, data: dbf }, { name: `${base}.prj`, data: prj }, ]); downloadBlob(new Blob([zipData], { type: 'application/zip' }), `${base}.zip`); }; // Main download function const downloadChart = async (format) => { // Add delay before finding SVG for image formats if (format === 'png' || format === 'jpeg' || format === 'jpg' || format === 'svg') { await new Promise(resolve => setTimeout(resolve, 300)); } const timestamp = new Date().toISOString().replace(/[:.]/g, '-').split('T')[0]; const varLabel = var_unit?.label || 'map'; const baseFilename = `explore-datasets-map-${varLabel.replace(/[^a-z0-9]/gi, '-')}-${timestamp}`; if (format === 'csv') { try { const csvData = getCsvData(); const filename = `${baseFilename}.csv`; downloadAsCsv(csvData, filename); showNotification(_lang(t.csvSuccess)); } catch (error) { console.error('CSV export failed:', error); showNotification(`${_lang(t.csvFailed)} ${error.message || error}`, true); } return; } if (format === 'json') { try { const jsonData = getJsonData(); const filename = `${baseFilename}.json`; downloadAsJson(jsonData, filename); showNotification(_lang(t.jsonSuccess)); } catch (error) { console.error('JSON export failed:', error); showNotification(`${_lang(t.jsonFailed)} ${error.message || error}`, true); } return; } if (format === 'geojson') { try { const geojson = getGeoJson(); const filename = `${baseFilename}.geojson`; downloadAsGeoJson(geojson, filename); showNotification(_lang(t.geojsonSuccess)); } catch (error) { console.error('GeoJSON export failed:', error); showNotification(`${_lang(t.geojsonFailed)} ${error.message || error}`, true); } return; } if (format === 'shapefile') { try { const geojson = getGeoJson(); const filename = `${baseFilename}.shp`; downloadAsShapefile(geojson, filename); showNotification(_lang(t.shapefileSuccess)); } catch (error) { console.error('Shapefile export failed:', error); showNotification(`${_lang(t.shapefileFailed)} ${error.message || error}`, true); } return; } // Image formats (PNG, JPEG, SVG) const svg = findMap(); if (!svg) { const errorMsg = _lang(t.mapNotFound); console.error(errorMsg); showNotification(errorMsg, true); return; } const filename = `${baseFilename}.${format}`; try { if (format === 'svg') { downloadAsSvg(svg, filename); showNotification(_lang(t.exportSuccess)); } else { await downloadAsRaster(svg, filename, format); showNotification(_lang(t.exportSuccess)); } } catch (error) { console.error('Download failed:', error); showNotification(`${_lang(t.downloadFailed)} ${error.message || error}`, true); } }; // Create select element const select = html``; select.onchange = async (event) => { const format = event.target.value; if (format) { try { await downloadChart(format); event.target.value = ''; } catch (error) { console.error('Export error:', error); } } }; return html`

${_lang(t.title)}

${select}

• ${_lang(t.hintPng)}

• ${_lang(t.hintJpeg)}

• ${_lang(t.hintSvg)}

• ${_lang(t.hintCsv)}

• ${_lang(t.hintJson)}

• ${_lang(t.hintGeojson)}

• ${_lang(t.hintShapefile)}

`; } 4b:T129b,codechunk = { if (codeLanguage === "NoCode") { return html`