'\n +''\n +'

'+this.escapeHtml(layerMetadataLabel)+'

'\n +'

'+name+'

'\n +(layerName?'

'+layerName+'

':'')\n +'

'+abstract+'

'\n +'

';\n document.body.appendChild(modal);\n const close=()=>modal.remove();\n modal.querySelector('[data-layer-info-close]').addEventListener('click',close);\n modal.querySelector('[data-layer-info-backdrop]').addEventListener('click',close);\n const esc=(e)=>{ if(e.key==='Escape'){ close(); document.removeEventListener('keydown',esc); } };\n document.addEventListener('keydown',esc);\n }\n layerControlMarkup(key, horizon){\n const hasLayer=this.hasPublishedLayer(key, horizon);\n const layerMetadataLabel=this.escapeHtml((this.props.i18nCompare&&this.props.i18nCompare.layerMetadata)||'');\n const viewLayerMetadataTip=this.escapeHtml(this.T('viewLayerMetadataTip'));\n const comingSoonLabel=this.escapeHtml((this.props.i18nLayerUnavailable&&this.props.i18nLayerUnavailable.title)||'');\n const badge='

'\n +''+comingSoonLabel+''\n +'

';\n if(!hasLayer) return badge;\n const opacity=Math.round(this.getLayerOpacity(key)*100);\n const horizonAttr=horizon?' data-layer-info-horizon=\"'+this.escapeHtml(horizon)+'\"':'';\n const opacityLabel=this.escapeHtml(this.T('opacityLabel'));\n const layerOpacityAria=this.escapeHtml(this.T('layerOpacityAria'));\n return '

'\n +''\n +''+opacityLabel+''\n +''\n +''+opacity+'%'\n +''\n +'

';\n }\n wireLayerControls(root){\n const scope=root||document;\n scope.querySelectorAll('[data-layer-opacity]').forEach(input=>{\n if(input.__raizOpacityReady) return;\n input.__raizOpacityReady=true;\n const stop=(e)=>e.stopPropagation();\n input.addEventListener('click',stop);\n input.addEventListener('pointerdown',stop);\n input.addEventListener('touchstart',stop,{passive:true});\n input.addEventListener('input',(e)=>{ e.stopPropagation(); this.setLayerOpacity(input.getAttribute('data-layer-opacity'), Number(input.value)/100); });\n });\n scope.querySelectorAll('[data-layer-info]').forEach(btn=>{\n if(btn.__raizInfoReady) return;\n btn.__raizInfoReady=true;\n btn.addEventListener('click',(e)=>{ e.preventDefault(); e.stopPropagation(); this.showLayerInfo(btn.getAttribute('data-layer-info'), btn.getAttribute('data-layer-info-horizon')); });\n });\n this.setupTooltips();\n }\n\n // ---------- country dropdown ----------\n flagFromCountryCode(code){\n if(!code || code.length!==2) return '🌍';\n const upper=code.toUpperCase();\n return String.fromCodePoint(...[...upper].map(ch=>127397+ch.charCodeAt(0)));\n }\n availableCountryEntries(){\n return Object.keys(this.COUNTRIES).map(id=>{\n const c=this.COUNTRIES[id];\n return { id, name:c.name, region:c.region, flag:c.flag||this.flagFromCountryCode(c.code), available:true };\n }).sort((a,b)=>a.name.localeCompare(b.name));\n }\n searchCountryEntries(query){\n const q=(query||'').trim().toLowerCase();\n if(!q) return this.availableCountryEntries();\n const matches=(this.WORLD_COUNTRIES||[]).filter(c=>c.name.toLowerCase().includes(q) || (c.region||'').toLowerCase().includes(q));\n return matches.slice(0,40).map(c=>({\n id:c.id,\n name:c.name,\n region:c.region,\n flag:this.flagFromCountryCode(c.code),\n available:!!this.COUNTRIES[c.id],\n })).sort((a,b)=>{\n if(a.available!==b.available) return a.available?-1:1;\n return a.name.localeCompare(b.name);\n });\n }\n renderCountryMenu(query){\n const list=document.querySelector('[data-country-list]');\n if(!list) return;\n const q=(query||'').trim();\n const entries=this.searchCountryEntries(q);\n if(!entries.length){\n list.innerHTML='

'+this.escapeHtml(this.T('noCountriesFound', { q }))+'

';\n return;\n }\n const comingSoonLabel=this.escapeHtml((this.props.i18nLayerUnavailable&&this.props.i18nLayerUnavailable.title)||'');\n list.innerHTML=entries.map(c=>{\n if(!c.available){\n return '

'\n +''+c.flag+''\n +''+c.name+''+c.region+''\n +''+comingSoonLabel+'

';\n }\n return '';\n }).join('');\n list.querySelectorAll('[data-country-opt]').forEach(b=>b.addEventListener('click',(e)=>{\n e.preventDefault();\n e.stopPropagation();\n this.toggleCountryMenu(false);\n this.setCountry(b.getAttribute('data-country-opt'), true);\n }));\n Object.keys(this.COUNTRIES).forEach(k=>{ const chk=document.querySelector('[data-country-check=\"'+k+'\"]'); if(chk) chk.style.opacity=k===this.country?'1':'0'; });\n }\n buildCountryMenu(){\n this.renderCountryMenu('');\n const search=document.querySelector('[data-country-search]');\n const clr=document.querySelector('[data-country-search-clear]');\n if(search && !search.__raizCountrySearchReady){\n search.__raizCountrySearchReady=true;\n search.addEventListener('click',e=>e.stopPropagation());\n search.addEventListener('input',()=>{\n if(clr) clr.style.display=search.value?'inline-flex':'none';\n this.renderCountryMenu(search.value);\n });\n search.addEventListener('keydown',(e)=>{\n if(e.key==='Enter'){\n e.preventDefault();\n const firstMatch=document.querySelector('[data-country-opt]');\n if(firstMatch) firstMatch.click();\n } else if(e.key==='Escape'){\n e.preventDefault();\n this.toggleCountryMenu(false);\n }\n });\n }\n if(clr && !clr.__raizCountryClearReady){\n clr.__raizCountryClearReady=true;\n clr.addEventListener('click',(e)=>{\n e.stopPropagation();\n if(search){ search.value=''; search.focus(); }\n clr.style.display='none';\n this.renderCountryMenu('');\n });\n }\n const tog=document.querySelector('[data-country-toggle]');\n tog.addEventListener('click',(e)=>{ e.stopPropagation(); this.toggleCountryMenu(); });\n document.addEventListener('click',(e)=>{ if(!document.querySelector('[data-country-select]').contains(e.target)) this.toggleCountryMenu(false); });\n }\n toggleCountryMenu(force){\n const menu=document.querySelector('[data-country-menu]'); const chev=document.querySelector('[data-country-chev]');\n if(!menu || !chev) return;\n const open = force===undefined ? menu.style.display==='none' : force;\n menu.style.display=open?'block':'none'; chev.style.transform=open?'rotate(180deg)':'rotate(0)';\n const search=document.querySelector('[data-country-search]');\n const clr=document.querySelector('[data-country-search-clear]');\n if(open){\n if(search) search.value='';\n if(clr) clr.style.display='none';\n this.renderCountryMenu('');\n if(search) setTimeout(()=>search.focus(), 30);\n }\n }\n\n // ---------- panel + mini toggles ----------\n /** Mirrors setMini() exactly: a closed legend is a floating launcher icon button,\n * an open legend is the full panel with its own close button - the same two-state\n * shape as the layer summary widget, rather than the legend's previous \"collapse\n * to an icon that replaces itself in place\" behaviour. */\n setLegend(open){\n this.legendOpen=open;\n const legend=document.querySelector('[data-legend]');\n const launch=document.querySelector('[data-legend-launch]');\n if(!legend) return;\n legend.style.display=open?'block':'none';\n if(launch) launch.style.display=open?'none':'inline-flex';\n this.updateControlVisibility();\n this.avoidLegendOverlap();\n }\n setPanel(open){\n this.panelOpen=open;\n const panel=document.querySelector('[data-layers-panel]'); const launch=document.querySelector('[data-panel-launch]');\n panel.style.transform=open?'translateX(0)':'translateX(calc(-100% - 30px))';\n launch.style.display=open?'none':'inline-flex';\n if(open && this.isMobileView()){\n this.setLegend(false);\n this.setMini(false);\n this.setCompare(false);\n }\n this.updateControlVisibility();\n setTimeout(()=>{ if(this.map) this.map.invalidateSize(); }, 320);\n }\n setMini(open){\n this.miniOpen=open;\n document.querySelector('[data-mini]').style.display=open?'flex':'none';\n document.querySelector('[data-mini-launch]').style.display=open?'none':'inline-flex';\n this.updateControlVisibility();\n if(open && this.syncWidgetDragForViewport) this.syncWidgetDragForViewport();\n if(open) this.updateMini();\n this.avoidLegendOverlap();\n this.panForMiniOnMobile(open);\n }\n /** On mobile the summary widget is a bottom sheet that can cover the very map\n * area the user just tapped to open it - panning the map up by roughly the\n * sheet's height keeps that spot visible above it, instead of leaving the user to\n * manually drag the map to see what they were just looking at. Reversed on close\n * so the map ends up back where it started rather than drifting on every toggle. */\n panForMiniOnMobile(open){\n if(!this.map || !this.isMobileView()) return;\n const mini=document.querySelector('[data-mini]');\n if(!mini) return;\n if(open){\n // Measure after the widget is shown so its real rendered height is available.\n requestAnimationFrame(()=>{\n const height=mini.getBoundingClientRect().height;\n if(!height) return;\n this._miniPanShift=Math.round(height/2);\n this.map.panBy([0, -this._miniPanShift], { animate:true, duration:0.35 });\n });\n } else if(this._miniPanShift){\n // By the time we're closing, display is already 'none' so the widget can't be\n // measured any more - reuse the shift recorded when it opened instead.\n this.map.panBy([0, this._miniPanShift], { animate:true, duration:0.35 });\n this._miniPanShift=0;\n }\n }\n /** The layer summary widget and the legend are both bottom-right anchored, so a\n * tall summary panel can rise up and cover the legend beneath it. Rather than a\n * fixed offset (fragile against legend/widget content that changes height, or the\n * widget being dragged elsewhere on desktop), measure their actual rendered boxes\n * and nudge the legend clear only when they truly overlap - it slides back to its\n * default spot the moment they don't. */\n avoidLegendOverlap(){\n const legend=document.querySelector('[data-legend]');\n const legendLaunch=document.querySelector('[data-legend-launch]');\n const mini=document.querySelector('[data-mini]');\n // Whichever of the two is actually on screen right now - the full panel when\n // open, or just the launcher pill when closed - is what needs to dodge the\n // summary panel; the other one is reset so it doesn't carry stale offsets into\n // its next appearance.\n const target=(legend && legend.style.display!=='none') ? legend : legendLaunch;\n const other=target===legend ? legendLaunch : legend;\n if(!target) return;\n // Slide left, not up: the top-right corner already carries the basemap switcher,\n // zoom, compare, help and story controls, so pushing the legend upward to dodge\n // the layer summary panel just walks it into that cluster instead. Sliding left\n // keeps it in the same row as the summary panel, in the open space beside it,\n // and never collides with anything anchored to the top edge.\n const DEFAULT_BOTTOM='82px';\n const miniActive=!!mini && mini.style.display!=='none' && !this.isMobileView();\n const resetStyle=(el)=>{ if(!el) return; el.style.right='16px'; el.style.bottom=DEFAULT_BOTTOM; el.removeAttribute('data-shifted'); };\n resetStyle(other);\n const dock=()=>{\n const miniRect=mini.getBoundingClientRect();\n const gap=14;\n target.style.right=(window.innerWidth-miniRect.left+gap)+'px';\n // Bottom-align with the summary panel it now sits beside - icon or expanded\n // card alike - so the two widgets read as one row instead of the legend\n // floating at a different height above the panel.\n target.style.bottom=(window.innerHeight-miniRect.bottom)+'px';\n target.setAttribute('data-shifted','1');\n };\n if(!miniActive){ resetStyle(target); return; }\n requestAnimationFrame(()=>{\n // Test against the target's natural resting spot (right:16/bottom:82), not its\n // current on-screen box - once docked, the dock offset is built to just clear\n // the summary panel, so re-measuring the current (already-clear) box would\n // always read as \"no overlap\" and immediately bounce it back undocked. Width\n // and height are unaffected by which edge positions the box, so they're read\n // straight off the live element and combined with the default offsets instead.\n const targetRect=target.getBoundingClientRect();\n const miniRect=mini.getBoundingClientRect();\n const restingRight=window.innerWidth-16;\n const restingLeft=restingRight-targetRect.width;\n const restingBottom=window.innerHeight-82;\n const restingTop=restingBottom-targetRect.height;\n const overlapsHorizontally=restingLeftminiRect.left;\n const overlapsVertically=restingTopminiRect.top;\n if(overlapsHorizontally && overlapsVertically) dock(); else resetStyle(target);\n });\n }\n isMobileView(){\n return window.matchMedia && window.matchMedia('(max-width:900px)').matches;\n }\n updateControlVisibility(){\n const mobile=this.isMobileView();\n const immersive=mobile && (this.panelOpen || this.storyOpen);\n const panelLaunch=document.querySelector('[data-panel-launch]');\n const tools=document.querySelector('[data-map-tools]');\n const country=document.querySelector('[data-country-select]');\n const legend=document.querySelector('[data-legend]');\n const legendLaunch=document.querySelector('[data-legend-launch]');\n const mini=document.querySelector('[data-mini]');\n const miniLaunch=document.querySelector('[data-mini-launch]');\n const layersPanel=document.querySelector('[data-layers-panel]');\n const compareUi=document.querySelector('[data-compare-ui]');\n const compareHandle=document.querySelector('[data-compare-handle]');\n const compareButton=document.querySelector('[data-tool=\"compare\"]');\n const compareSupported=this.activeSupportsProjection();\n if(tools) tools.style.display=immersive?'none':'flex';\n if(country) country.style.display=immersive?'none':'block';\n if(panelLaunch) panelLaunch.style.display=(this.panelOpen || (mobile && this.storyOpen))?'none':'inline-flex';\n // Legend visibility is otherwise owned entirely by setLegend()/this.legendOpen -\n // this only forces it shut for the mobile \"immersive\" state (layers panel or\n // story open) and keeps the launcher pill's shown/hidden state in sync with\n // whichever the legend currently is. Calling setLegend() here would recurse\n // (it calls back into updateControlVisibility()), so state is set directly.\n if(immersive){\n if(legend) legend.style.display='none';\n if(legendLaunch) legendLaunch.style.display='none';\n this.legendOpen=false;\n } else if(legendLaunch){\n legendLaunch.style.display=this.legendOpen?'none':'inline-flex';\n }\n if(immersive && mini) mini.style.display='none';\n if(miniLaunch) miniLaunch.style.display=(immersive || this.miniOpen)?'none':'inline-flex';\n if(mobile && this.compareOpen){\n if(panelLaunch) panelLaunch.style.display='none';\n if(legend) legend.style.display='none';\n if(legendLaunch) legendLaunch.style.display='none';\n if(miniLaunch) miniLaunch.style.display='none';\n if(mini) mini.style.display='none';\n }\n if(mobile && this.storyOpen && layersPanel) layersPanel.style.transform='translateX(calc(-100% - 30px))';\n if(compareUi) compareUi.style.display=(immersive||!this.compareOpen)?'none':'block';\n if(compareHandle) compareHandle.style.display=(immersive||!this.compareOpen)?'none':'block';\n if(compareButton){\n compareButton.style.display=(!immersive && compareSupported)?'inline-flex':'none';\n compareButton.disabled=!compareSupported;\n compareButton.setAttribute('aria-hidden', compareSupported?'false':'true');\n compareButton.setAttribute('tabindex', compareSupported?'0':'-1');\n }\n }\n setLayerTab(tab){\n this.layerTab='outputs';\n document.querySelectorAll('[data-layer-tab]').forEach(b=>{ const on=b.getAttribute('data-layer-tab')==='outputs'; b.style.background=on?'#14562b':'transparent'; b.style.color=on?'#ffffff':'#5a6a5c'; });\n document.querySelectorAll('[data-layer-section]').forEach(sec=>{ sec.style.display=sec.getAttribute('data-layer-section')==='outputs'?'block':'none'; });\n }\n\n // ---------- map ----------\n\t waitForMap(){\n\t if(!window.L){ setTimeout(()=>this.waitForMap(), 120); return; }\n\t this.patchLeafletTileReady();\n\t this.initMap();\n\t }\n\t patchLeafletTileReady(){\n\t if(!window.L || !L.GridLayer || !L.GridLayer.prototype || L.GridLayer.prototype.__raizTileReadyGuard) return;\n\t const original=L.GridLayer.prototype._tileReady;\n\t if(typeof original!=='function') return;\n\t L.GridLayer.prototype._tileReady=function(coords, err, tile){\n\t if(!this._map) return;\n\t try{\n\t return original.call(this, coords, err, tile);\n\t }catch(error){\n\t if(!this._map || (error && String(error.message||error).includes('_fadeAnimated'))) return;\n\t throw error;\n\t }\n\t };\n\t L.GridLayer.prototype.__raizTileReadyGuard=true;\n\t }\n\t initMap(){\n\t const c=this.COUNTRIES[this.country];\n\t const map = L.map(document.querySelector('[data-map]'), { zoomControl:false, attributionControl:true, minZoom:2, worldCopyJump:true, fadeAnimation:true }).setView([c.center[1], c.center[0]], c.zoom);\n this.map = map; window.__map = map;\n map.createPane('raizCities');\n map.getPane('raizCities').style.zIndex='630';\n map.getPane('raizCities').style.pointerEvents='none';\n this.tiles = {\n sat: L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', { maxZoom:18, attribution:'Esri World Imagery' }),\n terrain: L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', { maxZoom:18, attribution:'Esri World Topo' }),\n streets: L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', { maxZoom:20, subdomains:'abcd', attribution:'© OpenStreetMap, © CARTO' })\n };\n this.tiles[this.basemap].addTo(map);\n const mobile = window.matchMedia('(max-width:900px)').matches;\n this.buildPanels();\n this.setLayerTab(this.MAP_DEFAULTS.layerTab);\n this.setPanel(mobile?!!this.MAP_DEFAULTS.panelOpenMobile:!!this.MAP_DEFAULTS.panelOpenDesktop);\n this.setLegend(mobile?!!this.MAP_DEFAULTS.legendOpenMobile:!!this.MAP_DEFAULTS.legendOpenDesktop);\n this.setMini(mobile?!!this.MAP_DEFAULTS.summaryOpenMobile:!!this.MAP_DEFAULTS.summaryOpenDesktop);\n this.setBasemap(this.basemap);\n this.setupWidgetDrag(); this.setupMapIdentify();\n map.on('moveend zoomend resize',()=>{ if(this.compareOpen) this.scheduleCompareRefresh(); this.declutterCityLabels(); });\n this.setCountry(this.country, false);\n if(this.MAP_DEFAULTS.compareOpen && this.activeSupportsProjection()) this.setCompare(true);\n const veil=document.querySelector('[data-loading]'); if(veil){ veil.style.opacity='0'; setTimeout(()=>veil.remove(), 500); }\n setTimeout(()=>{ map.invalidateSize(); this.flyCountry(); }, 350);\n }\n\n flyCountry(){\n if(!this.map) return;\n try{ this.map.stop(); }catch(e){}\n if(this._bounds){ try{ this.map.flyToBounds(this._bounds, { padding:[60,60], duration:1.8 }); return; }catch(e){ try{ this.map.fitBounds(this._bounds, { padding:[60,60] }); return; }catch(e2){} } }\n const c=this.COUNTRIES[this.country]; this.map.flyTo([c.center[1], c.center[0]], c.zoom, { duration:1.8 });\n }\n\n setBasemap(bm){\n if(!this.map || !this.tiles || !this.tiles[bm]) return;\n this.basemap=bm;\n document.querySelectorAll('[data-basemap]').forEach(b=>{ const on=b.getAttribute('data-basemap')===bm; b.style.background=on?'#14562b':'transparent'; b.style.color=on?'#ffffff':'#4c574d'; });\n ['sat','terrain','streets'].forEach(id=>{ if(this.tiles[id] && this.map.hasLayer(this.tiles[id])) this.map.removeLayer(this.tiles[id]); });\n this.tiles[bm].addTo(this.map); this.tiles[bm].bringToBack();\n }\n\n outputByKey(key){ return this.OUTPUTS.find(o=>o.key===key); }\n comparableHorizonKeys(key){\n const o=this.outputByKey(key);\n if(!o || !o.geoserverByHorizon) return [];\n return this.availableHorizonKeys(o);\n }\n activeSupportsProjection(){ return this.comparableHorizonKeys(this.active).length>1; }\n preferredHorizonForLayer(key){\n const output=this.outputByKey(key);\n const horizons=this.comparableHorizonKeys(key);\n if(!horizons.length) return 'reference';\n if(horizons.includes(this.horizon)) return this.horizon;\n if(horizons.includes('reference')) return 'reference';\n if(horizons.includes(this.compareTarget)) return this.compareTarget;\n return this.resolveLayerHorizon(output, this.horizon);\n }\n compareLeftHorizon(){\n const horizons=this.comparableHorizonKeys(this.active);\n if(horizons.includes('reference')) return 'reference';\n return horizons[0]||this.horizon;\n }\n dashboardTabForLayer(key){\n if(['vulnerability','potentialImpact','exposure','sensitivity','adaptiveCapacity'].includes(key)) return key;\n for(const pillar of this.PILLARS){\n for(const dim of pillar.dims){\n if(dim.key===key || dim.outputLayerKey===key) return pillar.key;\n for(const ind of dim.inds || []){\n if(ind.k===key) return pillar.key;\n }\n }\n }\n return 'overview';\n }\n dashboardHref(){\n return this.localeHref('/dashboard/#'+this.country+':'+this.dashboardTabForLayer(this.active));\n }\n inputWeightsHref(){\n return this.localeHref('/dashboard/#'+this.country+':inputs');\n }\n updateDashboardLink(){\n const dash=document.querySelector('[data-open-dash]');\n if(dash) dash.setAttribute('href', this.dashboardHref());\n const inputWeights=document.querySelector('[data-input-weights-link]');\n if(inputWeights) inputWeights.setAttribute('href', this.inputWeightsHref());\n }\n updateCompareAvailability(){\n const button=document.querySelector('[data-tool=\"compare\"]');\n if(!button) return;\n const supported=this.activeSupportsProjection();\n if(this.compareOpen && !supported) this.setCompare(false);\n button.style.display=supported?'inline-flex':'none';\n button.disabled=!supported;\n button.setAttribute('aria-hidden', supported?'false':'true');\n button.setAttribute('tabindex', supported?'0':'-1');\n }\n updateHorizonButtons(){\n const supportedHorizons=this.comparableHorizonKeys(this.active);\n const projected=supportedHorizons.length>1;\n document.querySelectorAll('[data-horizon]').forEach(b=>{\n const id=b.getAttribute('data-horizon'); const allowed=projected?supportedHorizons.includes(id):id==='reference'; const on=id===this.horizon;\n b.disabled=!allowed; b.style.opacity=allowed?'1':'.45'; b.style.cursor=allowed?'pointer':'not-allowed';\n b.style.background=on?'#14562b':'transparent'; b.style.color=on?'#ffffff':'#5a6a5c';\n });\n }\n setHorizon(h){\n const supportedHorizons=this.comparableHorizonKeys(this.active);\n if(supportedHorizons.length && !supportedHorizons.includes(h)) return;\n if(!supportedHorizons.length && h!=='reference') return;\n this.horizon=h;\n this.updateHorizonButtons();\n this.setLayer(this.active);\n this.updateMini();\n if(this.isMobileView() && this.miniOpen) this.setMini(false);\n }\n\n _clearCountryLayers(){\n if(this.wmsLayer){ this.map.removeLayer(this.wmsLayer); this.wmsLayer=null; }\n if(this.pendingLayer){ try{ this.map.removeLayer(this.pendingLayer); }catch(e){} this.pendingLayer=null; }\n }\n\n\n setCountry(key, fly){\n if(!this.COUNTRIES[key]) return;\n if(this.compareOpen) this.setCompare(false);\n this.country=key; const c=this.COUNTRIES[key];\n document.querySelector('[data-country-label]').textContent=c.name;\n document.querySelector('[data-country-title]').textContent=c.name;\n document.querySelector('[data-mini-country]').textContent=c.name;\n const miniLaunchLabel=document.querySelector('[data-mini-launch-label]'); if(miniLaunchLabel) miniLaunchLabel.textContent=this.T('snapshotOf', { name:c.name });\n this.updateDashboardLink();\n if(history.replaceState) history.replaceState(null,'', '#'+key);\n Object.keys(this.COUNTRIES).forEach(k=>{ const chk=document.querySelector('[data-country-check=\"'+k+'\"]'); if(chk) chk.style.opacity=k===key?'1':'0'; });\n if(this.map) this._clearCountryLayers();\n if(this.map) this._applyCountry(key, c, fly);\n }\n\n _applyCountry(key, c, fly){\n this._clearCountryLayers();\n this.applyAssessment(key);\n // Rebuild the layer list against the new country's own OUTPUTS/PILLARS -\n // without this, the panel keeps showing whichever country was rendered last,\n // so a layer available for the new country can still read \"Coming Soon\" (or\n // vice versa) until something else happens to trigger a re-render.\n this.renderOutputControls();\n this.loadDashboardData(key);\n const bb=c.bbox;\n this._bounds=[[bb[1],bb[0]],[bb[3],bb[2]]];\n this.setLayer(this.active);\n if(fly!==false) this.flyCountry();\n document.querySelector('[data-country-title]').textContent=c.name;\n document.querySelector('[data-mini-country]').textContent=c.name;\n const miniLaunchLabel=document.querySelector('[data-mini-launch-label]'); if(miniLaunchLabel) miniLaunchLabel.textContent=this.T('snapshotOf', { name:c.name });\n this.updateDashboardLink();\n if(history.replaceState) history.replaceState(null,'', '#'+key);\n this.updateMini();\n this.renderCitiesLayer();\n }\n\n // ---------- cities layer ----------\n cityMarkerIcon(isCapital){\n return L.divIcon({\n className:'',\n html:'

'\n +(isCapital?'':'')\n +''\n +'

',\n iconSize:[isCapital?16:10, isCapital?16:10],\n iconAnchor:[isCapital?8:5, isCapital?8:5],\n });\n }\n renderCitiesLayer(){\n if(!this.map) return;\n if(this._citiesLayer){ try{ this.map.removeLayer(this._citiesLayer); }catch(e){} this._citiesLayer=null; }\n this._cityMarkers=[];\n const data=this.CITIES && this.CITIES[this.country];\n if(!data) return;\n const group=L.layerGroup();\n const entries=[{ name:data.capital.name, coordinates:data.capital.coordinates, isCapital:true }]\n .concat((data.provinces||[]).map(p=>({ name:p.name, coordinates:p.coordinates, isCapital:false })));\n entries.forEach(entry=>{\n const marker=L.marker([entry.coordinates[1], entry.coordinates[0]], {\n icon:this.cityMarkerIcon(entry.isCapital),\n pane:'raizCities',\n interactive:false,\n keyboard:false,\n });\n marker.bindTooltip(entry.name, {\n permanent:true,\n direction:'top',\n offset:[0, entry.isCapital?-11:-8],\n className:'raiz-city-label'+(entry.isCapital?' raiz-city-label--capital':''),\n interactive:false,\n });\n marker.__raizCityPriority=entry.isCapital?0:1;\n marker.__raizCityName=entry.name;\n group.addLayer(marker);\n this._cityMarkers.push(marker);\n });\n this._citiesLayer=group;\n if(this.citiesVisible) group.addTo(this.map);\n setTimeout(()=>this.declutterCityLabels(), 60);\n }\n setCitiesVisible(visible){\n this.citiesVisible=!!visible;\n if(this._citiesLayer && this.map){\n const has=this.map.hasLayer(this._citiesLayer);\n if(this.citiesVisible && !has) this._citiesLayer.addTo(this.map);\n else if(!this.citiesVisible && has) this.map.removeLayer(this._citiesLayer);\n }\n document.querySelectorAll('[data-tool=\"cities\"]').forEach(b=>{\n b.setAttribute('aria-pressed', this.citiesVisible?'true':'false');\n b.style.background=this.citiesVisible?'#14562b':'#ffffff';\n b.style.color=this.citiesVisible?'#ffffff':'#14562b';\n });\n const legendRow=document.querySelector('[data-legend-cities]');\n if(legendRow) legendRow.style.display=this.citiesVisible?'flex':'none';\n }\n toggleCitiesVisible(){ this.setCitiesVisible(!this.citiesVisible); }\n declutterCityLabels(){\n if(!this._cityMarkers || !this._cityMarkers.length || !this.map) return;\n const ordered=[...this._cityMarkers].sort((a,b)=>(a.__raizCityPriority-b.__raizCityPriority) || a.__raizCityName.localeCompare(b.__raizCityName));\n const boxes=[];\n ordered.forEach(marker=>{\n const tooltip=marker.getTooltip();\n if(!tooltip) return;\n const pt=this.map.latLngToContainerPoint(marker.getLatLng());\n const el=tooltip.getElement();\n const w=el?el.offsetWidth:(marker.__raizCityName.length*6+16);\n const h=el?el.offsetHeight:16;\n const box={ left:pt.x-w/2, right:pt.x+w/2, top:pt.y-h-14, bottom:pt.y-14 };\n const overlaps=boxes.some(b=>!(box.rightb.right || box.bottomb.bottom));\n if(overlaps && marker.__raizCityPriority!==0){\n marker.closeTooltip();\n } else {\n marker.openTooltip();\n boxes.push(box);\n }\n });\n }\n\n getTileLayer(key, horizon){\n const currentCountry=this.country||this.MAP_DEFAULTS.country;\n if(currentCountry!==this.ASSESSMENT_COUNTRY) return null;\n const output=this.outputByKey(key);\n const outputGs=this.activeGeoServerConfig(output, horizon);\n if(outputGs){\n const cfg=outputGs;\n const gridSet=cfg.gridSet||'EPSG:900913';\n const format=cfg.format||'image/png';\n return { kind:cfg.service==='wms'?'wms':'wmts', layerName:cfg.layerName, styleName:cfg.styleName||'', url:this.GWC_WMTS_ENDPOINT+'?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER='+encodeURIComponent(cfg.layerName)+'&STYLE='+encodeURIComponent(cfg.wmtsStyleName||cfg.styleName||'')+'&TILEMATRIXSET='+encodeURIComponent(gridSet)+'&TILEMATRIX='+encodeURIComponent(gridSet)+':{z}&TILEROW={y}&TILECOL={x}&FORMAT='+encodeURIComponent(format), opacity:this.getLayerOpacity(key), legendUrl:cfg.legendUrl||'' };\n }\n const dynamic=this.SERVER_LAYER_BY_KEY&&this.SERVER_LAYER_BY_KEY[key];\n if(dynamic) return { kind:dynamic.service==='wms'?'wms':'wmts', layerName:dynamic.layerName, url:this.GWC_WMTS_ENDPOINT+'?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER='+encodeURIComponent(dynamic.layerName)+'&STYLE='+encodeURIComponent(dynamic.wmtsStyleName||dynamic.styleName||'')+'&TILEMATRIXSET='+encodeURIComponent(dynamic.gridSet||'EPSG:900913')+'&TILEMATRIX='+encodeURIComponent(dynamic.gridSet||'EPSG:900913')+':{z}&TILEROW={y}&TILECOL={x}&FORMAT='+encodeURIComponent(dynamic.format||'image/png'), opacity:this.getLayerOpacity(key), legendUrl:'' };\n const cfg=this.TILE_LAYERS&&this.TILE_LAYERS[key];\n if(!cfg) return null;\n const layerName=cfg.countries&&cfg.countries[this.country];\n if(!layerName) return null;\n const gridSet=cfg.gridSet||'EPSG:900913';\n const format=cfg.format||'image/png';\n return { kind:'wmts', url:this.GWC_WMTS_ENDPOINT+'?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER='+encodeURIComponent(layerName)+'&STYLE='+encodeURIComponent(cfg.wmtsStyleName||cfg.styleName||'')+'&TILEMATRIXSET='+encodeURIComponent(gridSet)+'&TILEMATRIX='+encodeURIComponent(gridSet)+':{z}&TILEROW={y}&TILECOL={x}&FORMAT='+encodeURIComponent(format), opacity:this.getLayerOpacity(key), legendUrl:cfg.legendUrl||'' };\n }\n hasPublishedLayer(key, horizon){\n const currentCountry=this.country||this.MAP_DEFAULTS.country;\n if(currentCountry!==this.ASSESSMENT_COUNTRY) return false;\n const output=this.outputByKey(key);\n if(output&&output.geoserverByHorizon){\n const horizons=this.availableHorizonKeys(output);\n if(!horizon) return horizons.length>0;\n return horizons.includes(horizon);\n }\n return !!(output&&output.geoserver) || !!this.getTileLayer(key, horizon);\n }\n\n clearCompareLayers(){\n if(!this.map) return;\n if(this.compareLeftLayer){ try{ this.map.removeLayer(this.compareLeftLayer); }catch(e){} this.compareLeftLayer=null; }\n if(this.compareRightLayer){ try{ this.map.removeLayer(this.compareRightLayer); }catch(e){} this.compareRightLayer=null; }\n if(this.comparePendingLeftLayer){ try{ this.map.removeLayer(this.comparePendingLeftLayer); }catch(e){} this.comparePendingLeftLayer=null; }\n if(this.comparePendingRightLayer){ try{ this.map.removeLayer(this.comparePendingRightLayer); }catch(e){} this.comparePendingRightLayer=null; }\n if(this.compareRefreshTimer){ clearTimeout(this.compareRefreshTimer); this.compareRefreshTimer=null; }\n if(this.compareLoadingTimer){ clearTimeout(this.compareLoadingTimer); this.compareLoadingTimer=null; }\n this.finishLayerLoading(this.layerLoadingToken);\n }\n setLayerLoadingVeil(active){\n const veil=document.querySelector('[data-layer-loading-veil]');\n if(!veil) return;\n veil.setAttribute('data-active', active?'1':'0');\n veil.setAttribute('aria-hidden', active?'false':'true');\n }\n compareImageUrl(key, horizon){\n const output=this.outputByKey(key);\n const gs=this.activeGeoServerConfig(output, horizon);\n if(!gs||!this.map) return '';\n const b=this.map.getBounds();\n const size=this.map.getSize();\n const params=new URLSearchParams({\n service:'WMS',\n version:'1.1.1',\n request:'GetMap',\n layers:gs.layerName,\n styles:gs.styleName||'',\n srs:'EPSG:4326',\n bbox:[b.getWest(),b.getSouth(),b.getEast(),b.getNorth()].join(','),\n width:String(Math.max(1, Math.round(size.x))),\n height:String(Math.max(1, Math.round(size.y))),\n format:'image/png',\n transparent:'true'\n });\n return this.WMS_ENDPOINT+'?'+params.toString();\n }\n compareImageLayer(key, horizon){\n const url=this.compareImageUrl(key, horizon);\n if(!url||!this.map) return null;\n const bounds=this.map.getBounds();\n return L.imageOverlay(url, bounds, {\n opacity:this.getLayerOpacity(key),\n interactive:false,\n zIndex:620,\n attribution:'GeoServer WMS'\n });\n }\n horizonConfigForLayer(key, horizon){\n const output=this.outputByKey(key||this.active);\n if(output&&output.geoserverByHorizon&&output.geoserverByHorizon[horizon]) return output.geoserverByHorizon[horizon];\n return null;\n }\n horizonLabel(horizon, key){\n const layerH=this.horizonConfigForLayer(key||this.active, horizon);\n const fallback=this.HORIZONS[horizon]||{ label:horizon, years:'' };\n const label=(layerH&&layerH.label)||fallback.label||horizon;\n const years=(layerH&&layerH.years)||fallback.years||'';\n return label+(years?' · '+years:'');\n }\n updateCompareLabels(){\n const activeOutput=this.outputByKey(this.active);\n const leftHorizon=this.compareLeftHorizon();\n const title=document.querySelector('[data-compare-title]');\n const leftKicker=document.querySelector('[data-compare-left-kicker]');\n const left=document.querySelector('[data-compare-left-label]');\n if(title) title.textContent=this.T('overTime', { name:activeOutput?activeOutput.name:this.T('selectedLayerFallback') });\n if(leftKicker) leftKicker.textContent=leftHorizon==='reference'?((this.props.i18nCompare&&this.props.i18nCompare.referenceKicker)||''):this.T('leftLabel');\n if(left) left.textContent=this.horizonLabel(leftHorizon, this.active);\n document.querySelectorAll('[data-compare-target]').forEach(b=>{\n const key=b.getAttribute('data-compare-target');\n const allowed=this.comparableHorizonKeys(this.active).includes(key) && key!==leftHorizon;\n const on=key===this.compareTarget;\n b.style.display=allowed?'inline-flex':'none';\n b.disabled=!allowed;\n b.style.background=on?'#14562b':'transparent';\n b.style.color=on?'#ffffff':'#5a6a5c';\n });\n }\n updateCompareClip(percent){\n this.compareSplit=Math.max(18, Math.min(82, Number(percent)));\n const handle=document.querySelector('[data-compare-handle]');\n [this.compareLeftLayer,this.comparePendingLeftLayer].forEach(layer=>{\n const el=layer&&layer.getElement&&layer.getElement();\n if(el) el.style.clipPath='inset(0 '+(100-this.compareSplit)+'% 0 0)';\n });\n [this.compareRightLayer,this.comparePendingRightLayer].forEach(layer=>{\n const el=layer&&layer.getElement&&layer.getElement();\n if(el) el.style.clipPath='inset(0 0 0 '+this.compareSplit+'%)';\n });\n if(handle) handle.style.left=this.compareSplit+'%';\n }\n scheduleCompareRefresh(){\n if(this.compareRefreshTimer) clearTimeout(this.compareRefreshTimer);\n this.compareRefreshTimer=setTimeout(()=>{\n this.compareRefreshTimer=null;\n this.updateCompareLayers();\n }, 140);\n }\n promoteCompareLayers(leftLayer, rightLayer, token, loadingToken){\n if(token!==this.compareUpdateToken || !this.compareOpen || !this.map) {\n [leftLayer,rightLayer].forEach(layer=>{ if(layer){ try{ this.map.removeLayer(layer); }catch(e){} } });\n this.finishLayerLoading(loadingToken);\n return;\n }\n if(this.comparePromotedToken===token) return;\n this.comparePromotedToken=token;\n if(this.compareLoadingTimer){ clearTimeout(this.compareLoadingTimer); this.compareLoadingTimer=null; }\n const oldLeft=this.compareLeftLayer;\n const oldRight=this.compareRightLayer;\n this.compareLeftLayer=leftLayer;\n this.compareRightLayer=rightLayer;\n this.comparePendingLeftLayer=null;\n this.comparePendingRightLayer=null;\n [leftLayer,rightLayer].forEach((layer,index)=>{\n if(!layer) return;\n if(layer.setOpacity) layer.setOpacity(this.getLayerOpacity(this.active));\n if(layer.setZIndex) layer.setZIndex(index===0?620:621);\n const el=layer.getElement&&layer.getElement();\n if(el) el.style.transition='opacity .18s ease';\n });\n [oldLeft,oldRight].forEach(layer=>{ if(layer){ try{ this.map.removeLayer(layer); }catch(e){} } });\n this.updateCompareClip(this.compareSplit);\n this.finishLayerLoading(loadingToken);\n }\n startCompareLoading(leftHorizon, rightHorizon){\n const token=this.startLayerLoading(this.active);\n const title=document.querySelector('[data-layer-loading-title]');\n if(title) title.textContent=this.T('loadingComparison');\n this.setLayerLoadingVeil(true);\n this.setLayerLoadingDetail(this.T('comparisonPreparing', { left:this.horizonLabel(leftHorizon, this.active), right:this.horizonLabel(rightHorizon, this.active) }), token);\n return token;\n }\n updateCompareLayers(){\n if(!this.compareOpen || !this.map) return;\n if(!this.activeSupportsProjection()){ this.setCompare(false); return; }\n if(this.wmsLayer){ try{ this.map.removeLayer(this.wmsLayer); }catch(e){} this.wmsLayer=null; }\n const horizons=this.comparableHorizonKeys(this.active);\n const leftHorizon=this.compareLeftHorizon();\n if(!horizons.includes(leftHorizon)) return;\n if(!horizons.includes(this.compareTarget) || this.compareTarget===leftHorizon) this.compareTarget=horizons.find(h=>h!==leftHorizon)||horizons[0];\n if(this.comparePendingLeftLayer){ try{ this.map.removeLayer(this.comparePendingLeftLayer); }catch(e){} this.comparePendingLeftLayer=null; }\n if(this.comparePendingRightLayer){ try{ this.map.removeLayer(this.comparePendingRightLayer); }catch(e){} this.comparePendingRightLayer=null; }\n const token=(this.compareUpdateToken||0)+1;\n this.compareUpdateToken=token;\n const loadingToken=this.startCompareLoading(leftHorizon, this.compareTarget);\n const leftLayer=this.compareImageLayer(this.active,leftHorizon);\n const rightLayer=this.compareImageLayer(this.active,this.compareTarget);\n if(!leftLayer || !rightLayer){ this.finishLayerLoading(loadingToken); return; }\n this.comparePendingLeftLayer=leftLayer;\n this.comparePendingRightLayer=rightLayer;\n let loaded=0;\n const onReady=()=>{\n loaded+=1;\n if(loaded===2) this.promoteCompareLayers(leftLayer, rightLayer, token, loadingToken);\n };\n if(this.compareLoadingTimer) clearTimeout(this.compareLoadingTimer);\n this.compareLoadingTimer=setTimeout(()=>{\n this.setLayerLoadingDetail(this.T('comparisonStillLoading'), loadingToken);\n this.promoteCompareLayers(leftLayer, rightLayer, token, loadingToken);\n }, 8500);\n [leftLayer,rightLayer].forEach((layer,index)=>{\n if(layer.setOpacity) layer.setOpacity(0.01);\n if(layer.setZIndex) layer.setZIndex(index===0?618:619);\n layer.once('load', onReady);\n layer.once('error',()=>{ if(token===this.compareUpdateToken){ this.setLayerLoadingDetail(this.T('comparisonTilesSlow'), loadingToken); } });\n layer.addTo(this.map);\n });\n this.updateCompareClip(this.compareSplit);\n this.updateCompareLabels();\n }\n setCompare(open){\n if(!this.map) return;\n if(open && !this.activeSupportsProjection()) return;\n this.compareOpen=!!open;\n const button=document.querySelector('[data-tool=\"compare\"]');\n const compareUi=document.querySelector('[data-compare-ui]');\n if(compareUi) compareUi.setAttribute('data-open', this.compareOpen?'1':'0');\n if(button){\n button.style.background=this.compareOpen?'#14562b':'#ffffff';\n button.style.color=this.compareOpen?'#ffffff':'#14562b';\n button.setAttribute('aria-pressed', this.compareOpen?'true':'false');\n }\n if(this.compareOpen){\n this.horizon=this.compareLeftHorizon();\n if(this.isMobileView()) this.setPanel(false);\n this.setLegend(false);\n this.setMini(false);\n if(this.syncComparePanelDragForViewport) this.syncComparePanelDragForViewport();\n this.updateCompareLayers();\n this.flyCountry();\n } else {\n this.clearCompareLayers();\n this.setLayer(this.active);\n }\n this.updateControlVisibility();\n }\n setupCompareDrag(){\n const handle=document.querySelector('[data-compare-handle]');\n if(!handle || handle.__raizCompareReady) return;\n handle.__raizCompareReady=true;\n let dragging=false;\n const move=(clientX)=>{\n const rect=document.querySelector('[data-map]').getBoundingClientRect();\n const pct=((clientX-rect.left)/rect.width)*100;\n this.updateCompareClip(pct);\n };\n handle.addEventListener('pointerdown',(e)=>{ dragging=true; handle.setPointerCapture(e.pointerId); move(e.clientX); });\n handle.addEventListener('pointermove',(e)=>{ if(dragging) move(e.clientX); });\n handle.addEventListener('pointerup',(e)=>{ dragging=false; try{ handle.releasePointerCapture(e.pointerId); }catch(err){} });\n handle.addEventListener('pointercancel',()=>{ dragging=false; });\n }\n setupComparePanelDrag(){\n const panel=document.querySelector('[data-compare-ui]');\n const handle=document.querySelector('[data-compare-drag-handle]');\n const toggle=document.querySelector('[data-compare-drag]');\n if(!panel || !handle || !toggle || panel.__raizComparePanelReady) return;\n panel.__raizComparePanelReady=true;\n this.comparePanelDragEnabled=false;\n let dragging=false;\n let startX=0;\n let startY=0;\n let startLeft=0;\n let startTop=0;\n const isMobile=()=>window.matchMedia && window.matchMedia('(max-width: 900px)').matches;\n const clamp=(value,min,max)=>Math.max(min, Math.min(max, value));\n const bounds=()=>{\n const parentRect=panel.parentElement.getBoundingClientRect();\n const rect=panel.getBoundingClientRect();\n return {\n minLeft: 12,\n maxLeft: parentRect.width-rect.width-12,\n minTop: 12,\n maxTop: parentRect.height-rect.height-12\n };\n };\n const applyPosition=(left,top)=>{\n const b=bounds();\n panel.style.left=clamp(left,b.minLeft,b.maxLeft)+'px';\n panel.style.top=clamp(top,b.minTop,b.maxTop)+'px';\n panel.style.right='auto';\n panel.style.bottom='auto';\n panel.style.transform='none';\n };\n const setEnabled=(on)=>{\n this.comparePanelDragEnabled=!!on;\n panel.setAttribute('data-drag-enabled', this.comparePanelDragEnabled?'1':'0');\n toggle.style.background=this.comparePanelDragEnabled?'#14562b':'#ffffff';\n toggle.style.color=this.comparePanelDragEnabled?'#ffffff':'#5a6a5c';\n const movePanelLabel=(this.props.i18nCompare&&this.props.i18nCompare.movePanel)||'';\n toggle.setAttribute('title', this.comparePanelDragEnabled?this.T('lockComparisonPanel'):movePanelLabel);\n toggle.setAttribute('aria-label', this.comparePanelDragEnabled?this.T('lockComparisonPanel'):movePanelLabel);\n toggle.setAttribute('data-tip', this.comparePanelDragEnabled?this.T('lockComparisonPanelHint'):movePanelLabel);\n };\n this.syncComparePanelDragForViewport=()=>{\n if(isMobile()){\n setEnabled(false);\n toggle.style.display='none';\n toggle.setAttribute('aria-hidden','true');\n toggle.setAttribute('tabindex','-1');\n panel.style.left='';\n panel.style.top='';\n panel.style.right='';\n panel.style.bottom='';\n panel.style.transform='';\n } else {\n toggle.style.display='inline-flex';\n toggle.removeAttribute('aria-hidden');\n toggle.removeAttribute('tabindex');\n }\n };\n toggle.addEventListener('click',(e)=>{ e.preventDefault(); e.stopPropagation(); setEnabled(!this.comparePanelDragEnabled); });\n handle.addEventListener('pointerdown',(e)=>{\n if(isMobile()){ setEnabled(false); return; }\n if(!this.comparePanelDragEnabled) return;\n if(e.target.closest('button,a,input,select,textarea')) return;\n dragging=true;\n const rect=panel.getBoundingClientRect();\n const parentRect=panel.parentElement.getBoundingClientRect();\n startX=e.clientX;\n startY=e.clientY;\n startLeft=rect.left-parentRect.left;\n startTop=rect.top-parentRect.top;\n panel.setAttribute('data-dragging','1');\n try{ handle.setPointerCapture(e.pointerId); }catch(err){}\n e.preventDefault();\n });\n handle.addEventListener('pointermove',(e)=>{\n if(!dragging) return;\n applyPosition(startLeft+(e.clientX-startX), startTop+(e.clientY-startY));\n });\n const finish=(e)=>{\n if(!dragging) return;\n dragging=false;\n panel.setAttribute('data-dragging','0');\n try{ handle.releasePointerCapture(e.pointerId); }catch(err){}\n };\n handle.addEventListener('pointerup',finish);\n handle.addEventListener('pointercancel',finish);\n window.addEventListener('resize',()=>{\n this.syncComparePanelDragForViewport();\n if(isMobile()) return;\n const rect=panel.getBoundingClientRect();\n const parentRect=panel.parentElement.getBoundingClientRect();\n applyPosition(rect.left-parentRect.left,rect.top-parentRect.top);\n }, { passive:true });\n setEnabled(false);\n this.syncComparePanelDragForViewport();\n }\n\n layerDisplayName(key){\n const meta=this.layerMetaByKey(key);\n return (meta&&(meta.name||meta.n)) || this.T('selectedLayerFallback');\n }\n setLayerLoadingDetail(text, token){\n if(token && token!==this.layerLoadingToken) return;\n const detail=document.querySelector('[data-layer-loading-detail]');\n if(detail) detail.textContent=text;\n }\n startLayerLoading(key){\n const token=(this.layerLoadingToken||0)+1;\n this.layerLoadingToken=token;\n if(this.layerLoadingTimer) clearTimeout(this.layerLoadingTimer);\n if(this.layerLoadingFallbackTimer) clearTimeout(this.layerLoadingFallbackTimer);\n const card=document.querySelector('[data-layer-loading]');\n const title=document.querySelector('[data-layer-loading-title]');\n const detail=document.querySelector('[data-layer-loading-detail]');\n const name=this.layerDisplayName(key);\n if(title) title.textContent=this.T('loadingLayerName', { name });\n if(detail) detail.textContent=this.T('fetchingTilesFor', { country:this.COUNTRIES[this.country]&&this.COUNTRIES[this.country].name?this.COUNTRIES[this.country].name:this.T('selectedCountryFallback') });\n if(card) card.setAttribute('data-active','1');\n this.layerLoadingTimer=setTimeout(()=>{\n this.setLayerLoadingDetail(this.T('preparingTiles'), token);\n }, 2600);\n return token;\n }\n finishLayerLoading(token){\n if(token && token!==this.layerLoadingToken) return;\n if(this.layerLoadingTimer) clearTimeout(this.layerLoadingTimer);\n if(this.layerLoadingFallbackTimer) clearTimeout(this.layerLoadingFallbackTimer);\n const card=document.querySelector('[data-layer-loading]');\n if(card) card.setAttribute('data-active','0');\n this.setLayerLoadingVeil(false);\n }\n setLayerUnavailable(key, active){\n const panel=document.querySelector('[data-layer-unavailable]');\n if(!panel) return;\n if(active){\n const name=this.layerDisplayName(key);\n const country=this.COUNTRIES[this.country]&&this.COUNTRIES[this.country].name?this.COUNTRIES[this.country].name:this.T('thisCountryFallback');\n const title=panel.querySelector('[data-layer-unavailable-title]');\n const detail=panel.querySelector('[data-layer-unavailable-detail]');\n if(title) title.textContent=(this.props.i18nLayerUnavailable&&this.props.i18nLayerUnavailable.title)||'';\n if(detail) detail.textContent=this.T('layerPreparingFor', { name, country });\n panel.setAttribute('data-active','1');\n } else {\n panel.setAttribute('data-active','0');\n }\n }\n promoteTileLayer(nextLayer, oldLayer, token, targetOpacity){\n if(token!==this.layerLoadingToken || !this.map){\n if(nextLayer){ try{ this.map.removeLayer(nextLayer); }catch(e){} }\n return;\n }\n this.wmsLayer=nextLayer;\n if(this.pendingLayer===nextLayer) this.pendingLayer=null;\n if(nextLayer&&nextLayer.setOpacity) nextLayer.setOpacity(targetOpacity);\n try{ nextLayer.bringToFront(); }catch(e){}\n if(oldLayer && oldLayer!==nextLayer){\n setTimeout(()=>{ try{ this.map.removeLayer(oldLayer); }catch(e){} }, 180);\n }\n this.finishLayerLoading(token);\n }\n addRemoteLayer(tile, key, oldLayer){\n const targetOpacity=tile.opacity;\n const token=this.startLayerLoading(key);\n const layer=tile.kind==='wms'\n ? L.tileLayer.wms(this.WMS_ENDPOINT, { layers:tile.layerName, format:'image/png', transparent:true, opacity:oldLayer?0.01:targetOpacity, attribution:'GeoServer WMS' })\n : L.tileLayer(tile.url, { opacity:oldLayer?0.01:targetOpacity, maxZoom:18, attribution:'GeoServer WMTS' });\n let promoted=false;\n const promote=()=>{\n if(promoted) return;\n promoted=true;\n this.promoteTileLayer(layer, oldLayer, token, targetOpacity);\n };\n layer.once('load', promote);\n layer.on('tileerror',()=>{\n this.setLayerLoadingDetail(this.T('tilesSlow'), token);\n });\n layer.addTo(this.map);\n try{ layer.bringToFront(); }catch(e){}\n this.layerLoadingFallbackTimer=setTimeout(()=>{\n if(!oldLayer) this.setLayerLoadingDetail(this.T('layerStillLoading'), token);\n promote();\n }, 8500);\n return layer;\n }\n\n setLayer(key){\n this.active=key;\n if(this.compareOpen && !this.activeSupportsProjection()) this.setCompare(false);\n const selectedOutput=this.outputByKey(key);\n if(selectedOutput && selectedOutput.geoserverByHorizon) this.horizon=this.preferredHorizonForLayer(key);\n if(selectedOutput && !selectedOutput.hasProjectedHorizons && this.horizon!=='reference') this.horizon='reference';\n const tile=this.getTileLayer(key);\n const oldLayer=this.wmsLayer;\n if(tile){\n this.setLayerUnavailable(key, false);\n if(this.pendingLayer){ try{ this.map.removeLayer(this.pendingLayer); }catch(e){} this.pendingLayer=null; }\n this.pendingLayer=this.addRemoteLayer(tile, key, oldLayer);\n } else {\n if(oldLayer){ this.map.removeLayer(oldLayer); this.wmsLayer=null; }\n if(this.pendingLayer){ try{ this.map.removeLayer(this.pendingLayer); }catch(e){} this.pendingLayer=null; }\n this.finishLayerLoading(this.layerLoadingToken);\n this.setLayerUnavailable(key, true);\n }\n const all=[...this.OUTPUTS, ...this.allDimensionOutputs()];\n const found=this.withActiveGeoServer(all.find(o=>o.key===key||o.k===key));\n if(tile) this.renderLegend(found);\n else this.renderUnavailableLegend(found);\n this.updateHorizonButtons();\n const lh=document.querySelector('[data-legend-horizon]');\n if(lh){\n if(this.outputByKey(key) && this.activeSupportsProjection()){ lh.style.display='inline-block'; lh.textContent=this.horizonLabel(this.horizon, key); } else { lh.style.display='none'; }\n }\n this.setLayerStyles();\n this.updateMini();\n this.updateDashboardLink();\n if(this.compareOpen) this.updateCompareLayers();\n this.updateCompareAvailability();\n }\n chooseLayer(key, horizon){\n const sameLayer=key===this.active;\n const sameHorizon=!horizon || horizon===this.horizon;\n if(sameLayer && sameHorizon){\n this.setLayerStyles();\n this.updateMini();\n this.updateDashboardLink();\n if(this.isMobileView()) this.setPanel(false);\n return;\n }\n if(horizon) this.horizon=horizon;\n this.setLayer(key);\n if(this.isMobileView()) this.setPanel(false);\n }\n\n hexToRgb(hex){\n const raw=String(hex||'').replace('#','').trim();\n if(!/^[0-9a-fA-F]{6}$/.test(raw)) return { r:20, g:86, b:43 };\n return { r:parseInt(raw.slice(0,2),16), g:parseInt(raw.slice(2,4),16), b:parseInt(raw.slice(4,6),16) };\n }\n colorAlpha(hex, alpha){\n const c=this.hexToRgb(hex);\n return 'rgba('+c.r+','+c.g+','+c.b+','+alpha+')';\n }\n layerUiColor(key){\n const out=this.outputByKey(key);\n if(out&&out.color) return out.color;\n for(const pillar of this.PILLARS){\n if(pillar.key===key) return pillar.color;\n for(const dim of pillar.dims){\n if(dim.key===key || dim.outputLayerKey===key) return pillar.color;\n for(const ind of dim.inds){\n if(ind.k===key) return pillar.color;\n }\n }\n }\n return '#14562b';\n }\n\n allIndicators(){ const out=[]; this.PILLARS.forEach(p=>p.dims.forEach(d=>d.inds.forEach(i=>out.push(i)))); return out; }\n allDimensionOutputs(){ const out=[]; this.PILLARS.forEach(p=>p.dims.forEach(d=>out.push(this.dimensionOutputMeta(p,d)))); return out; }\n setLayerStyles(){\n document.querySelectorAll('[data-output]').forEach(b=>{ const key=b.getAttribute('data-output'); const h=b.getAttribute('data-output-horizon'); const color=this.layerUiColor(key); const on=key===this.active && (!h || h===this.horizon); const final=b.getAttribute('data-final-output')==='1'; b.style.borderColor=on?color:(final?this.colorAlpha(color,.38):'#e2e9dd'); b.style.background=on?this.colorAlpha(color,.12):(final?'linear-gradient(180deg,'+this.colorAlpha(color,.1)+','+this.colorAlpha(color,.05)+')':'#ffffff'); b.style.boxShadow=on?'0 8px 18px -10px '+this.colorAlpha(color,.55):(final?'0 8px 20px -18px '+this.colorAlpha(color,.55):'none'); });\n }\n\n prettyLayerName(name){ return String(name||'').replace(/^raiz:/,'').replace(/_/g,' ').replace(/\bw/g,c=>c.toUpperCase()); }\n layerKeyFromName(name){ return 'server__'+String(name||'').replace(/^raiz:/,'').replace(/[^a-zA-Z0-9]+/g,'_'); }\n isStyleName(name){ return /^raiz:raiz_/i.test(String(name||'')); }\n directChildText(el, tag){ for(const child of Array.from(el.children||[])){ if(child.localName===tag) return child.textContent||''; } return ''; }\n firstChildText(el, tag){ const node=Array.from(el.getElementsByTagName(tag)||[])[0]; return node ? (node.textContent||'') : ''; }\n normalizeLayerName(name){ const raw=String(name||''); return raw.indexOf(':')>=0 ? raw : 'raiz:'+raw; }\n parseCapabilities(text, service){\n const xml=new DOMParser().parseFromString(text, 'text/xml');\n const layers=[];\n Array.from(xml.getElementsByTagName('Layer')).forEach(layer=>{\n const raw=service==='wmts' ? this.firstChildText(layer,'Identifier') : this.directChildText(layer,'Name');\n const name=this.normalizeLayerName(raw);\n if(!raw || !name.startsWith('raiz:') || this.isStyleName(name)) return;\n const title=this.directChildText(layer,'Title')||this.firstChildText(layer,'Title')||this.prettyLayerName(name);\n const abstract=this.directChildText(layer,'Abstract')||this.firstChildText(layer,'Abstract')||'';\n layers.push({ layerName:name, title, abstract, service, gridSet:'EPSG:900913', format:'image/png' });\n });\n return layers;\n }\n async readCapabilities(){\n const sources=[\n { url:'/api/geoserver-capabilities.php?service=wmts', kind:'xml', service:'wmts' },\n { url:this.GWC_WMTS_ENDPOINT+'?SERVICE=WMTS&REQUEST=GetCapabilities', kind:'xml', service:'wmts' },\n { url:'/api/geoserver-capabilities.php?service=wms', kind:'xml', service:'wms' },\n { url:this.WMS_ENDPOINT+'?service=WMS&request=GetCapabilities', kind:'xml', service:'wms' },\n { url:'/data/geoserver-layer-catalog.json', kind:'json', service:'wmts' }\n ];\n let lastError=null;\n const byName=new Map();\n const serviceMap={ wmts:new Set(), wms:new Set() };\n for(const src of sources){\n try{\n const res=await fetch(src.url, { cache:'no-store' }); if(!res.ok) throw new Error('HTTP '+res.status);\n const text=await res.text();\n let layers=[];\n if(src.kind==='json'){\n const data=JSON.parse(text);\n layers=(data.layers||[]).map(l=>({ ...l, layerName:this.normalizeLayerName(l.layerName), service:l.service||'wms', gridSet:l.gridSet||'EPSG:900913', format:l.format||'image/png' }));\n } else {\n if(text.trim().startsWith('{\n const name=this.normalizeLayerName(layer.layerName);\n byName.set(name, { ...(byName.get(name)||{}), ...layer, layerName:name });\n if(layer.service==='wmts') serviceMap.wmts.add(name);\n if(layer.service==='wms') serviceMap.wms.add(name);\n });\n }catch(e){ lastError=e; }\n }\n if(byName.size) return { source:'combined capabilities', layers:Array.from(byName.values()), serviceMap };\n throw lastError||new Error('Server catalog unavailable');\n }\n\n async syncGeoServerLayers(){\n try{\n const catalog=await this.readCapabilities();\n const serverLayers=catalog.layers||[];\n this.SERVER_LAYER_SERVICES=catalog.serviceMap||{ wmts:new Set(), wms:new Set() };\n this.OUTPUTS.forEach(o=>{\n const configs=[o.geoserver, ...Object.values(o.geoserverByHorizon||{})].filter(Boolean);\n if(!configs.length) return;\n o.serverAvailable=true;\n configs.forEach(gs=>{\n const serverLayer=serverLayers.find(l=>l.layerName===gs.layerName);\n if(serverLayer&&serverLayer.abstract){\n gs.abstract=serverLayer.abstract;\n gs.metadataSource=serverLayer.metadataSource||'geoserver';\n }\n if(serverLayer&&serverLayer.title) gs.title=serverLayer.title;\n if(gs.service==='wmts' && this.SERVER_LAYER_SERVICES.wms && this.SERVER_LAYER_SERVICES.wms.has(gs.layerName) && !(this.SERVER_LAYER_SERVICES.wmts&&this.SERVER_LAYER_SERVICES.wmts.has(gs.layerName))){\n gs.service='wms';\n }\n });\n });\n this.SERVER_LAYER_BY_KEY={};\n this.renderOutputControls();\n }catch(e){\n this.OUTPUTS.forEach(o=>{ if(o.geoserver||o.geoserverByHorizon) o.serverAvailable=true; });\n this.renderOutputControls();\n }\n }\n\n legendUrl(layerName, styleName, proxy){\n const params='service=WMS&version=1.1.1&request=GetLegendGraphic&format=application/json&layer='+encodeURIComponent(layerName)+(styleName?'&style='+encodeURIComponent(styleName):'');\n return proxy?('/api/geoserver-legend.php?'+params):(this.WMS_ENDPOINT+'?'+params);\n }\n parseLegendPayload(data){\n const legend=(data.Legend&&data.Legend[0])||{};\n const entries=[];\n (legend.rules||[]).forEach(rule=>(rule.symbolizers||[]).forEach(sym=>{\n const cmap=sym.Raster&&sym.Raster.colormap&&sym.Raster.colormap.entries;\n if(Array.isArray(cmap)) cmap.forEach(e=>entries.push({ label:e.label||String(e.quantity||''), quantity:e.quantity, color:e.color||'#999999', opacity:Number(e.opacity===undefined?1:e.opacity) }));\n }));\n return { title:legend.title||legend.layerName||'', entries };\n }\n async fetchServerLegend(found){\n const gs=found&&found.geoserver; if(!gs||!gs.layerName) return null;\n const sources=[this.legendUrl(gs.layerName, gs.styleName, true), this.legendUrl(gs.layerName, gs.styleName, false)];\n for(const url of sources){\n try{\n const res=await fetch(url, { cache:'no-store' }); if(!res.ok) throw new Error('HTTP '+res.status);\n const data=await res.json();\n const parsed=this.parseLegendPayload(data);\n if(parsed.entries.length) return parsed;\n }catch(e){}\n }\n return null;\n }\n drawLegend(found, swatches, sourceText){\n const title=document.querySelector('[data-legend-title]'); if(title) title.textContent=(found?(found.name||found.n):'Index');\n const source=document.querySelector('[data-legend-source]'); if(source) source.textContent='';\n this.lastLegendSwatches=swatches;\n const visible=swatches.filter(s=>Number(s.opacity===undefined?1:s.opacity)>0);\n const scale=document.querySelector('[data-legend-scale]'); const labels=document.querySelector('[data-legend-labels]');\n if(scale){\n scale.style.gridTemplateColumns='repeat('+(visible.length||1)+',1fr)';\n scale.innerHTML=visible.map(s=>'').join('');\n }\n if(labels){\n labels.style.gridTemplateColumns='repeat('+(visible.length||1)+',1fr)';\n const groups=[];\n visible.forEach(s=>{\n const label=(s.label||'').trim();\n const prev=groups[groups.length-1];\n if(prev && prev.label.toLowerCase()===label.toLowerCase()) prev.span++;\n else groups.push({ label, span:1 });\n });\n const shrink=groups.length>6?' font-size:9px;':'';\n labels.innerHTML=groups.map((g,i)=>''+g.label+'').join('');\n }\n }\n async renderLegend(found){\n const legendProps=this.props.i18nLegend||{};\n const fallback=(found&&found.legend)||[{label:legendProps.veryLow||'',color:'#d73027',quantity:0.01},{label:legendProps.low||'',color:'#fdae61',quantity:0.25},{label:legendProps.moderate||'',color:'#fee08b',quantity:0.5},{label:legendProps.high||'',color:'#a6d96a',quantity:0.75},{label:legendProps.veryHigh||'',color:'#1a9850',quantity:1}];\n this.drawLegend(found, fallback, '');\n const serverLegend=await this.fetchServerLegend(found);\n if(serverLegend){\n const swatches=serverLegend.entries.map(e=>({ label:e.label, color:e.color, quantity:e.quantity, opacity:e.opacity }));\n this.drawLegend(found, swatches, '');\n this.updateMini();\n }\n }\n renderUnavailableLegend(found){\n const selectedMapLabel=this.T('selectedMapFallback');\n const title=document.querySelector('[data-legend-title]');\n if(title) title.textContent=found?(found.name||found.n||selectedMapLabel):selectedMapLabel;\n const source=document.querySelector('[data-legend-source]');\n if(source) source.textContent='';\n const scale=document.querySelector('[data-legend-scale]');\n if(scale) scale.innerHTML='';\n const labels=document.querySelector('[data-legend-labels]');\n if(labels){ labels.style.gridTemplateColumns='1fr'; labels.innerHTML=''+this.escapeHtml((this.props.i18nLayerUnavailable&&this.props.i18nLayerUnavailable.title)||'')+''; }\n this.lastLegendSwatches=[];\n }\n\n updateMini(){\n const found=this.selectedLayerMeta();\n const layerEl=document.querySelector('[data-mini-layer]'); const sourceEl=document.querySelector('[data-mini-source]'); const section=document.querySelector('[data-mini-section-title]'); const temporal=document.querySelector('[data-mini-temporal]');\n if(layerEl) layerEl.textContent=found?(found.name||found.n):this.T('selectedMapFallback');\n if(sourceEl) sourceEl.textContent='';\n if(temporal) temporal.style.display=this.activeSupportsProjection()?'block':'none';\n const miniHorizons=this.comparableHorizonKeys(this.active);\n document.querySelectorAll('[data-mini-horizon]').forEach(b=>{ const id=b.getAttribute('data-mini-horizon'); const on=id===this.horizon; const allowed=miniHorizons.length?miniHorizons.includes(id):id==='reference'; b.disabled=!allowed; b.style.opacity=allowed?'1':'.45'; b.style.background=on?'#14562b':'transparent'; b.style.color=on?'#ffffff':'#5a6a5c'; });\n if(found&&found.geoserver){\n const barsEl=document.querySelector('[data-mini-bars]');\n if(section) section.textContent=found.key==='vulnerability'?this.T('highVulnerabilityTrend'):this.T('contributionSummary');\n if(found.key==='vulnerability' && this.DASHBOARD_DATA && this.DASHBOARD_DATA.vulnerability){\n const rows=this.DASHBOARD_DATA.vulnerability.areaByHorizon||[];\n const max=Math.max(1,...rows.map(r=>Number(r.totals&&r.totals.highKm2||0)));\n barsEl.innerHTML=rows.map(r=>{\n const v=Number(r.totals&&r.totals.highKm2||0);\n const pct=Number(r.totals&&r.totals.highPct||0);\n return '

'+r.horizon+''+pct.toFixed(pct<1?2:1)+'%

';\n }).join('');\n } else {\n const dimensions=(this.DASHBOARD_DATA&&this.DASHBOARD_DATA.weights&&this.DASHBOARD_DATA.weights.dimensions)||[];\n const related=dimensions.filter(d=>d.outputLayerKey===found.key || d.pillarKey===found.key || (found.key==='adaptiveCapacity'&&d.pillarKey==='adaptiveCapacity'));\n const rows=related.length?related:[{ dimensionName:found.name||found.n||this.T('selectedLayerFallback'), weightedContribution:1, pillarColor:this.layerUiColor(found.key) }];\n const max=Math.max(1,...rows.map(r=>Number(r.weightedContribution||0)));\n barsEl.innerHTML=rows.map(r=>{\n const v=Number(r.weightedContribution||0);\n const label=r.dimensionName||found.name||found.n||this.T('selectedLayerFallback');\n const color=r.pillarColor||this.layerUiColor(found.key);\n return '

'+label+'w '+v.toFixed(2)+'

';\n }).join('');\n }\n const note=document.querySelector('[data-mini-note]');\n if(note) note.textContent=this.T('openDashboardHint');\n return;\n }\n if(section) section.textContent=this.T('availability');\n const bars=document.querySelector('[data-mini-bars]');\n if(bars){\n bars.innerHTML='

'\n +'

'+this.escapeHtml((this.props.i18nLayerUnavailable&&this.props.i18nLayerUnavailable.title)||'')+'

'\n +'

'+this.escapeHtml((this.props.i18nLayerUnavailable&&this.props.i18nLayerUnavailable.detail)||'')+'

'\n +'

';\n }\n const note=document.querySelector('[data-mini-note]');\n if(note) note.textContent=this.T('mapValuesHint');\n }\n\n selectedLayerMeta(){ const all=[...this.OUTPUTS, ...this.allDimensionOutputs()]; return this.withActiveGeoServer(all.find(o=>o.key===this.active||o.k===this.active)); }\n setupWidgetDrag(){\n // The legend is deliberately not draggable: a movable legend meant its\n // collapse/toggle button jumped to wherever it had last been dragged, which was\n // more confusing than useful. Only the layer summary panel drags.\n this.setupDraggableWidget({ widgetSel:'[data-mini]', handleSel:'[data-mini-drag-handle]', toggleSel:'[data-mini-drag]', syncKey:'syncWidgetDragForViewport' });\n }\n /** Shared drag-to-reposition behaviour for the floating corner widgets (layer\n * summary, legend): desktop-only (mobile gets a fixed layout via the viewport\n * sync below), off by default so a stray drag doesn't move the panel, and bounded\n * to stay fully on-screen. Parameterized rather than duplicated per widget so the\n * legend picks up the exact same, already-proven interaction as the summary panel. */\n setupDraggableWidget({ widgetSel, handleSel, toggleSel, syncKey }){\n const widget=document.querySelector(widgetSel); const handle=document.querySelector(handleSel); const toggle=document.querySelector(toggleSel);\n if(!widget||!handle||!toggle) return;\n let dragEnabled=false;\n const isMobile=()=>window.matchMedia && window.matchMedia('(max-width: 900px)').matches;\n const movePanelLabel=(this.props.i18nMini&&this.props.i18nMini.movePanel)||'';\n const setEnabled=(on)=>{ dragEnabled=on; widget.setAttribute('data-drag-enabled', on?'1':'0'); toggle.style.background=on?'#14562b':'#ffffff'; toggle.style.color=on?'#ffffff':'#5a6a5c'; toggle.setAttribute('title', on?this.T('lockPanel'):movePanelLabel); toggle.setAttribute('aria-label', on?this.T('lockPanel'):movePanelLabel); toggle.setAttribute('data-tip', on?this.T('lockSummaryPanel'):movePanelLabel); };\n this[syncKey]=()=>{\n const mobile=isMobile();\n if(mobile){\n setEnabled(false);\n toggle.style.display='none';\n toggle.setAttribute('aria-hidden','true');\n toggle.setAttribute('tabindex','-1');\n widget.style.left='';\n widget.style.top='';\n widget.style.right='';\n widget.style.bottom='';\n } else {\n toggle.style.display='inline-flex';\n toggle.removeAttribute('aria-hidden');\n toggle.removeAttribute('tabindex');\n }\n if(widgetSel==='[data-legend]' && this.avoidLegendOverlap) this.avoidLegendOverlap();\n };\n toggle.addEventListener('click',(e)=>{ e.preventDefault(); e.stopPropagation(); setEnabled(!dragEnabled); });\n handle.addEventListener('pointerdown',(e)=>{\n if(isMobile()){ setEnabled(false); return; }\n if(!dragEnabled) return;\n e.preventDefault(); const rect=widget.getBoundingClientRect(); const sx=e.clientX; const sy=e.clientY; const ox=rect.left; const oy=rect.top;\n const move=(ev)=>{ const pad=10; const x=Math.min(Math.max(pad, ox+ev.clientX-sx), window.innerWidth-rect.width-pad); const y=Math.min(Math.max(pad, oy+ev.clientY-sy), window.innerHeight-rect.height-pad); widget.style.left=x+'px'; widget.style.top=y+'px'; widget.style.right='auto'; widget.style.bottom='auto'; };\n const up=()=>{ window.removeEventListener('pointermove',move); window.removeEventListener('pointerup',up); };\n window.addEventListener('pointermove',move); window.addEventListener('pointerup',up);\n });\n window.addEventListener('resize', this[syncKey]);\n setEnabled(false);\n this[syncKey]();\n }\n getFeatureInfoUrl(latlng){\n const found=this.selectedLayerMeta(); const gs=found&&found.geoserver; if(!gs||!this.map) return null;\n const b=this.map.getBounds(); const size=this.map.getSize(); const p=this.map.latLngToContainerPoint(latlng);\n const params=new URLSearchParams({ service:'WMS', version:'1.1.1', request:'GetFeatureInfo', layers:gs.layerName, query_layers:gs.layerName, styles:gs.styleName||'', srs:'EPSG:4326', bbox:[b.getWest(),b.getSouth(),b.getEast(),b.getNorth()].join(','), width:String(Math.round(size.x)), height:String(Math.round(size.y)), x:String(Math.round(p.x)), y:String(Math.round(p.y)), info_format:'application/json' });\n return '/api/geoserver-feature-info.php?'+params.toString();\n }\n extractFeatureValue(data){\n const props=data&&data.features&&data.features[0]&&data.features[0].properties; if(!props) return null;\n const keys=Object.keys(props); const key=keys.find(k=>typeof props[k]==='number')||keys.find(k=>props[k]!==null&&props[k]!==undefined&&props[k]!=='' );\n return key?{ key, value:props[key] }:null;\n }\n async identifyAt(e){\n if(this._bounds && !L.latLngBounds(this._bounds).contains(e.latlng)) return;\n const found=this.selectedLayerMeta();\n if(found&&found.geoserver){\n const url=this.getFeatureInfoUrl(e.latlng); if(!url) return;\n const popup=L.popup().setLatLng(e.latlng).setContent('

'+this.escapeHtml(this.T('loadingValue'))+'

').openOn(this.map);\n try{ const res=await fetch(url,{cache:'no-store'}); const data=await res.json(); const v=this.extractFeatureValue(data); const value=v?Number(v.value).toFixed(Number(v.value)%1===0?0:3):this.T('noDataValue'); popup.setContent('

'+(found.name||found.n)+'

'+this.escapeHtml(this.T('valueLabel'))+': '+value+'

'+this.COUNTRIES[this.country].name+'

'); }catch(err){ popup.setContent('

'+this.escapeHtml(this.T('noValueReturned'))+'

'); }\n return;\n }\n const comingSoonLabel=this.escapeHtml((this.props.i18nLayerUnavailable&&this.props.i18nLayerUnavailable.title)||'');\n L.popup().setLatLng(e.latlng).setContent('

'+(found?(found.name||found.n):this.T('selectedMapFallback'))+'

'+comingSoonLabel+'

'+this.escapeHtml(this.T('comingSoonValuesHint'))+'

').openOn(this.map);\n }\n setupMapIdentify(){ if(this.map&&!this.identifyReady){ this.identifyReady=true; this.map.on('click',(e)=>this.identifyAt(e)); } }\n\n // ---------- panels ----------\n setupTooltips(){\n const tip=document.querySelector('[data-tooltip]'); if(!tip) return;\n const hide=()=>{\n if(this.tooltipTimer) window.clearTimeout(this.tooltipTimer);\n tip.style.opacity='0';\n tip.setAttribute('aria-hidden','true');\n };\n const show=(el)=>{\n const text=el.getAttribute('data-tip'); if(!text) return;\n if(this.tooltipTimer) window.clearTimeout(this.tooltipTimer);\n tip.innerHTML=''+text+'';\n const close=tip.querySelector('[data-tooltip-close]');\n if(close) close.addEventListener('click',hide);\n tip.style.display='flex';\n tip.style.alignItems='center';\n tip.style.gap='8px';\n tip.style.opacity='0';\n tip.style.transform='translate3d(0,-4px,0)';\n tip.setAttribute('aria-hidden','false');\n const r=el.getBoundingClientRect(); tip.style.left='0px'; tip.style.top='0px';\n requestAnimationFrame(()=>{\n const tr=tip.getBoundingClientRect(); const pad=10;\n let x=Math.min(Math.max(pad, r.left + r.width/2 - tr.width/2), window.innerWidth - tr.width - pad);\n let y=r.bottom + 9; if(y + tr.height + pad > window.innerHeight) y=r.top - tr.height - 9;\n y=Math.max(pad, y); tip.style.left=x+'px'; tip.style.top=y+'px'; tip.style.opacity='1'; tip.style.transform='translate3d(0,0,0)';\n });\n this.tooltipTimer=window.setTimeout(hide, 2200);\n };\n document.querySelectorAll('[data-tip]').forEach(el=>{\n if(el.__raizTipReady) return; el.__raizTipReady=true;\n el.addEventListener('mouseenter',()=>show(el)); el.addEventListener('focus',()=>show(el));\n el.addEventListener('touchstart',()=>show(el), { passive:true });\n el.addEventListener('mouseleave',hide); el.addEventListener('blur',hide); el.addEventListener('click',()=>{ this.tooltipTimer=window.setTimeout(hide, 400); });\n });\n if(!document.__raizTooltipGlobalReady){\n document.__raizTooltipGlobalReady=true;\n document.addEventListener('pointerdown',(e)=>{ if(!tip.contains(e.target) && !e.target.closest('[data-tip]')) hide(); }, { passive:true });\n document.addEventListener('keydown',(e)=>{ if(e.key==='Escape') hide(); });\n window.addEventListener('scroll',hide,{passive:true});\n window.addEventListener('resize',hide,{passive:true});\n }\n }\n\n outputLayerButton(o, options){\n const full = options && options.full;\n const finalPillar = options && options.finalPillar;\n const hint=o.type==='dimensionOutput'?this.T('showDimensionMap'):(o.type==='server'?this.T('showAssessmentMap'):this.T('showOutputMap'));\n return '

'\n // A native '\n +this.layerControlMarkup(o.key)\n +'

';\n }\n\n dimensionOutputMeta(pillar, dim){\n const mapped = dim.outputLayerKey ? this.outputByKey(dim.outputLayerKey) : null;\n if(mapped) return { ...mapped, name:mapped.name || dim.name, type:'dimensionOutput' };\n return { key:dim.key, name:dim.name, color:pillar.color, hasProjectedHorizons:false, type:'dimensionOutput', legend:null, geoserver:null };\n }\n\n outputAccordion(pillar, open){\n const pillarOutput=this.outputByKey(pillar.key);\n const dimensionMaps=pillar.dims.map(d=>this.dimensionOutputMeta(pillar, d));\n const body=[pillarOutput ? this.outputLayerButton(pillarOutput, { full:true, finalPillar:true }) : '', ...dimensionMaps.map(o=>this.outputLayerButton(o, { full:true }))].filter(Boolean).join('');\n return '

'\n +''\n +'

'+body+'

';\n }\n\n renderOutputControls(){\n const outWrap=document.querySelector('[data-outputs]'); if(!outWrap) return;\n const vulnerabilityOutput=this.outputByKey('vulnerability');\n const potential=this.outputByKey('potentialImpact');\n // Vulnerability is not a weighted input pillar (it has no dims/indicators in the\n // assessment config, unlike exposure/sensitivity/adaptiveCapacity), so it isn't part\n // of this.PILLARS. It still renders as an accordion group here, grouping the\n // overall map with its cropland/pastureland breakdowns, using the same\n // outputAccordion renderer as the real pillars.\n const vulnerabilityPillar={\n key:'vulnerability',\n name:this.T('vulnerabilityPillarName'),\n color:(vulnerabilityOutput&&vulnerabilityOutput.color)||'#7b2a22',\n dims:[\n { key:'croplandVulnerability', name:this.T('croplandVulnerabilityName'), outputLayerKey:'croplandVulnerability' },\n { key:'pasturelandVulnerability', name:this.T('pasturelandVulnerabilityName'), outputLayerKey:'pasturelandVulnerability' },\n ],\n };\n const otherPillars=this.PILLARS.filter(p=>['exposure','sensitivity','adaptiveCapacity'].includes(p.key));\n const openOutputGroup=this.MAP_DEFAULTS.openOutputGroup||'adaptiveCapacity';\n // Order requested: Vulnerability accordion first, Potential Impact directly below\n // it, then the weighted pillar accordions (Exposure, Sensitivity, Adaptive\n // Capacity). Potential Impact stays a standalone card rather than an accordion -\n // it has no dims/breakdown maps of its own to group.\n const blocks=[\n this.outputAccordion(vulnerabilityPillar, vulnerabilityPillar.key===openOutputGroup),\n potential?('

'+this.outputLayerButton(potential)+'

'):'',\n ...otherPillars.map(p=>this.outputAccordion(p, p.key===openOutputGroup)),\n ].filter(Boolean);\n outWrap.innerHTML='

'+blocks.join('')+'

';\n outWrap.querySelectorAll('[data-output]').forEach(b=>{\n // The click listener stays on the outer div (event delegation from the inner\n // data-output-trigger button); no keydown handler is needed since a real '\n +'

'\n +''\n +''\n +'

';\n document.body.appendChild(card);\n const place=()=>{\n const pad=12;\n const tr=target?target.getBoundingClientRect():{left:window.innerWidth/2-40, top:window.innerHeight/2-40, width:80, height:80, bottom:window.innerHeight/2+40};\n const cr=card.getBoundingClientRect();\n const mobile=window.matchMedia && window.matchMedia('(max-width: 900px)').matches;\n if(mobile){\n const gap=18;\n const safeBottom=20;\n const centerX=tr.left + tr.width/2;\n let x=Math.min(Math.max(pad, centerX - cr.width/2), window.innerWidth - cr.width - pad);\n const spaceBelow=window.innerHeight - tr.bottom - safeBottom;\n const spaceAbove=tr.top - pad;\n let y;\n if(spaceBelow >= cr.height + gap && tr.top < window.innerHeight * 0.58){\n y=tr.bottom + gap;\n } else if(spaceAbove >= cr.height + gap){\n y=tr.top - cr.height - gap;\n } else {\n y=Math.min(Math.max(pad, window.innerHeight * 0.5 - cr.height/2), window.innerHeight - cr.height - safeBottom);\n }\n card.style.left=x+'px';\n card.style.top=y+'px';\n return;\n }\n let x=tr.right + 14;\n let y=tr.top;\n if(x + cr.width + pad > window.innerWidth) x=tr.left - cr.width - 14;\n if(x < pad) x=Math.min(Math.max(pad, tr.left + tr.width/2 - cr.width/2), window.innerWidth - cr.width - pad);\n if(y + cr.height + pad > window.innerHeight) y=window.innerHeight - cr.height - pad;\n y=Math.max(pad, y);\n card.style.left=x+'px';\n card.style.top=y+'px';\n };\n requestAnimationFrame(place);\n card.querySelector('[data-tour-close]').addEventListener('click',()=>this.closeTour());\n card.querySelector('[data-tour-prev]').addEventListener('click',()=>{ if(this.tourIdx>0){ this.tourIdx--; this.renderTour(); } });\n card.querySelector('[data-tour-next]').addEventListener('click',()=>{ if(this.tourIdx({ layer:s.layer, link:s.link, t:(steps[i]&&steps[i].title)||'', b:(steps[i]&&steps[i].body)||'' }));\n this.storyIdx=0;\n }\n localeHref(path){\n const locale=this.props.i18nLocale;\n return (locale && locale!=='en' ? '/'+locale : '')+path;\n }\n renderStory(){\n const s=this.STORY[this.storyIdx];\n const storyProps=this.props.i18nStory||{};\n const body=document.querySelector('[data-story-body]');\n body.innerHTML='

'+(this.storyIdx+1)+'

'\n +'

'+this.escapeHtml(s.t)+'

'\n +'

'+this.escapeHtml(s.b)+'

'\n +(s.link?''+this.escapeHtml(storyProps.openMethodology||'')+' ':'')\n +'

';\n document.querySelector('[data-story-progress]').textContent=String(this.storyIdx+1).padStart(2,'0')+' / '+String(this.STORY.length).padStart(2,'0');\n document.querySelector('[data-story-next]').innerHTML=this.escapeHtml(this.storyIdx===this.STORY.length-1?(storyProps.close||''):(storyProps.next||''))+' ';\n this.setLayer(s.layer);\n const c=this.COUNTRIES[this.country];\n this.map.flyTo([c.center[1], c.center[0]], c.zoom + 0.2, { duration:1.5 });\n }\n openStory(o){\n this.storyOpen=!!o;\n if(o){\n this.setPanel(false);\n this.setMini(false);\n this.setLegend(false);\n this.toggleCountryMenu(false);\n }\n const p=document.querySelector('[data-story-panel]');\n p.style.transform=o?'translateX(0)':'translateX(-110%)';\n if(o) this.renderStory();\n this.updateControlVisibility();\n }\n\n // ---------- tools wiring ----------\n wireTools(){\n const burger=document.querySelector('[data-burger]'); const mm=document.querySelector('[data-mobile-menu]');\n if(burger&&mm){\n const setBurgerIcon=(open)=>{ burger.setAttribute('aria-label', open?this.T('closeMenu'):this.T('openMenu')); burger.innerHTML=open?'':''; };\n burger.addEventListener('click',()=>{ const open=mm.style.display!=='flex'; mm.style.display=open?'flex':'none'; setBurgerIcon(open); });\n mm.querySelectorAll('a').forEach(a=>a.addEventListener('click',()=>{ mm.style.display='none'; setBurgerIcon(false); }));\n }\n document.querySelector('[data-panel-min]').addEventListener('click',()=>this.setPanel(false));\n document.querySelectorAll('[data-layer-tab]').forEach(b=>b.addEventListener('click',()=>this.setLayerTab(b.getAttribute('data-layer-tab'))));\n document.querySelector('[data-panel-launch]').addEventListener('click',()=>this.setPanel(true));\n document.querySelector('[data-legend-launch]').addEventListener('click',()=>this.setLegend(true));\n document.querySelector('[data-legend-min]').addEventListener('click',()=>this.setLegend(false));\n document.querySelector('[data-mini-min]').addEventListener('click',()=>this.setMini(false));\n document.querySelector('[data-mini-launch]').addEventListener('click',()=>this.setMini(true));\n document.querySelectorAll('[data-mini-horizon]').forEach(b=>b.addEventListener('click',()=>this.setHorizon(b.getAttribute('data-mini-horizon'))));\n document.querySelectorAll('[data-basemap]').forEach(b=>b.addEventListener('click',()=>this.setBasemap(b.getAttribute('data-basemap'))));\n document.querySelectorAll('[data-horizon]').forEach(b=>b.addEventListener('click',()=>this.setHorizon(b.getAttribute('data-horizon'))));\n document.querySelector('[data-tool=\"story\"]').addEventListener('click',()=>this.openStory(true));\n document.querySelector('[data-tool=\"compare\"]').addEventListener('click',()=>this.setCompare(!this.compareOpen));\n document.querySelector('[data-tool=\"cities\"]').addEventListener('click',()=>this.toggleCitiesVisible());\n document.querySelector('[data-compare-close]').addEventListener('click',()=>this.setCompare(false));\n document.querySelectorAll('[data-compare-target]').forEach(b=>b.addEventListener('click',()=>{ this.compareTarget=b.getAttribute('data-compare-target')||'2030'; this.updateCompareLayers(); }));\n document.querySelectorAll('[data-compare-info]').forEach(b=>b.addEventListener('click',(e)=>{ e.preventDefault(); e.stopPropagation(); const h=b.getAttribute('data-compare-info')==='target'?this.compareTarget:this.compareLeftHorizon(); this.showLayerInfo(this.active, h); }));\n document.querySelector('[data-story-close]').addEventListener('click',()=>this.openStory(false));\n document.querySelector('[data-story-next]').addEventListener('click',()=>{ if(this.storyIdx{ if(this.storyIdx>0){ this.storyIdx--; this.renderStory(); } });\n document.querySelector('[data-tool=\"help\"]').addEventListener('click',()=>this.startTour());\n document.querySelector('[data-tool=\"zoomIn\"]').addEventListener('click',()=>{ if(this.map) this.map.zoomIn(); });\n document.querySelector('[data-tool=\"zoomOut\"]').addEventListener('click',()=>{ if(this.map) this.map.zoomOut(); });\n document.querySelector('[data-tool=\"zoomExtent\"]').addEventListener('click',()=>{ this.flyCountry(); });\n window.addEventListener('resize',()=>this.updateControlVisibility(), { passive:true });\n window.addEventListener('resize',()=>{ if(this.compareOpen) this.updateCompareClip(this.compareSplit); }, { passive:true });\n this.setupCompareDrag();\n this.setupComparePanelDrag();\n this.setupTooltips();\n this.wireLangSwitch();\n }\n wireLangSwitch(){\n const wrap=document.querySelector('[data-lang-switch]'); const trigger=document.querySelector('[data-lang-trigger]'); const menu=document.querySelector('[data-lang-menu]'); const chevron=document.querySelector('[data-lang-chevron]');\n if(!wrap||!trigger||!menu) return;\n let open=false;\n const setOpen=(v)=>{ open=v; trigger.setAttribute('aria-expanded', open?'true':'false'); menu.style.opacity=open?'1':'0'; menu.style.visibility=open?'visible':'hidden'; menu.style.transform=open?'translateY(0)':'translateY(-8px)'; if(chevron) chevron.style.transform=open?'rotate(180deg)':'rotate(0deg)'; };\n trigger.addEventListener('click',(ev)=>{ ev.stopPropagation(); setOpen(!open); });\n document.addEventListener('click',(ev)=>{ if(open&&!wrap.contains(ev.target)) setOpen(false); });\n document.addEventListener('keydown',(ev)=>{ if(ev.key==='Escape'&&open){ setOpen(false); trigger.focus(); } });\n }\n}\n"; window.__RAIZ_SITE_PAGE_SCRIPTS__ = window.__RAIZ_SITE_PAGE_SCRIPTS__ || {}; function loadCss(href) { if (document.querySelector('link[data-site-page-href="' + href + '"]') || document.querySelector('link[href="' + href + '"]')) return; var link = document.createElement("link"); link.rel = "stylesheet"; link.href = href; link.dataset.sitePageHref = href; document.head.appendChild(link); } function loadScript(src) { if (window.__RAIZ_SITE_PAGE_SCRIPTS__[src]) return window.__RAIZ_SITE_PAGE_SCRIPTS__[src]; window.__RAIZ_SITE_PAGE_SCRIPTS__[src] = new Promise(function (resolve, reject) { var existing = document.querySelector('script[data-site-page-src="' + src + '"]'); if (existing) { resolve(); return; } var script = document.createElement("script"); script.src = src; script.async = false; script.dataset.sitePageSrc = src; script.onload = function () { resolve(); }; script.onerror = function () { reject(new Error("Failed to load " + src)); }; document.body.appendChild(script); }); return window.__RAIZ_SITE_PAGE_SCRIPTS__[src]; } function runLogic() { if (!logic.trim()) return; try { var DCLogic = class {}; var ComponentClass = new Function("DCLogic", logic + "\n; return typeof Component !== 'undefined' ? Component : null;")(DCLogic); var instance = ComponentClass ? new ComponentClass() : null; if (instance) instance.props = props; if (instance && typeof instance.componentDidMount === "function") instance.componentDidMount(); } catch (error) { console.error("[RAIZ site page: " + pageId + "]", error); } } function start() { var queue = Promise.resolve(); if (usesLeaflet && pageId !== "home") { loadCss("/vendor/leaflet/leaflet.css"); queue = queue.then(function () { return loadScript("/vendor/leaflet/leaflet.js"); }); } scripts.forEach(function (src) { queue = queue.then(function () { return loadScript(src); }); }); queue.then(runLogic).catch(function (error) { console.error("[RAIZ site page: " + pageId + "]", error); }); if (usesLeaflet && pageId === "home") { var loadHomeLeaflet = function () { loadCss("/vendor/leaflet/leaflet.css"); loadScript("/vendor/leaflet/leaflet.js").catch(function (error) { console.error("[RAIZ site page: " + pageId + "]", error); }); }; var target = document.querySelector("[data-minimap]"); if ("IntersectionObserver" in window && target) { var observer = new IntersectionObserver(function (entries) { if (!entries.some(function (entry) { return entry.isIntersecting; })) return; observer.disconnect(); loadHomeLeaflet(); }, { rootMargin: "900px 0px" }); observer.observe(target); } else { setTimeout(loadHomeLeaflet, 1200); } } } if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", start, { once: true }); } else { start(); } })();