/** * pagine del "Bollettino risorsa idrica" * * 09/10/2023 filippo start version * 10/10/2023 filippo versione con UL * 11/10/2023 filippo gestione dello scorrimento mappe giornaliere * 12/10/2023 filippo gestione sfondo pulsanti e grafico idrometro lago di garda * 13/10/2023 filippo problemi con l'asse x (time) del grafico del lago di garda * 17/10/2023 filippo aggiunta la legenda colori nella precipitazione-giornaliera/mese * 23/10/2023 filippo aggiunta mappa zone di allerta sul frame precipitazione * 24/10/2023 filippo aggiunte stazioni di portata su frame portate * 26/10/2023 filippo aggiunto il deficit mensile * 31/10/2023 filippo aggiunto il deficit anno idrologico e il richiamo alle tabelle in base al click sulla zona * 02/10/2025 filippo modifiche come da documento BOLLETTINO RISORSA IDRICA_new.docx di ieri * 07/10/2025 filippo aggiornamenti come da documento * 20/11/2025 filippo modifiche qua e là come da chiaccherata con Vianello di oggi * 25/11/2025 filippo pulsanti anni critici nel lago di garda * 28/11/2025 filippo immagini Agrometerologia SPI * pulsanti dei confini provinciali, zone di allerta e bacini nella precipitazione * 21/01/2026 filippo aggiunta del testo e della leggenda a fondo pagina "Agrometeorologia" * sistemata la gestione dell'anno idrologico nel grafico "Lago di Garda" * nascosto il link che si sarebbe dovuto aprire al click sulla mappa Precipitazione * 01/04/2026 filippo implementazioni di quanto indicato da Vianello nella mail del 26/03/2026 * 05/05/2026 filippo aggiunta del pulsante su Precipitazione: "da inizio anno idrologico" * 19/06/2026 filippo aggiunta dei colori legenda usando il tag livelli dal file indice.json corrispondente al pulsante premuto * 24/06/2026 filippo aggiunto il logo di crices * */ //---------------------------------------------------------------------- // percorsi alle risorse // percorsi per raggiungere le immagini per la voce di menu "Precipitazione" const lnkMappePrecGiorno = 'https://www.arpa.veneto.it/risorse/data-meteo/bollettino_risorsa_idrica/prec_giorno/'; const lnkMappePrecMese = 'https://www.arpa.veneto.it/risorse/data-meteo/bollettino_risorsa_idrica/prec_mese/'; const lnkMappePrecDeficitMese = 'https://www.arpa.veneto.it/risorse/data-meteo/bollettino_risorsa_idrica/deficit_mese/'; const lnkMappePrecDeficitAnno = 'https://www.arpa.veneto.it/risorse/data-meteo/bollettino_risorsa_idrica/deficit_anno/'; const lnkMappePrecAnnoIdro = 'https://www.arpa.veneto.it/risorse/data-meteo/bollettino_risorsa_idrica/prec_annoidro/'; // nome del file indice presente in ogni cartella const indiceMappePrec = "indice.json"; // percorso per raggiungere il file lagogarda.json const lnkLagoGarda = 'https://www.arpa.veneto.it/risorse/data-meteo/bollettino_risorsa_idrica/lagogarda.json'; // percorso per raggiungere il file delle zone di allerta const lnkZAllerta = 'https://www.arpa.veneto.it/risorse/data-meteo/kml/zoneallerta_semplificato.kml'; // percorso per raggiungere il file dei bacini idrografici const lnkBaciniIdrografici = 'https://www.arpa.veneto.it/risorse/data-meteo/kml/bacinidro_semplificato.kml'; // percorso per raggiungere il file dei confini provinciali const lnkConfiniProv = 'https://www.arpa.veneto.it/risorse/data-meteo/kml/Province.kml'; //-------------------------------------------------------------------------- // percorso per le stazioni di portata: al momento prendo le stazioni ultimi 60 giorni const lnkStazioniPortata = 'https://www.arpa.veneto.it/risorse/data-meteo/bollettino_risorsa_idrica/portate/stazioni_portate.json?x=1';; const lnkStazioniportateIMG = 'https://www.arpa.veneto.it/risorse/data-meteo/bollettino_risorsa_idrica/portate/'; //-------------------------------------------------------------------------- // percorso per le stazioni neve // ho messso ?x=1 in quanto AggiungiStazioni ci mette &=rnd= const lnkStazioniNeve = 'https://www.arpa.veneto.it/risorse/data-meteo/bollettino_risorsa_idrica/neve/stazioni_neve.json?x=1'; // link alle immagini fews di stazioni neve a cui si aggiunge una cosa del tipo 20251005_12_VEIM0000347_snd_percentiles.png const lnkStazioniNeveIMG = 'https://www.arpa.veneto.it/risorse/data-meteo/bollettino_risorsa_idrica/neve/'; //-------------------------------------------------------------------------- // percorso per le immagini serbatoi const lnkSerbatoiIMG = 'https://www.arpa.veneto.it/risorse/data-meteo/bollettino_risorsa_idrica/serbatoi/'; //-------------------------------------------------------------------------- // percorso per le immagini falde const lnkStazioniFalde = 'https://www.arpa.veneto.it/risorse/data-meteo/bollettino_risorsa_idrica/falde/stazioni_falde.json?x=1'; const lnkFaldeIMG = 'https://www.arpa.veneto.it/risorse/data-meteo/bollettino_risorsa_idrica/falde/'; //-------------------------------------------------------------------------- // percorso per le immagini SPI detro al json const lnkSPI = 'https://www.arpa.veneto.it/risorse/data-meteo/bollettino_risorsa_idrica/spi/spi.json?x=1'; const lnkSPIIMG = 'https://www.arpa.veneto.it/risorse/data-meteo/bollettino_risorsa_idrica/spi/'; // logo Climate CRICES sotto i pulsanti Condividi / Vedi azioni della pagina ARPAV const lnkLogoCrices = 'https://www.arpa.veneto.it/risorse/data-meteo/bollettino_risorsa_idrica/Climate_CRICES_Logo_Standard_medium.png'; //---------------------------------------------------------------------- // nome del layer aggiunto nella mappa const layerMappaPrec = 'ISO_PREC'; const layerKML = 'LIMITI_KML'; const layerMappaPortata = 'STZ_PORTATA'; const layerMappaNeve = 'STZ_NEVE'; const layerMappaFalde = 'STZ_FALDE'; // config dei pallini delle stazioni const pointDimension = 8; const pointColor = 'rgb(0, 200, 0)'; const pointLineColor = 'rgb(0, 0, 0)'; const pointTextBackgroundColor = 'rgb(240,255,255)'; const pointFont = '14px "Titillium Web", Geneva, Tahoma, sans-serif'; var mapPrec; /** * Carica la legenda colori dal tag livelli dell'indice.json */ function AggiornaLegendaMappa(elencoImmagini, etichetta, divScala) { if (!elencoImmagini.livelli || elencoImmagini.livelli.length < 1) { document.getElementById(divScala).innerHTML = ''; return; } CaricaLegendaColori(etichetta, 'mm', divScala, elencoImmagini.livelli); } /** * ritorna una data (2022-09-12T01:00:00) in UTC * in realtà , visto che tutte le date sono in solare, faccio finta che il solare * corrisponda all'UTC in modo da non avere la conversione in locale del browser */ Date.prototype.ConvIstante = function( ist, isUTC = false ) { var nSolare = 0; if (isUTC) {nSolare = 1;} // 2022-09-12T01:00:00 // 0123456789012345678 var cosa = new Date(Date.UTC(ist.substring(0, 4), parseFloat(ist.substring(5, 7))-1, ist.substring(8, 10), parseFloat(ist.substring(11,13))+nSolare, ist.substring(14,16), 0, 0) ); this.setTime( cosa.getTime() ); return this; } /*------------------------------------------------------------------------------ ritorna una stringa con la data nel formato indicato */ Date.prototype.Formato = function( formato ) { var mm = ('0' + (this.getUTCMonth()+1) ) .slice(-2); var dd = ('0' + this.getUTCDate()).slice(-2); var yyyy = this.getUTCFullYear(); var hh = ('0' + (this.getUTCHours())).slice(-2); var mi = ('0' + this.getUTCMinutes()).slice(-2); var ss = ('0' + this.getUTCSeconds()).slice(-2); var mesi = ['Gennaio', 'Febbraio', 'Marzo', 'Aprile', 'Maggio', 'Giugno','Luglio', 'Agosto', 'Settembre', 'Ottobre', 'Novembre', 'Dicembre']; var mesiBrevi = ['GEN', 'FEB', 'MAR', 'APR', 'MAG', 'GIU','LUG', 'AGO', 'SET', 'OTT', 'NOV', 'DIC']; var giorni = ['domenica', 'lunedì', 'martedì', 'mercoledì', 'giovedì', 'venerdì', 'sabato']; var sRet = ''; switch (formato) { case 'gg g mmm YYYY': sRet =giorni[ this.getUTCDay() ] + ' ' + this.getUTCDate() + ' ' + mesi[ this.getUTCMonth() ] + ' ' + yyyy; break; case 'mmm YYYY': sRet = mesi[ this.getUTCMonth() ] + ' ' + yyyy; break; case 'DD/MM/YYYY': sRet = dd + '/' + mm + '/' + yyyy; break; case 'DD/MM/YYYY HH': sRet = dd + '/' + mm + '/' + yyyy + ' ' + hh; break; case 'DD/MM/YYYY HH:mm': sRet = dd + '/' + mm + '/' + yyyy + ' ' + hh + ':' + mi; break; case 'DD HH' : sRet = dd + ' ' + hh; break; case 'DD': sRet = dd; break; case 'DD-MM': sRet = dd + '-' + mm; break; case 'DD-MMM': sRet = dd + '-' + mesiBrevi[ parseInt(mm)-1 ]; break; case 'HH:mm': sRet = hh + ':' + mi; break; case 'HH': sRet = hh; break; case 'mm': sRet = mi; break; case 'mmm': sRet = mesi[ this.getUTCMonth() ]; break; case 'YYYYMMDDHHmm': sRet = yyyy + mm + dd + hh + mi; break; case 'YYYYMMDD': sRet = yyyy + mm + dd; break; case 'YYYY-MM-DDTHH-mm': sRet = yyyy + '-' + mm + '-' + dd + 'T' + hh + ':' + mi + ':00'; break; default: sRet = this.toString(); break; } return sRet; } /*------------------------------------------------------------------------------ ritorna vero se la pagina è visualizzata su dispositivo mobile */ function isMobile() { /* Storing user's device details in a variable*/ let details = navigator.userAgent; /* Creating a regular expression containing some mobile devices keywords to search it in details string*/ let regexp = /android|iphone|kindle|ipad/i; /* Using test() method to search regexp in details it returns boolean value*/ let isMobileDevice = regexp.test(details); return isMobileDevice; } // costanti per la dimensione delle linee e dei pallini nei grafici const DeskLineWidth = 2; const MobileLineWidth = 0.5; const DeskPointWidth = 2; const MobilePointWidth = 0.5; /** * ritorna la dimensione per il pallino sui grafici */ function RadiusGrafici() { return ( isMobile() ? MobilePointWidth : DeskPointWidth ); } /** * ritorna la width per le linee sui grafici */ function WidthGrafici() { return ( isMobile() ? MobileLineWidth : DeskLineWidth ); } /** * */ function padTo2Digits(num) { return num.toString().padStart(2, '0'); } /** * ritorna il giorno ed il mese */ function formatDateDM(date) { return padTo2Digits(date.getDate()) + '-' + padTo2Digits(date.getHours()); } // style del tooltip sul grafico const tooltiplableformat = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit' }; /** * */ function AddStyle(quanti) { var css = '.table-condensed {'+ 'font-size: ' + quanti + 'px;'+ '}'+ '#logo-crices-header {'+ 'flex-basis: 100%;'+ 'width: 100%;'+ 'display: flex;'+ 'justify-content: flex-end;'+ 'align-items: flex-start;'+ 'box-sizing: border-box;'+ 'margin-top: 0.25rem;'+ 'margin-bottom: 0;'+ 'padding-bottom: 0;'+ 'line-height: 0;'+ '}'+ '#logo-crices-header img {'+ 'height: 5rem;'+ 'width: auto;'+ 'flex-shrink: 0;'+ 'transform: translateX(-30%);'+ '}'+ '#divPage {'+ 'margin-top: -1.75rem;'+ 'padding-top: 0;'+ '}'+ '#pulsantiFrame {'+ 'margin-top: 0;'+ 'padding-top: 0;'+ '}'+ '#pulsantiFrame > .nav-tabs {'+ 'margin-top: 0;'+ 'margin-bottom: 0;'+ '}'; let head = document.head || document.getElementsByTagName('head')[0]; let style = document.createElement('style'); head.appendChild(style); if (style.styleSheet){ // This is required for IE8 and below. style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } } /** * Trova il pulsante/link che contiene il testo indicato */ function TrovaElementoTesto(testoCercato) { var tutti = document.querySelectorAll('a, button'); var i, testo, el, clickEl; for (i = 0; i < tutti.length; i++) { testo = (tutti[i].textContent || '').trim(); if (testo === testoCercato) { return tutti[i]; } } tutti = document.querySelectorAll('span, div'); for (i = 0; i < tutti.length; i++) { el = tutti[i]; testo = (el.textContent || '').trim(); if (testo === testoCercato) { if (el.closest) { clickEl = el.closest('a, button'); if (clickEl) { return clickEl; } } return el; } } return null; } /** * Trova il contenitore dei pulsanti Condividi / Vedi azioni nella pagina ARPAV */ function TrovaContenitoreAzioniPagina() { var condividi = TrovaElementoTesto('Condividi'); var vediAzioni = TrovaElementoTesto('Vedi azioni'); var nodo; if (!vediAzioni) { return null; } if (condividi) { nodo = condividi.parentElement; while (nodo && nodo !== document.body) { if (nodo.contains(vediAzioni)) { return { contenitoreAzioni: nodo, vediAzioni: vediAzioni }; } nodo = nodo.parentElement; } } return { contenitoreAzioni: vediAzioni.parentElement, vediAzioni: vediAzioni }; } /** * Inserisce il logo CRICES sotto Condividi / Vedi azioni */ function AggiungiLogoCrices() { var wrapper = document.getElementById('logo-crices-header'); if (wrapper) { return true; } var risultato = TrovaContenitoreAzioniPagina(); if (!risultato || !risultato.contenitoreAzioni) { return false; } var contenitoreAzioni = risultato.contenitoreAzioni; var vediAzioni = risultato.vediAzioni; wrapper = document.createElement('div'); wrapper.id = 'logo-crices-header'; var img = document.createElement('img'); img.src = lnkLogoCrices; img.alt = 'Climate CRICES'; wrapper.appendChild(img); contenitoreAzioni.appendChild(wrapper); contenitoreAzioni.style.marginBottom = '0'; contenitoreAzioni.style.paddingBottom = '0'; return true; } /** * Attende il rendering della pagina ARPAV (React) prima di inserire il logo */ function AttendiLogoCrices(tentativi) { if (AggiungiLogoCrices()) { return; } if (tentativi > 0) { setTimeout(function() { AttendiLogoCrices(tentativi - 1); }, 300); } } /** * create map */ function CaricaMappa(divMappa) { const MAP_DEFAULT_EXTENT = [818354.918, 5425389.1889, 1816693.282, 6070039.437]; let objMap = new ARPAVAPI.openlayers.ol.Map({ target: divMappa, view: new ARPAVAPI.openlayers.ol.View({ center: ARPAVAPI.openlayers.proj.transform([11.9, 45.8], 'EPSG:4326', 'EPSG:3857'), zoom: 8.5, maxZoom: 13, extent: MAP_DEFAULT_EXTENT, }), controls: [ new ARPAVAPI.openlayers.control.Zoom() ] }); // aggiungo lo sfondo const sfondo = new ARPAVAPI.openlayers.layer.Tile({ source: new ARPAVAPI.openlayers.source.OSM({ url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}', }), name: 'sfondo_' + divMappa, }); objMap.addLayer( sfondo ); return objMap; } /** * Aggiungo l'immagine indicata all'oggetto mappa */ function addImmagineIso(objMap) { // se l'immagina desiderata NON è fra quelle disponibili if ( objMap.ElencoImmagini.immagine > (objMap.ElencoImmagini.giorni.length - 1) ) { objMap.ElencoImmagini.immagine = 0; } const imgTupla = objMap.ElencoImmagini.giorni[ objMap.ElencoImmagini.immagine ]; var extent = new ARPAVAPI.openlayers.extent.applyTransform([imgTupla.x_min, imgTupla.y_min, imgTupla.x_max, imgTupla.y_max], ARPAVAPI.openlayers.proj.getTransform("EPSG:4326","EPSG:3857") ); const imageLayer = new ARPAVAPI.openlayers.layer.Image({ source: new ARPAVAPI.openlayers.source.ImageStatic({ url : objMap.ElencoImmagini.PathImmagini + imgTupla['nomefile'] + '?rnd=' + Math.random() , projection: 'EPSG:3857', imageExtent: extent, // imageSize: [1186, 982], // dimensione immagine // imageSize: [1186, 978], // con queste l'immagine è più precisa nel posizionamento gis imageSize: [1186, 978], // }), visible: true, name: layerMappaPrec, }); // cancello i layer delle stazioni e delle iso cancellaLayer(objMap, layerMappaPrec); // aggiungo il nuovo layer dell'immagine objMap.addLayer( imageLayer ); } /** * cancello i layer delle stazioni e delle iso */ function cancellaLayer(objMap, nomeLayer) { objMap.getLayers().forEach(layer => { if ( layer && layer.get('name') ) { if ( layer.get('name') == nomeLayer) { objMap.removeLayer(layer); } } }); } /** * funzione per capire quando un div viene visualizzato */ function onVisible(element, callback) { new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if(entry.intersectionRatio > 0) { callback(element); observer.disconnect(); } }); }).observe(element); if(!callback) return new Promise(r => callback=r); } // ------------------------------------------------------------------------ function CreaDivPagina() { // ho scritto questo codice in maniera prolissa ma, spero, chiara var frase = '\

\ '; const divPage = document.createElement('div'); divPage.setAttribute('id', 'divPage'); divPage.innerHTML = frase; block.append(divPage); block.style.marginTop = '0'; block.style.paddingTop = '0'; // default dei font nei grafici if (isMobile() ) { ARPAVAPI.Chart.defaults.font.size = 7; AddStyle(7); } else { ARPAVAPI.Chart.defaults.font.size = 16; AddStyle(15); } // popolo il contenuto di ogni frame fncPrecipitazione( document.getElementById( 'bodyPrecipitazione') ); // quando appare il framePortate parto con il caricamento del suo contenuto // altrimenti si impiantava la creazione della mappa causa dimensioni div a 0pix non essendo visualizzato onVisible(document.getElementById('framePortate'), function() { fncPortate( document.getElementById( 'bodyPortate') ); }); onVisible(document.getElementById('frameNeve'), function() { fncNeve( document.getElementById( 'bodyNeve') ); }); fncSerbatoi( document.getElementById( 'bodySerbatoi') ); fncLagoGarda( document.getElementById( 'bodyLagoGarda') ); onVisible(document.getElementById('frameFalde'), function() { fncFalde( document.getElementById( 'bodyFalde') ); }); fncAgro( document.getElementById( 'bodyAgro') ); AttendiLogoCrices(20); } /** * Funzione per il frame Precipitazione */ function fncPrecipitazione( idBody ) { const corpoFrame = document.createElement('div'); idBody.append( corpoFrame ); corpoFrame.setAttribute('id', 'divPioggia'); corpoFrame.setAttribute('class', 'row'); // colonna dei pulsanti const divPulsanti = document.createElement('div'); corpoFrame.append(divPulsanti); divPulsanti.setAttribute('id', 'divPioggiaPulsanti'); divPulsanti.setAttribute('class', 'col-2'); var frase = ' \

\ \ \ \ \ \

'; divPulsanti.innerHTML = frase; // colonna della mappa const divColonnaPioggia = document.createElement('div'); divColonnaPioggia.setAttribute('id', 'divColonnaPioggia'); divColonnaPioggia.setAttribute('class', 'col-10'); corpoFrame.append(divColonnaPioggia); // div della mappa const divMappa = document.createElement('div'); divColonnaPioggia.append(divMappa); divMappa.setAttribute('id', 'divPioggiaMappa'); divMappa.setAttribute('style', 'width:900px; height: 800px; border: thin solid #A5A5A5') // aggiungo i pulsanti di scorrimento AddPulsantiScorrimentoGiorni( 'divPioggiaMappa' ); // aggiungo la mappa OpenLayer mapPrec = CaricaMappa('divPioggiaMappa'); // informazioni sulla mappa visualizzata const divInfoMappa = document.createElement('div'); divInfoMappa.setAttribute('id', 'divPioggiaMappaInfo'); divColonnaPioggia.append(divInfoMappa); // legenda colori delle isolinee const divLegendaMappa = document.createElement('div'); divLegendaMappa.setAttribute('id', 'divPioggiaMappaLegenda'); divLegendaMappa.setAttribute('class', 'col-4'); divColonnaPioggia.append(divLegendaMappa); // aggiungo delle voci per ricordare che giorno era posizionato e che kml stata guardando mapPrec.PioggiaMappaImmagine = 0; mapPrec.PioggiaMappaKML = lnkConfiniProv; // click dei pulsanti di precipitazione document.getElementById("btnPGiorno").onclick = function() { MapPGiorno(this, mapPrec, 1); }; document.getElementById("btnPCumulata").onclick = function() { MapPGiorno(this, mapPrec, 2); }; document.getElementById("btnPAnnoIdrolog").onclick = function() { MapPDeficit(this, mapPrec, 5); }; document.getElementById("btnPdeficitMese").onclick = function() { MapPDeficit(this, mapPrec, 3); }; document.getElementById("btnPdeficitAnno").onclick = function() { MapPDeficit(this, mapPrec, 4); }; // prima mappa da vedere document.getElementById("btnPGiorno").click(); } /** * AddPulsantiScorrimentoGiorni: inserisce il div, per i pulsanti di cambio giorno, sopra alla divMappa */ function AddPulsantiScorrimentoGiorni( divMappa ) { // bottoni dei sensori var frase = '

'; frase += ''; frase += ''; frase += ''; frase += ''; frase += ''; frase += ''; frase += '

'; const divBottoni = document.createElement('div'); divBottoni.setAttribute('id', divMappa + '-divBottoni'); divBottoni.innerHTML = frase; // metto i pulsanti dentro al div della mappa divBottoni.setAttribute('class', 'ol-overlaycontainer layer-button-control text-left btn-toolbar'); divBottoni.setAttribute('role', 'toolbar'); divBottoni.setAttribute('style', 'position: absolute; left: 70px; top: 10px; pointer-events: auto; z-index: 4000;') document.getElementById(divMappa).append(divBottoni); // eventi sui pulsanti dei vari confini document.getElementById(divMappa + '-province').onclick = function () { cancellaLayer(mapPrec, layerKML); mapPrec.PioggiaMappaKML = lnkConfiniProv; AggiungiKMl(mapPrec, lnkConfiniProv); } document.getElementById(divMappa + '-zoneAllerta').onclick = function () { cancellaLayer(mapPrec, layerKML); mapPrec.PioggiaMappaKML = lnkZAllerta; AggiungiKMl(mapPrec, lnkZAllerta); } document.getElementById(divMappa + '-baciniIdro').onclick = function () { cancellaLayer(mapPrec, layerKML); mapPrec.PioggiaMappaKML = lnkBaciniIdrografici; AggiungiKMl(mapPrec, lnkBaciniIdrografici); } } /** * AggiungiKMl: aggiungo il layer kml indicato */ function AggiungiKMl(objMap, lnkKML, bHint = true) { // aggiungo il layer kml zone di allerta var lyKML = new ARPAVAPI.openlayers.layer.Vector({ source: new ARPAVAPI.openlayers.source.Vector ({ format: new ARPAVAPI.openlayers.format.KML({ extractStyles: false, extractAttributes: true }), url: lnkKML, }), style: polygonStyleFunction, name: layerKML, }); // Add Vector layer to map objMap.addLayer(lyKML); // se ho già valorizzato l'hint allora esco if ( ! bHint) { return; } if ( document.getElementById('hintStazionePrecipitazione') ) { return; } // se usate in più div gli hint allora dovete gestirveli in maniera diversa // spazio dove mettere il testo del popup sulla stazione const divHintPrec = document.createElement('div'); divHintPrec.setAttribute('id', 'hintStazionePrecipitazione'); divHintPrec.setAttribute('class', 'ol-overlay-container ol-selectable'); divHintPrec.style.transform= 'translate(-50%, -105%)'; divHintPrec.style.borderStyle = "solid"; divHintPrec.style.borderWidth = "thin"; divHintPrec.style.borderRadius = "5px"; divHintPrec.style.whiteSpace = 'nowrap'; divHintPrec.style.backgroundColor = "#636363"; divHintPrec.style.borderColor = "#C4C4C4"; divHintPrec.style.padding = "5px"; divHintPrec.style.color = "white"; divHintPrec.style.fontFamily = '"Titillium Web",Geneva,Tahoma,sans-serif'; divHintPrec.style.fontSize = '10px'; document.getElementById('divPioggiaMappa').append(divHintPrec); var popupPrec = new ARPAVAPI.openlayers.Overlay({ element: document.getElementById('hintStazionePrecipitazione'), stopEvent: false, autoPan: { animation: { duration: 250, }, }, name: 'popUpKML' }); objMap.addOverlay(popupPrec); // evento click sull'area del kml objMap.on('singleclick', function (evt) { const feature = objMap.forEachFeatureAtPixel(evt.pixel, function (feature) { return feature; }); if ( ! feature) { return; } const name = feature.getProperties().name; if (name) { // recupero della tabella corrispondente let lnkTabella; if (objMap.PioggiaMappaKML == lnkZAllerta) { lnkTabella = objMap.ElencoImmagini.tabella_zone_allerta; } else { lnkTabella = objMap.ElencoImmagini.tabella_bacini_idro; } // sostituisco il {name} con il valore della zona clickata lnkTabella = objMap.ElencoImmagini.PathImmagini + lnkTabella.replace('{name}', name); // al momento scrivo il link da aprire // 21/01/2026 NON metto più il link che si sarebbe dovuto aprire // document.getElementById( 'divPioggiaMappaInfo').innerHTML = 'Carico la tabella ' + lnkTabella; } }); //evento di spostamento del mouse objMap.on('pointermove', function (evt) { if (evt.dragging) { return; } const pixel = objMap.getEventPixel(evt.originalEvent); var hit = objMap.hasFeatureAtPixel(evt.pixel, { layerFilter: function(layer) { return (layer.get('name') === layerKML); // se sono sopra al layer delle zone di allerta } }); if (hit) { objMap.getTargetElement().style.cursor = 'pointer'; const feature = objMap.forEachFeatureAtPixel(pixel, function (feature) { return feature; }); if ( feature ) { // in base al KML visalizzo l'etichetta appropriata const description = feature.getProperties().description; if (description) { // etichetta che si muove sopra al mouse document.getElementById('hintStazionePrecipitazione').innerHTML = description; popupPrec.setPosition(evt.coordinate); } } } else { objMap.getTargetElement().style.cursor = ''; popupPrec.setPosition(undefined); } }); } // mappe del deficit mese/anno idrologico + cumulata anno idrologico async function MapPDeficit(btn, objMap, nPulsante) { // tolgo il livello delle piogge cumulate cancellaLayer( objMap, layerMappaPrec); // metto lo sfondo al pulsante btn.classList.toggle("box-shadow"); // in base al pulsante recupero l'immagine corrispondente var pathImmagini, lnk; switch (nPulsante) { case 1: pathImmagini = lnkMappePrecGiorno; break; case 2: pathImmagini = lnkMappePrecMese; break; case 3: pathImmagini = lnkMappePrecDeficitMese; break; case 4: pathImmagini = lnkMappePrecDeficitAnno; break; case 5: pathImmagini = lnkMappePrecAnnoIdro; break; } lnk = pathImmagini + indiceMappePrec; if ( objMap.ElencoImmagini ) { if ( objMap.ElencoImmagini.PathImmagini != pathImmagini ) { objMap.ElencoImmagini.oldPusante.setAttribute('style', 'background: white') // tolgo lo sfondo al precedente pulsante // lo elimino in modo da caricarlo sotto objMap.ElencoImmagini = null; // tolgo il kml precedente cancellaLayer(objMap, layerKML); } } if ( ! objMap.ElencoImmagini ) { try { const response = await fetch(lnk + '?rnd=' + Math.random() ); objMap.ElencoImmagini = (await response.json()); objMap.ElencoImmagini.PathImmagini = pathImmagini; objMap.ElencoImmagini.immagine = 0; // NON ci sono immagini da scorrere ma solo una objMap.ElencoImmagini.codPulsante = nPulsante; // codice del pulsante objMap.ElencoImmagini.oldPusante = btn; // ricordo il pulsante in modo da togliere lo sfondo al cambio objMap.ElencoImmagini.oldPusante.setAttribute('style', 'background: skyblue') // metto lo sfondo al pulsante premuto // informazioni aggiuntive per anno idrologico const dInizioStorico = new Date().ConvIstante( objMap.ElencoImmagini.giorni[0].periodo_inizio ); const dFineStorico = new Date().ConvIstante( objMap.ElencoImmagini.giorni[0].periodo_fine ); let infoAggiuntive = ''; if (nPulsante == 3) { infoAggiuntive = '
Periodo mese precedente dal ' + dInizioStorico.Formato('gg g mmm YYYY') + ' al ' + dFineStorico.Formato('gg g mmm YYYY'); } if ( (nPulsante == 4) || (nPulsante == 5) ) { infoAggiuntive = '
Periodo anno idrologico dal ' + dInizioStorico.Formato('gg g mmm YYYY') + ' al ' + dFineStorico.Formato('gg g mmm YYYY'); } // periodo di riferimento per le mappe di deficit if ( nPulsante == 3 ) { infoAggiuntive += '
Media storica di riferimento usando solo il mese di ' + dInizioStorico.Formato('mmm') + ' degli anni dal ' + objMap.ElencoImmagini.giorni[0].storico_inizio + ' al ' + objMap.ElencoImmagini.giorni[0].storico_fine; } if ( nPulsante == 4 ) { infoAggiuntive += '
Media storica di riferimento dal primo ottobre ' + objMap.ElencoImmagini.giorni[0].storico_inizio + ' al 30 settembre ' + objMap.ElencoImmagini.giorni[0].storico_fine; } // data di aggiornamento dell'immagine selezionata const dAggio = new Date().ConvIstante( objMap.ElencoImmagini.giorni[ objMap.ElencoImmagini.immagine ].aggiornamento ); document.getElementById("divPioggiaMappaInfo").innerHTML = 'Elaborazione ' + dAggio.Formato('DD/MM/YYYY') + ' alle ' + dAggio.Formato('HH:mm') + ' solari.' + infoAggiuntive; // carico l'immagine addImmagineIso( objMap ); // carico l'ultimo kml visualizzato AggiungiKMl(objMap, objMap.PioggiaMappaKML); // nascondo il giorno precedente e sucessvio document.getElementById(objMap.getTarget() + '-giornoprec').style.display = "none"; document.getElementById(objMap.getTarget() + '-giornosucc').style.display = "none"; if ( (nPulsante == 4) || (nPulsante == 5) ) { document.getElementById(objMap.getTarget() + '-giorno').innerHTML = 'Anno idrologico'; } else { const dataRifer = new Date().ConvIstante( objMap.ElencoImmagini.giorni[0].dataora ); document.getElementById(objMap.getTarget() + '-giorno').innerHTML = dataRifer.Formato('mmm YYYY'); } } catch (error) { // qualche errore nel recupero del file indice document.getElementById("divPioggiaMappaInfo").innerHTML = 'Errore deficit/surplus non presente'; } } if (objMap.ElencoImmagini) { let etichettaLegenda = 'precipitazione'; if (nPulsante == 3 || nPulsante == 4) { etichettaLegenda = 'deficit/surplus'; } AggiornaLegendaMappa(objMap.ElencoImmagini, etichettaLegenda, 'divPioggiaMappaLegenda'); } } // mappa giornaliera a scorrimento per il frame precipitazione async function MapPGiorno(btn, objMap, nPulsante) { btn.classList.toggle("box-shadow"); document.getElementById(objMap.getTarget() + '-giornoprec').style.display = "block"; document.getElementById(objMap.getTarget() + '-giornosucc').style.display = "block"; document.getElementById(objMap.getTarget() + '-giornosucc').setAttribute('style', 'background: white'); // tolgo lo sfondo al pulsante document.getElementById(objMap.getTarget() + '-giornoprec').setAttribute('style', 'background: white'); // tolgo lo sfondo al pulsante // in base al pulsante recupero l'immagine corrispondente var pathImmagini, lnk; switch (nPulsante) { case 1: pathImmagini = lnkMappePrecGiorno; break; case 2: pathImmagini = lnkMappePrecMese; break; case 3: pathImmagini = lnkMappePrecDeficitMese; break; case 4: pathImmagini = lnkMappePrecDeficitAnno; break; } lnk = pathImmagini + indiceMappePrec; // se esiste l'elenco delle immagini controllo che sia quello già caricato if ( objMap.ElencoImmagini ) { if ( objMap.ElencoImmagini.PathImmagini != pathImmagini ) { objMap.ElencoImmagini.oldPusante.setAttribute('style', 'background: white') // tolgo lo sfondo al precedente pulsante // lo elimino in modo da caricarlo sotto con il nuovo index objMap.ElencoImmagini = null; } } if ( ! objMap.ElencoImmagini ) { try { const response = await fetch(lnk + '?rnd=' + Math.random() ); objMap.ElencoImmagini = (await response.json()); objMap.ElencoImmagini.PathImmagini = pathImmagini; objMap.ElencoImmagini.immagine = objMap.PioggiaMappaImmagine; // parto con la stessa immagine (se cambiata) objMap.ElencoImmagini.codPulsante = nPulsante; // codice del pulsante objMap.ElencoImmagini.oldPusante = btn; // ricordo il pulsante in modo da togliere lo sfondo al cambio objMap.ElencoImmagini.oldPusante.setAttribute('style', 'background: skyblue') // metto lo sfondo al pulsante premuto // data di aggiornamento dell'immagine selezionata const dAggio = new Date().ConvIstante( objMap.ElencoImmagini.giorni[ objMap.ElencoImmagini.immagine ].aggiornamento ); document.getElementById("divPioggiaMappaInfo").innerHTML = 'Elaborazione ' + dAggio.Formato('DD/MM/YYYY') + ' alle ' + dAggio.Formato('HH:mm') + ' solari.'; } catch (error) { // qualche errore nel recupero del file indice document.getElementById("divPioggiaMappaInfo").innerHTML = 'Precipitazione non presente'; } } // aggiungo alla mappa l'immagine desiderata if (objMap.ElencoImmagini) { cancellaLayer(mapPrec, layerKML); addImmagineIso( objMap ); AggiungiKMl(objMap, objMap.PioggiaMappaKML); // date di riferimento della mappa nei pulsanti document.getElementById(objMap.getTarget() + '-giornoprec').innerHTML = 'Giorno precedente'; document.getElementById(objMap.getTarget() + '-giornosucc').innerHTML = 'Giorno successivo'; const dataRifer = new Date().ConvIstante( objMap.ElencoImmagini.giorni[ objMap.ElencoImmagini.immagine ].dataora ); document.getElementById(objMap.getTarget() + '-giorno').innerHTML = dataRifer.Formato('DD/MM/YYYY'); // attenzione che l'array giorni è dal più recente (indice 0) al più remoto (indice length) // gestione del cambio di giorno precedente document.getElementById(objMap.getTarget() + '-giornoprec').onclick = function() { if ( objMap.ElencoImmagini.immagine < (objMap.ElencoImmagini.giorni.length - 1) ) { objMap.ElencoImmagini.immagine += 1; document.getElementById(objMap.getTarget() + '-giorno').innerHTML = 'Recupero immagine'; cancellaLayer(mapPrec, layerKML); addImmagineIso(objMap); AggiungiKMl(objMap, objMap.PioggiaMappaKML); const dataRifer = new Date().ConvIstante( objMap.ElencoImmagini.giorni[ objMap.ElencoImmagini.immagine ].dataora ); document.getElementById(objMap.getTarget() + '-giorno').innerHTML = dataRifer.Formato('DD/MM/YYYY'); // per il cambio ricordo l'ultima visualizzata objMap.PioggiaMappaImmagine = objMap.ElencoImmagini.immagine; } }; // gestione del cambio di giorno successivo document.getElementById(objMap.getTarget() + '-giornosucc').onclick = function() { if ( objMap.ElencoImmagini.immagine > 0 ) { objMap.ElencoImmagini.immagine -= 1; document.getElementById(objMap.getTarget() + '-giorno').innerHTML = 'Recupero immagine'; cancellaLayer(mapPrec, layerKML); addImmagineIso(objMap); AggiungiKMl(objMap, objMap.PioggiaMappaKML); const dataRifer = new Date().ConvIstante( objMap.ElencoImmagini.giorni[ objMap.ElencoImmagini.immagine ].dataora ); document.getElementById(objMap.getTarget() + '-giorno').innerHTML = dataRifer.Formato('DD/MM/YYYY'); // per il cambio ricordo l'ultima visualizzata objMap.PioggiaMappaImmagine = objMap.ElencoImmagini.immagine; } }; AggiornaLegendaMappa(objMap.ElencoImmagini, 'precipitazione', 'divPioggiaMappaLegenda'); } else { // cancello i layer delle stazioni e delle iso cancellaLayer( objMap, layerMappaPrec ); // tolgo la legenda colori document.getElementById('divPioggiaMappaLegenda').innerHTML = ''; } } /** * valorizza il div scalaColori con i livelli dell'indice.json */ function CaricaLegendaColori(etichetta, unitaMis, divScala, livelli) { const leg = document.getElementById(divScala); // se esiste già il pulsante allora lo elimino leg.innerHTML = ''; // pulsante per vedere la rampa colori const bottone = document.createElement('button'); bottone.setAttribute('id', 'btnLegenda'); bottone.setAttribute('class', 'btn btn-outline-primary btn-sm'); bottone.innerHTML = 'Legenda colori ' + etichetta; bottone.onclick = function () { document.getElementById('legendaColori').classList.toggle("d-none"); } leg.appendChild(bottone); // contenitore rampa colori const rampaDiv = document.createElement('div'); rampaDiv.setAttribute('id', 'legendaColori'); rampaDiv.setAttribute('class', 'd-none'); leg.appendChild(rampaDiv); var n = livelli.length; var i, colore, livello; // prima fascia: <= primo livello colore = livelli[0]; livello = document.createElement('div'); livello.setAttribute('id', 'legenda-0'); livello.setAttribute('class', 'border border-dark'); livello.setAttribute('style', "color:" + colore.font_color + "; background-color:rgb(" + colore.red + "," + colore.green + "," + colore.blue + ");" ); livello.innerHTML = etichetta + ' <= ' + colore.valore + ' ' + unitaMis; rampaDiv.appendChild(livello); // fasce intermedie: > livelli[i-1] e <= livelli[i], colore = livelli[i-1] for (i = 1; i < n; i++) { colore = livelli[i - 1]; livello = document.createElement('div'); livello.setAttribute('id', 'legenda-' + i); livello.setAttribute('class', 'border border-dark'); livello.setAttribute('style', "color:" + colore.font_color + "; background-color:rgb(" + colore.red + "," + colore.green + "," + colore.blue + ");" ); livello.innerHTML = etichetta + ' > ' + livelli[i - 1].valore + ' e <= ' + livelli[i].valore + ' ' + unitaMis; rampaDiv.appendChild(livello); } // ultima fascia: > ultimo livello colore = livelli[n - 1]; livello = document.createElement('div'); livello.setAttribute('id', 'legenda-' + n); livello.setAttribute('class', 'border border-dark'); livello.setAttribute('style', "color:" + colore.font_color + "; background-color:rgb(" + colore.red + "," + colore.green + "," + colore.blue + ");" ); livello.innerHTML = etichetta + ' > ' + colore.valore + ' ' + unitaMis; rampaDiv.appendChild(livello); } /** * funzione per colorare il layer zone di allerta kml * vedere la pagina https://openlayers.org/en/latest/examples/vector-labels.html */ function polygonStyleFunction(feature, resolution) { return new ARPAVAPI.openlayers.style.Style({ stroke: new ARPAVAPI.openlayers.style.Stroke({ color: 'green', width: 2, }), fill: new ARPAVAPI.openlayers.style.Fill({ color: 'rgba(0, 0, 255, 0)', }), // blu trasparente text: new ARPAVAPI.openlayers.style.Text({ textAlign: 'center', textBaseline: 'middle', font: '0.8rem "Titillium Web",Geneva,Tahoma,sans-serif', text: '', // feature.get('name'), // etichetta della zona fill: new ARPAVAPI.openlayers.style.Fill({color: 'black'}), stroke: new ARPAVAPI.openlayers.style.Stroke({color: '#ffffff', width: 3}), offsetX: 0, offsetY: 0, placement: 'point', maxAngle: 45, overflow: true, rotation: 0, }), }); } /** * Funzione per il frame Portate */ function fncPortate( idBody ) { const corpoFrame = document.createElement('div'); corpoFrame.setAttribute('id', 'divPortate'); corpoFrame.setAttribute('class', 'col-12'); idBody.append( corpoFrame ); // div della mappa const divMappa = document.createElement('div'); divMappa.setAttribute('id', 'divPortataMappa'); divMappa.setAttribute('style', 'width: 100%; height: 800px; border: thin solid #A5A5A5;') corpoFrame.append(divMappa); // informazioni sulla mappa visualizzata const divInfoMappa = document.createElement('div'); divInfoMappa.setAttribute('id', 'divPortataMappaInfo'); divInfoMappa.setAttribute('class', 'col-12'); corpoFrame.append(divInfoMappa); // la mappa contiene i codici stazione che non hanno data di elaborazione divInfoMappa.innerHTML = '
'; // grafici in base alla stazione const divGraficoStaz = document.createElement('div'); divGraficoStaz.setAttribute('id', 'divPortataStazione'); divGraficoStaz.setAttribute('class', 'col-12'); corpoFrame.append(divGraficoStaz); // aggiungo la mappa OpenLayer var mapPort = CaricaMappa('divPortataMappa'); // aggiungo il kml dei bacini idrografici AggiungiKMl(mapPort, lnkBaciniIdrografici, false); // aggiungo le stazioni di portata da visualizzare AggiungiStazioni(mapPort, lnkStazioniPortata, layerMappaPortata, null, 'codice_stazione'); // spazio dove mettere il testo del popup sulla stazione const divHintPortata = document.createElement('div'); divHintPortata.setAttribute('id', 'hintStazionePortata'); divHintPortata.setAttribute('class', 'ol-overlay-container ol-selectable'); divHintPortata.style.transform= 'translate(-50%, -105%)'; divHintPortata.style.borderStyle = "solid"; divHintPortata.style.borderWidth = "thin"; divHintPortata.style.borderRadius = "5px"; divHintPortata.style.whiteSpace = 'nowrap'; divHintPortata.style.backgroundColor = "#636363"; divHintPortata.style.borderColor = "#C4C4C4"; divHintPortata.style.padding = "5px"; divHintPortata.style.color = "white"; divHintPortata.style.fontFamily = '"Titillium Web",Geneva,Tahoma,sans-serif'; divHintPortata.style.fontSize = '10px'; divMappa.append(divHintPortata); // popup sulla stazione var popupPort = new ARPAVAPI.openlayers.Overlay({ element: document.getElementById('hintStazionePortata'), stopEvent: false, autoPan: { animation: { duration: 250, }, }, }); mapPort.addOverlay(popupPort); // evento click mapPort.on('singleclick', function (evt) { const feature = mapPort.forEachFeatureAtPixel(evt.pixel, function (feature) { return feature; }); if ( ! feature) { return; } const stz = feature.getProperties().data; if (stz) { // al momento scrivo cosa ha clickato // document.getElementById( 'divPortataMappaInfo').innerHTML = 'Hai premuto sulla stazione ' + stz.nome_stazione + ' (' + stz.codice_stazione + ')'; fncPortateImmagineStazione(stz, 'divPortataStazione'); } }); //evento di spostamento del mouse mapPort.on('pointermove', function (evt) { if (evt.dragging) { return; } const pixel = mapPort.getEventPixel(evt.originalEvent); var hit = mapPort.hasFeatureAtPixel(evt.pixel, { layerFilter: function(layer) { return (layer.get('name') === layerMappaPortata); // se sono sopra al layer stazioni } }); if (hit) { mapPort.getTargetElement().style.cursor = 'pointer'; const feature = mapPort.forEachFeatureAtPixel(pixel, function (feature) { return feature; }); if ( feature ) { const stz = feature.getProperties().data; if (stz) { document.getElementById('hintStazionePortata').innerHTML = stz.nome_stazione; popupPort.setPosition(evt.coordinate); } } } else { mapPort.getTargetElement().style.cursor = ''; popupPort.setPosition(undefined); } }); } /** * visualizza l'immagine della falda per la stazione objStaz nel divImmagine */ function fncPortateImmagineStazione(objStaz, divImmagine) { // link alle immagini fews di stazioni portate a cui si aggiunge una cosa del tipo // 20251007_12_VEIM0000328_q1.png // 20251007_12_VEIM0000328_q1_percentiles.png // const lnkStazioniportateIMG = 'https://www.arpa.veneto.it/risorse/data-meteo/bollettino_risorsa_idrica/portate/'; const ieri = new Date(); let giorni = 0, presente, lnkStaz1, lnkStaz2, soloNome1, soloNome2; do { ieri.setDate(ieri.getDate() - 1); giorni += 1; soloNome1 = ieri.Formato('YYYYMMDD') + '_12_VEIM' + String(objStaz.codice_stazione).padStart(7, '0') + '_q1.png'; soloNome2 = ieri.Formato('YYYYMMDD') + '_12_VEIM' + String(objStaz.codice_stazione).padStart(7, '0') + '_q1_percentiles.png'; lnkStaz1 = lnkStazioniportateIMG + soloNome1; lnkStaz2 = lnkStazioniportateIMG + soloNome2; presente = UrlExists(lnkStaz1); if ( presente ) { presente = UrlExists(lnkStaz2); } } while ( ( ! presente ) && (giorni < 5) ) document.getElementById(divImmagine).innerHTML = ''; if ( presente ) { let contenitoreIMG = document.createElement("div"); contenitoreIMG.setAttribute('class', 'text-center'); document.getElementById(divImmagine).append(contenitoreIMG); let oImg1 = document.createElement("img"); oImg1.setAttribute('src', lnkStaz1); contenitoreIMG.append(oImg1); let oImg2 = document.createElement("img"); oImg2.setAttribute('src', lnkStaz2); contenitoreIMG.append(oImg2); // informazioni sull'immagine const infoIMG = document.createElement('div'); infoIMG.innerHTML = 'Grafici con dati sino al ' + ieri.Formato('DD/MM/YYYY'); contenitoreIMG.append( infoIMG ); // mi posiziono sul grafico nella pagina oImg1.setAttribute('tabindex', '0'); oImg1.focus(); } } /** * AggiungiStazioni: aggiungo le stazioni alla mappa */ async function AggiungiStazioni(objMap, lnkStazioni, nomeLayer, nomeDivInfo, colonnaDati = 'codice_stazione', fncAggiornamenti = null) { const lnk = lnkStazioni + '&rnd=' + Math.random(); const response = await fetch(lnk); const jsonResponse = (await response.json()); const stzData = jsonResponse.data; // data di aggiornamento delle stazioni se indicato devo metterlo if (jsonResponse.aggiornamento && nomeDivInfo ) { const dAggio = new Date().ConvIstante( jsonResponse.aggiornamento ); document.getElementById(nomeDivInfo).innerHTML = 'Elaborazione ' + dAggio.Formato('DD/MM/YYYY') + ' alle ' + dAggio.Formato('HH:mm') + ' solari.'; } if (fncAggiornamenti) { fncAggiornamenti(jsonResponse); } // oggetto geoJSON const geojsonObject = { type: 'FeatureCollection', crs: { type: 'name', properties: { name: 'EPSG:3857', }, }, features: [], }; let coord = []; stzData.forEach((stazione, index) => { let posiz = 'bottom'; // l'etichetta ha il point sotto coord.push( stazione.point ); geojsonObject.features.push({ type: 'Feature', geometry: JSON.parse(stazione.point), properties: { id: stazione.codice_stazione, xTextBaseline: posiz, data: { ...stazione }, // tutte le proprietà della stazione presente nel json }, }); }); // punto della stazione di colore standard let iconStyle = new ARPAVAPI.openlayers.style.Style({ image: new ARPAVAPI.openlayers.style.Circle({ radius: pointDimension, fill: new ARPAVAPI.openlayers.style.Fill({color: pointColor}), stroke: new ARPAVAPI.openlayers.style.Stroke({ color: pointLineColor, width: 1 }) }), }); // label stazione var labelStyle = new ARPAVAPI.openlayers.style.Style({ text: new ARPAVAPI.openlayers.style.Text({ placement: 'point', font: pointFont, overflow: true, fill: new ARPAVAPI.openlayers.style.Fill({ color: 'black', }), stroke: new ARPAVAPI.openlayers.style.Stroke({ color: pointTextBackgroundColor, width: 4, }), offsetY: -3, textBaseline: 'bottom', textAlign: 'center', rotation: 0, }) }); var style = [iconStyle, labelStyle]; const vectorLayer = new ARPAVAPI.openlayers.layer.Vector({ source: new ARPAVAPI.openlayers.source.Vector({ format: new ARPAVAPI.openlayers.format.GeoJSON(), features: new ARPAVAPI.openlayers.format.GeoJSON({ featureProjection: 'EPSG:3857', }).readFeatures(geojsonObject) }), visible: true, name: nomeLayer, style: function(feature) { // etichetta da visualizzare let et = feature.getProperties().data.codice_stazione; let colonne = feature.getProperties().data; for (const[nomeColonna, valoreColonna] of Object.entries(colonne) ) { if (nomeColonna == colonnaDati) { et = valoreColonna; } } labelStyle.getText().setText( '' + et ); // posizione dell'etichetta labelStyle.getText().setTextBaseline( feature.getProperties().xTextBaseline ); return [iconStyle, labelStyle]; }, }); // cancello i layer delle stazioni e delle iso cancellaLayer(objMap, layerMappaPortata); cancellaLayer(objMap, layerMappaNeve); // aggiungo il nuovo layer delle stazioni objMap.addLayer( vectorLayer ); // eventi mouse sui pallini stazioni } /** * Funzione per il frame Neve */ async function fncNeve( idBody ) { const corpoFrame = document.createElement('div'); idBody.append( corpoFrame ); corpoFrame.setAttribute('id', 'divNeve'); corpoFrame.setAttribute('class', 'row'); // colonna dei pulsanti const divPulsanti = document.createElement('div'); corpoFrame.append(divPulsanti); divPulsanti.setAttribute('id', 'divNevePulsanti'); divPulsanti.setAttribute('class', 'col-2 text-center'); let frase = ' \

\ \ \

'; // infografica del fiocco di neve let fiocchi = ' \

\
Dolomiti
\ \
Prealpi
\ \

'; divPulsanti.innerHTML = frase + fiocchi; // colonna della mappa const divColonnaNeve = document.createElement('div'); divColonnaNeve.setAttribute('id', 'divColonnaNeve'); divColonnaNeve.setAttribute('class', 'col-10'); corpoFrame.append(divColonnaNeve); // div della mappa const divMappa = document.createElement('div'); divMappa.setAttribute('id', 'divNeveMappa'); divMappa.setAttribute('style', 'width:900px; height: 800px; border: thin solid #A5A5A5') divColonnaNeve.append(divMappa); // informazioni sulla mappa visualizzata const divInfoMappa = document.createElement('div'); divInfoMappa.setAttribute('id', 'divNeveMappaInfo'); divColonnaNeve.append(divInfoMappa); const divNeveContent = document.createElement('div'); divNeveContent.setAttribute('id', 'divNeveContent'); divColonnaNeve.append(divNeveContent); // aggiungo la mappa OpenLayer var mapNeve = CaricaMappa('divNeveMappa'); AggiungiKMl(mapNeve, lnkConfiniProv); // spazio dove mettere il testo del popup sulla stazione const divHintNeve = document.createElement('div'); divHintNeve.setAttribute('id', 'hintStazioneNeve'); divHintNeve.setAttribute('class', 'ol-overlay-container ol-selectable'); divHintNeve.style.transform= 'translate(-50%, -105%)'; divHintNeve.style.borderStyle = "solid"; divHintNeve.style.borderWidth = "thin"; divHintNeve.style.borderRadius = "5px"; divHintNeve.style.whiteSpace = 'nowrap'; divHintNeve.style.backgroundColor = "#636363"; divHintNeve.style.borderColor = "#C4C4C4"; divHintNeve.style.padding = "5px"; divHintNeve.style.color = "white"; divHintNeve.style.fontFamily = '"Titillium Web",Geneva,Tahoma,sans-serif'; divHintNeve.style.fontSize = '10px'; divMappa.append(divHintNeve); // popup sulla stazione var popupNeve = new ARPAVAPI.openlayers.Overlay({ element: document.getElementById('hintStazioneNeve'), stopEvent: false, autoPan: { animation: { duration: 250, }, }, }); mapNeve.addOverlay(popupNeve); // evento click mapNeve.on('singleclick', function (evt) { const feature = mapNeve.forEachFeatureAtPixel(evt.pixel, function (feature) { return feature; }); if ( ! feature) { return; } const stz = feature.getProperties().data; if (stz) { // al momento scrivo cosa ha clikkato // document.getElementById( 'divNeveContent').innerHTML = 'Hai premuto sulla stazione ' + stz.nome_stazione + ' (' + stz.codice_stazione + ')'; // poi sarà da fare il grafico dei dati della stazione fncNeveImmagineStazione(stz, 'divNeveContent'); } }); //evento di spostamento del mouse mapNeve.on('pointermove', function (evt) { if (evt.dragging) { return; } const pixel = mapNeve.getEventPixel(evt.originalEvent); var hit = mapNeve.hasFeatureAtPixel(evt.pixel, { layerFilter: function(layer) { return (layer.get('name') === layerMappaNeve); // se sono sopra al layer stazioni } }); if (hit) { mapNeve.getTargetElement().style.cursor = 'pointer'; const feature = mapNeve.forEachFeatureAtPixel(pixel, function (feature) { return feature; }); if ( feature ) { const stz = feature.getProperties().data; if (stz) { document.getElementById('hintStazioneNeve').innerHTML = stz.nome_stazione; popupNeve.setPosition(evt.coordinate); } } } else { mapNeve.getTargetElement().style.cursor = ''; popupNeve.setPosition(undefined); } }); // click dei pulsanti di precipitazione document.getElementById("btnNeveSuolo").onclick = function() { document.getElementById("btnNeveSuolo").classList.toggle("box-shadow"); document.getElementById("btnNeveSuolo").setAttribute('style', 'background: skyblue') // metto lo sfondo al pulsante premuto document.getElementById("btnNeveFresca").setAttribute('style', 'background: white') // tolgo lo sfondo al precedente pulsante // aggiungo le stazioni di neve al suolo AggiungiStazioni(mapNeve, lnkStazioniNeve, layerMappaNeve, 'divNeveMappaInfo', 'neve_suolo', fncNeveAggiornamenti); }; document.getElementById("btnNeveFresca").onclick = function() { document.getElementById("btnNeveFresca").classList.toggle("box-shadow"); document.getElementById("btnNeveSuolo").setAttribute('style', 'background: white') // metto lo sfondo al pulsante premuto document.getElementById("btnNeveFresca").setAttribute('style', 'background: skyblue') // tolgo lo sfondo al precedente pulsante // aggiungo le stazioni di neve fresca AggiungiStazioni(mapNeve, lnkStazioniNeve, layerMappaNeve, 'divNeveMappaInfo', 'neve_fresca', fncNeveAggiornamenti); }; // cambio mouse sui fiocchi document.getElementById("NeveFioccoDolomitiClick").onmouseover = function() { document.body.style.cursor = 'pointer'; }; document.getElementById("NeveFioccoDolomitiClick").onmouseout = function() { document.body.style.cursor = 'default'; }; document.getElementById("NeveFioccoPrealpiClick").onmouseover = function() { document.body.style.cursor = 'pointer'; }; document.getElementById("NeveFioccoPrealpiClick").onmouseout = function() { document.body.style.cursor = 'default'; }; // click sui fiocchi document.getElementById("NeveFioccoDolomitiClick").onclick = function() { fncNeveImmagineZona('Dolomiti', 'divNeveContent'); }; document.getElementById("NeveFioccoPrealpiClick").onclick = function() { fncNeveImmagineZona('Prealpi', 'divNeveContent'); }; // prima mappa da vedere document.getElementById("btnNeveSuolo").click(); } function fncNeveAggiornamenti(jsonResponse) { const dFine = new Date().ConvIstante( jsonResponse.periodo.al ); document.getElementById('divNeveMappaInfo').innerHTML = 'Valori della neve sino al ' + dFine.Formato('DD/MM/YYYY'); // ci metto il fiocco riempito della % document.getElementById('NeveFioccoDolomiti').setAttribute('y', (100-jsonResponse.fioccoDolomiti) + '%'); document.getElementById('NeveFioccoPrealpi').setAttribute('y', (100-jsonResponse.fioccoPrealpi) + '%'); } /** * controllo se l'url esiste */ function UrlExists(url) { var http = new XMLHttpRequest(); http.open('HEAD', url, false); http.send(); return http.status!=404; } /** * visualizza l'immagine della neve per la stazione objStaz nel divImmagine */ function fncNeveImmagineStazione(objStaz, divImmagine) { // link alle immagini fews di stazioni neve a cui si aggiunge una cosa del tipo 20251005_12_VEIM0000347_snd_percentiles.png // const lnkStazioniNeveIMG = 'https://www.arpa.veneto.it/risorse/data-meteo/bollettino_risorsa_idrica/neve/'; const ieri = new Date(); let giorni = 0, presente, lnkStaz, soloNome; do { ieri.setDate(ieri.getDate() - 1); giorni += 1; soloNome = ieri.Formato('YYYYMMDD') + '_12_VEIM' + String(objStaz.codice_stazione).padStart(7, '0') + '_snd_percentiles.png'; lnkStaz = lnkStazioniNeveIMG + soloNome; presente = UrlExists(lnkStaz); } while ( ( ! presente ) && (giorni < 5) ) // svuoto l'immagine precedente document.getElementById(divImmagine).innerHTML = ''; if ( presente ) { let contenitoreIMG = document.createElement("div"); contenitoreIMG.setAttribute('class', 'text-center'); document.getElementById(divImmagine).append(contenitoreIMG); let oImg = document.createElement("img"); oImg.setAttribute('src', lnkStaz); contenitoreIMG.append(oImg); // informazioni sull'immagine const infoIMG = document.createElement('div'); infoIMG.innerHTML = 'Grafico con dati sino al ' + ieri.Formato('DD/MM/YYYY'); contenitoreIMG.append( infoIMG ); // mi posiziono sul grafico nella pagina oImg.setAttribute('tabindex', '0'); oImg.focus(); } } /** * visualizzo l'immagine della zona indicata */ function fncNeveImmagineZona(nomeZona, divImmagine) { // 20251006_12_HSimed_Dolomiti_snd.png // 20251006_12_HSimed_Prealpi_snd.png che non esiste! const ieri = new Date(); let giorni = 0, presente, lnkStaz, soloNome; do { ieri.setDate(ieri.getDate() - 1); giorni += 1; soloNome = ieri.Formato('YYYYMMDD') + '_12_HSimed_' + nomeZona + '_snd.png'; lnkStaz = lnkStazioniNeveIMG + soloNome; presente = UrlExists(lnkStaz); } while ( ( ! presente ) && (giorni < 5) ) // svuoto l'immagine precedente document.getElementById(divImmagine).innerHTML = ''; if ( presente ) { let contenitoreIMG = document.createElement("div"); contenitoreIMG.setAttribute('class', 'text-center'); document.getElementById(divImmagine).append(contenitoreIMG); let oImg = document.createElement("img"); oImg.setAttribute('src', lnkStaz); contenitoreIMG.append(oImg); // informazioni sull'immagine const infoIMG = document.createElement('div'); infoIMG.innerHTML = 'Grafico con dati sino al ' + ieri.Formato('DD/MM/YYYY'); contenitoreIMG.append( infoIMG ); // mi posiziono sul grafico nella pagina oImg.setAttribute('tabindex', '0'); oImg.focus(); } } /** * Funzione per il frame Serbatoi */ async function fncSerbatoi( idBody ) { const corpoFrame = document.createElement('div'); corpoFrame.setAttribute('id', 'divSerbatoi'); corpoFrame.setAttribute('class', 'row'); idBody.append( corpoFrame ); // colonna dei pulsanti const divPulsanti = document.createElement('div'); corpoFrame.append(divPulsanti); divPulsanti.setAttribute('id', 'divSerbatoiPulsanti'); divPulsanti.setAttribute('class', 'col-2 text-center'); let frase = ' \

\ \ \

'; divPulsanti.innerHTML = frase; // colonna delle immagini const divColonna = document.createElement('div'); divColonna.setAttribute('id', 'divColonnaSerbatoi'); divColonna.setAttribute('class', 'col-10'); corpoFrame.append(divColonna); // click pulsanti document.getElementById("btnSerbatoiPiave").onclick = function() { document.getElementById("btnSerbatoiPiave").classList.toggle("box-shadow"); document.getElementById("btnSerbatoiPiave").setAttribute('style', 'background: skyblue') // metto lo sfondo al pulsante premuto document.getElementById("btnSerbatoiCorlo").setAttribute('style', 'background: white') // tolgo lo sfondo al precedente pulsante fncSerbatoiImmagine('Piave totale', 'divColonnaSerbatoi'); }; document.getElementById("btnSerbatoiCorlo").onclick = function() { document.getElementById("btnSerbatoiCorlo").classList.toggle("box-shadow"); document.getElementById("btnSerbatoiCorlo").setAttribute('style', 'background: skyblue') // metto lo sfondo al pulsante premuto document.getElementById("btnSerbatoiPiave").setAttribute('style', 'background: white') // tolgo lo sfondo al precedente pulsante fncSerbatoiImmagine('Corlo', 'divColonnaSerbatoi'); }; // prima mappa da vedere document.getElementById("btnSerbatoiPiave").click(); } /** * visualizzo l'immagine del serbatoio */ function fncSerbatoiImmagine(nomeZona, divImmagine) { // 20251006_12_ENGGMAIN_Piave totale_vl_percentiles.png // 20251006_12_ENGGMAIN_Corlo_vl_percentiles.png const ieri = new Date(); let giorni = 0, presente, lnkStaz, soloNome; do { ieri.setDate(ieri.getDate() - 1); giorni += 1; soloNome = ieri.Formato('YYYYMMDD') + '_12_ENGGMAIN_' + nomeZona + '_vl_percentiles.png'; lnkStaz = lnkSerbatoiIMG + soloNome; presente = UrlExists(lnkStaz); } while ( ( ! presente ) && (giorni < 5) ) if ( presente ) { let oImg = document.createElement("img"); oImg.setAttribute('src', lnkStaz); document.getElementById(divImmagine).innerHTML = ''; document.getElementById(divImmagine).append(oImg); // informazioni sull'immagine const infoIMG = document.createElement('div'); infoIMG.innerHTML = 'Grafico con dati sino al ' + ieri.Formato('DD/MM/YYYY'); document.getElementById(divImmagine).append( infoIMG ); } } /** * Funzione per il frame LagoGarda */ async function fncLagoGarda( idBody ) { /* \ \ \ \ \ */ const corpoFrame = document.createElement('div'); corpoFrame.setAttribute('id', 'divLagoGarda'); corpoFrame.setAttribute('class', 'row'); var frase = ' \

\ \ '; corpoFrame.innerHTML = frase; idBody.append( corpoFrame ); document.getElementById('lagogarda-info').innerHTML = 'Caricamento dati'; // carico il file lnkLagoGarda const response = await fetch(lnkLagoGarda + '?rnd=' + Math.random() ); var garda = (await response.json()); document.getElementById('lagogarda-titolo').innerHTML = '' + garda.nome_stazione + ''; // periodo dei dati attuali const attuali_inizio = new Date().ConvIstante( garda.inizio_attuali ); const attuali_fine = new Date().ConvIstante( garda.fine_attuali ); // anno di riferimento per allineare gli storici agli attuali const anno = '2000-'; var valori = {}; // grafico dello storico minimo valori.labelY = 'Livello'; valori.radius = 0; // se si vogliono i pallini usare RadiusGrafici() valori.label = 'Storico minimo'; valori.colore = '#ff00ff'; valori.hidden = false; valori.unitmeas = 'm'; valori.data = []; garda.storico.forEach(tupla => { valori.data.push( {date: anno + tupla.dataora, value: tupla.minimo} ); }); var GardaGraph = GraficoLineare('lagogarda-grafico', valori); // grafico dello storico medio valori.label = 'Storico medio'; valori.colore = 'red'; valori.hidden = false; valori.data = []; garda.storico.forEach(tupla => { valori.data.push( {date: anno + tupla.dataora, value: tupla.medio} ); }); GardaGraph = AggiungiSerie( GardaGraph, valori); // grafico dello storico massimo valori.label = 'Storico massimo'; valori.colore = 'rgb(0,100,100)'; valori.hidden = false; valori.data = []; garda.storico.forEach(tupla => { valori.data.push( {date: anno + tupla.dataora, value: tupla.massimo} ); }); GardaGraph = AggiungiSerie( GardaGraph, valori); // grafico dello valore attuale valori.colore = 'blue'; valori.label = 'Anno in corso' + ' '.repeat(80); // per andare a capo nella legenda valori.hidden = false; valori.data = []; garda.attuale.forEach(tupla => { // 2025-10-01 // 012345 const pezzo = tupla.dataora.substring(5) valori.data.push( {date: anno + pezzo, value: tupla.valore} ); }); GardaGraph = AggiungiSerie( GardaGraph, valori); // pulsanti per gli anni critici garda.critici.forEach(element => { // valori del grafico valori.label = 'Anno ' + element.anno + '-' + ( Number(element.anno)+1 ); valori.colore = element.colore; valori.hidden = true; valori.data = []; element.giorni.forEach(tupla => { valori.data.push( {date: anno + tupla.dataora, value: tupla.massimo} ); }); GardaGraph = AggiungiSerie( GardaGraph, valori); }); // data di aggiornamento delle informazioni presentate const dAggio = new Date().ConvIstante( garda.aggiornamento ); const dInizioStorico = new Date().ConvIstante( garda.anno_inizio_storici ); const dFineStorico = new Date().ConvIstante( garda.anno_fine_storici ); // informazioni varie document.getElementById('lagogarda-info').innerHTML = 'Elaborazione ' + dAggio.Formato('DD/MM/YYYY') + ' alle ' + dAggio.Formato('HH:mm') + ' solari.' + '
Dati anno in corso da ' + attuali_inizio.Formato('gg g mmm YYYY') + ' a ' + attuali_fine.Formato('gg g mmm YYYY') + '
Periodo storico di riferimento dal ' + dInizioStorico.Formato('gg g mmm YYYY') + ' al ' + dFineStorico.Formato('gg g mmm YYYY') + '.'; // al momento dico cosa ci sarà qui // document.getElementById('lagogarda-tabella').innerHTML = 'Io sono la tabella del grafico'; } /** * Funzione per il frame Falde */ async function fncFalde( idBody ) { const corpoFrame = document.createElement('div'); corpoFrame.setAttribute('id', 'divFalde'); corpoFrame.setAttribute('class', 'col-12'); idBody.append( corpoFrame ); // div della mappa const divMappa = document.createElement('div'); divMappa.setAttribute('id', 'divFaldeMappa'); divMappa.setAttribute('style', 'width: 100%; height: 800px; border: thin solid #A5A5A5;') corpoFrame.append(divMappa); // informazioni sulla mappa visualizzata const divInfoMappa = document.createElement('div'); divInfoMappa.setAttribute('id', 'divFaldeMappaInfo'); divInfoMappa.setAttribute('class', 'col-12'); corpoFrame.append(divInfoMappa); // la mappa contiene i codici stazione che non hanno data di elaborazione divInfoMappa.innerHTML = '
'; // grafici in base alla stazione const divGraficoStaz = document.createElement('div'); divGraficoStaz.setAttribute('id', 'divFaldaStazione'); divGraficoStaz.setAttribute('class', 'col-12'); corpoFrame.append(divGraficoStaz); // aggiungo la mappa OpenLayer var mapFalde = CaricaMappa('divFaldeMappa'); // devo posizionare la mappa in modo diverso ( come nella pagina https://www.arpa.veneto.it/dati-ambientali/dati-storici/meteo-idro-nivo/freatimetri) mapFalde.getView().setCenter( ARPAVAPI.openlayers.proj.transform([11.8, 45.6], 'EPSG:4326', 'EPSG:3857') ) mapFalde.getView().setZoom(9.5) // confini provinciali AggiungiKMl(mapFalde, lnkConfiniProv); // aggiungo le stazioni di portata da visualizzare AggiungiStazioni(mapFalde, lnkStazioniFalde, layerMappaFalde, null, 'codice_stazione'); // spazio dove mettere il testo del popup sulla stazione const divHint = document.createElement('div'); divHint.setAttribute('id', 'hintStazioneFalde'); divHint.setAttribute('class', 'ol-overlay-container ol-selectable'); divHint.style.transform= 'translate(-50%, -105%)'; divHint.style.borderStyle = "solid"; divHint.style.borderWidth = "thin"; divHint.style.borderRadius = "5px"; divHint.style.whiteSpace = 'nowrap'; divHint.style.backgroundColor = "#636363"; divHint.style.borderColor = "#C4C4C4"; divHint.style.padding = "5px"; divHint.style.color = "white"; divHint.style.fontFamily = '"Titillium Web",Geneva,Tahoma,sans-serif'; divHint.style.fontSize = '10px'; divMappa.append(divHint); // popup sulla stazione var popupFalda = new ARPAVAPI.openlayers.Overlay({ element: document.getElementById('hintStazioneFalde'), stopEvent: false, autoPan: { animation: { duration: 250, }, }, }); mapFalde.addOverlay(popupFalda); // evento click mapFalde.on('singleclick', function (evt) { const feature = mapFalde.forEachFeatureAtPixel(evt.pixel, function (feature) { return feature; }); if ( ! feature) { return; } const stz = feature.getProperties().data; if (stz) { // al momento scrivo cosa ha clickato // document.getElementById( 'divFaldaStazione').innerHTML = 'Hai premuto sulla stazione ' + stz.nome_stazione + ' (' + stz.codice_stazione + ')'; // poi sarà da fare il grafico dei dati della stazione fncFaldaImmagineStazione(stz, 'divFaldaStazione'); } }); //evento di spostamento del mouse mapFalde.on('pointermove', function (evt) { if (evt.dragging) { return; } const pixel = mapFalde.getEventPixel(evt.originalEvent); var hit = mapFalde.hasFeatureAtPixel(evt.pixel, { layerFilter: function(layer) { return (layer.get('name') === layerMappaFalde); // se sono sopra al layer stazioni } }); if (hit) { mapFalde.getTargetElement().style.cursor = 'pointer'; const feature = mapFalde.forEachFeatureAtPixel(pixel, function (feature) { return feature; }); if ( feature ) { const stz = feature.getProperties().data; if (stz) { document.getElementById('hintStazioneFalde').innerHTML = stz.nome_stazione; popupFalda.setPosition(evt.coordinate); } } } else { mapFalde.getTargetElement().style.cursor = ''; popupFalda.setPosition(undefined); } }); } /** * visualizza l'immagine della falda per la stazione objStaz nel divImmagine */ function fncFaldaImmagineStazione(objStaz, divImmagine) { // link alle immagini fews di stazioni falde a cui si aggiunge una cosa del tipo 20251006_12_VEFA0000123_livfrass_percentiles.png // const lnkStazionifaldeIMG = 'https://www.arpa.veneto.it/risorse/data-meteo/bollettino_risorsa_idrica/falde/'; const ieri = new Date(); let giorni = 0, presente, lnkStaz, soloNome; do { ieri.setDate(ieri.getDate() - 1); giorni += 1; soloNome = ieri.Formato('YYYYMMDD') + '_12_VEFA' + String(objStaz.codice_stazione).padStart(7, '0') + '_livfrass_percentiles.png'; lnkStaz = lnkFaldeIMG + soloNome; presente = UrlExists(lnkStaz); } while ( ( ! presente ) && (giorni < 5) ) document.getElementById(divImmagine).innerHTML = ''; if ( presente ) { let contenitoreIMG = document.createElement("div"); contenitoreIMG.setAttribute('class', 'text-center'); document.getElementById(divImmagine).append(contenitoreIMG); let oImg = document.createElement("img"); oImg.setAttribute('src', lnkStaz); contenitoreIMG.append(oImg); // informazioni sull'immagine const infoIMG = document.createElement('div'); infoIMG.innerHTML = 'Grafico con dati sino al ' + ieri.Formato('DD/MM/YYYY'); contenitoreIMG.append( infoIMG ); // mi posiziono sul grafico nella pagina oImg.setAttribute('tabindex', '0'); oImg.focus(); } } /** * Funzione per il frame Agro */ async function fncAgro( idBody ) { const corpoFrame = document.createElement('div'); corpoFrame.setAttribute('id', 'divAgro'); corpoFrame.setAttribute('class', 'row'); idBody.append( corpoFrame ); // carico il file lnkLagoGarda const response = await fetch(lnkSPI + '?rnd=' + Math.random() ); var spi = (await response.json()); // colonna dei pulsanti const divPulsanti = document.createElement('div'); corpoFrame.append(divPulsanti); divPulsanti.setAttribute('id', 'divSPIPulsanti'); divPulsanti.setAttribute('class', 'col-2 text-center'); let frase = '

'; let bPrimoPulsante = ''; spi.data.forEach(element => { const idButtonSPI = 'btnSPI_' + element.id; if ( bPrimoPulsante.length == 0) { bPrimoPulsante = idButtonSPI; } frase += ''; }); frase += '

'; divPulsanti.innerHTML = frase; // colonna delle immagini const divColonna = document.createElement('div'); divColonna.setAttribute('id', 'divColonnaSPI'); divColonna.setAttribute('class', 'col-10'); corpoFrame.append(divColonna); const divImg = document.createElement('div'); divImg.setAttribute('id', 'divImmagineSPI'); divColonna.append(divImg); const divAggio = document.createElement('div'); divAggio.setAttribute('id', 'divAggiornamentoSPI'); divColonna.append(divAggio); const divPostilleSPI = document.createElement('div'); divPostilleSPI.setAttribute('id', 'divPostilleSPI'); divColonna.append(divPostilleSPI); const divLegendaSPI = document.createElement('div'); divLegendaSPI.setAttribute('id', 'divLegendaSPI'); divLegendaSPI.setAttribute('class', 'w-50'); divColonna.append(divLegendaSPI); // click pulsanti spi.data.forEach(element => { const idButtonSPI = 'btnSPI_' + element.id; document.getElementById(idButtonSPI).onclick = function() { // document.getElementById(idButtonSPI).classList.toggle("box-shadow"); // tolgo lo sfondo a tutti i pulsanti spi.data.forEach(element2 => { const idButtonSPI2 = 'btnSPI_' + element2.id; document.getElementById(idButtonSPI2).setAttribute('style', 'background: white') // tolgo lo sfondo a tutti i pulsanti }); document.getElementById(idButtonSPI).setAttribute('style', 'background: skyblue') // metto lo sfondo al pulsante premuto const lnkStaz = lnkSPIIMG + element.nomefile; const oImg = document.createElement("img"); oImg.setAttribute('src', lnkStaz); oImg.setAttribute('style', 'width:950px'); document.getElementById('divImmagineSPI').innerHTML = ''; document.getElementById('divImmagineSPI').append(oImg); // aggiungo l'aggiornamento const dAggio = new Date().ConvIstante( element.aggiornamento ); document.getElementById("divAggiornamentoSPI").innerHTML = 'Elaborazione ' + dAggio.Formato('DD/MM/YYYY') + ' alle ' + dAggio.Formato('HH:mm') + ' solari.'; }; }); // testo dello SPI document.getElementById("divPostilleSPI").innerHTML = "SPI (Standardized Precipitation Index (Mc Kee et al. 1993): \ indicatore internazionale che consente di definire lo stato di siccità in una località, \ quantificando il deficit o il surplus di precipitazione cumulata per diverse scale temporali. \ L'indice è calcolato considerando la deviazione della precipitazione rispetto al suo valore medio su una data scala temporale, \ divisa per la sua deviazione standard. La base temporale di ciascuna analisi è il numero di mesi, \ a partire da quello indicato andando a ritroso, di cui viene calcolata la cumulata delle piogge, \ che verrà poi confrontata con le cumulate corrispondenti della stessa estensione temporale nelle annate trascorse.\

\ Le mappe sono relative al calcolo SPI di 1, 2, 3, 6, 12 e 24 mesi precedenti, calcolate al giorno 1 del mese."; // legenda dello SPI const testoLeg = '
Legenda
\ \ \ \ \ \ \ \ \ \ \ \ \

Valori SPI	Classe
SPI ≥ 2.0	umidità estrema
1.5 ≤ SPI < 2.0	umidità severa
1.0 ≤ SPI < 1.5	umidità moderata
-1.0 < SPI < 1.0	nella norma
-1.5 < SPI ≤ -1.0	siccità moderata
-2.0 < SPI ≤ -1.5	siccità severa
SPI ≤ -2.0	siccità estrema

'; document.getElementById("divLegendaSPI").innerHTML = testoLeg; // prima immagine da vedere document.getElementById(bPrimoPulsante).click(); } // ------------------------------------------------------------------------ // grafico lineare con array valori messo nel nomeDiv // ritorna l'oggetto ARPAVAPI.Chart function GraficoLineare(nomeDiv, valori) { // etichette al giorno 1 e 15 di ogni mese const labelAsseX = []; // dal primo ottobre al 31 dicembre let startDate = new Date().ConvIstante( '2000-10-01T00:00:00' ); let endDate = new Date().ConvIstante( '2000-12-31T00:00:00' ); for (let date = startDate; date <= endDate; date.setUTCDate(date.getUTCDate() + 1)) { let s = ''; const day = date.getUTCDate(); if (day === 1 || day === 15) { s = date.Formato('DD-MMM');; } labelAsseX.push( s ); } // dal primo gennaio al 30 settembre startDate = new Date().ConvIstante( '2000-01-01T00:00:00' ); endDate = new Date().ConvIstante( '2000-09-30T00:00:00' ); for (let date = startDate; date <= endDate; date.setUTCDate(date.getUTCDate() + 1)) { let s = ''; const day = date.getUTCDate(); if (day === 1 || day === 15) { s = date.Formato('DD-MMM'); } labelAsseX.push( s ); } const ctx = document.getElementById(nomeDiv); /* https://www.chartjs.org/ */ const myChart = new ARPAVAPI.Chart( ctx, { type: 'line', responsive: true, plugins: [ARPAVAPI.ChartDataLabels, { // questo mi fa la line averticale sul punto selezionato afterDraw: chart => { if (chart.tooltip?._active?.length) { let x = chart.tooltip._active[0].element.x; let yAxis = chart.scales.y; let ctx = chart.ctx; ctx.save(); ctx.beginPath(); ctx.moveTo(x, yAxis.top); ctx.lineTo(x, yAxis.bottom); ctx.lineWidth = 1; ctx.strokeStyle = 'rgba(0, 0, 255, 0.4)'; ctx.stroke(); ctx.restore(); } } } ], data: { // labels: labelAsseX, datasets: [{ label: valori.label, data: valori.data, datalabels: { align: 'end', anchor: 'center', offset : 2, rotation: -90, display: true, formatter: function(point, context) { var xLab = point.value; // label ogni giorno // 2022-09-08T05:00:00 // 0123456789012345678 if ( point.date.substr(11, 2) != '00' ) { xLab = ''; } return xLab; } }, fill: false, borderColor: valori.colore, backgroundColor: valori.colore, tension: 0, spanGaps: false, pointStyle: 'circle', rotation: 0, pointBackgroundColor: valori.colore, pointBorderColor: valori.colore, radius: valori.radius, borderWidth: WidthGrafici(), parsing: { xAxisKey: 'date', yAxisKey: 'value', }, }] }, options: { interaction: { mode: 'index' }, scales: { x: { title: { display: true, text: 'giorno-mese' }, grid: { display: true, color: function(context) { // Mostra linea quando ho l'etichetta let color = 'transparent'; if ( context.tick.label.length > 0 ) { color = 'rgba(0, 0, 0, 0.1)'; } return color; } }, ticks: { autoSkip: false, // Non saltare automaticamente le label minRotation : 90, callback: function (value, index, ticks) { let g = labelAsseX[index]; return g; } } }, y: { title: { display: true, text: valori.labelY + (valori.unitmeas ? ' (' + valori.unitmeas + ')' : '') }, // suggestedMax: maxY, } }, plugins: { legend: { align: 'start' }, datalabels: { display: false }, tooltip: { callbacks: { title: context_list => { // giorno mese const dd = new Date().ConvIstante( context_list[0].label ); return dd.Formato('DD-MMM'); }, label: function(context) { let label = context.dataset.label.trim() + ': ' + context.parsed.y; return label; }, } } } }, }); return myChart; } /** * aggiunge la serie nell'oggetto objGraph * ritorna l'oggetto modificato */ function AggiungiSerie( objGraph, valori) { var serie = { label: valori.label, data: valori.data, hidden: valori.hidden, datalabels: {align: 'start', anchor: 'start'}, fill: false, borderColor: valori.colore, backgroundColor: valori.colore, tension: 0, spanGaps: false, pointStyle: 'circle', rotation: 0, pointBackgroundColor: valori.colore, pointBorderColor: valori.colore, radius: valori.radius, borderWidth: WidthGrafici(), parsing: { xAxisKey: 'date', yAxisKey: 'value', }, }; objGraph.data.datasets.push(serie) // objGraph.update(); return objGraph; } // inizio creazione pagina CreaDivPagina();

Test Bollettino risorsa idrica

Questa pagina ti è stata utile?