${data.testo} `; } return ''; } /** * Generate the HTML for Temp info * * @param {String} tempDataKey * @param {String} zone One of 'MONTAGNA' or 'VALLI' or 'PIANURA'. * @returns {String} HTML content of div. */ const generateHTMLForTemp = (tempDataKey, zone) => { const data = extraData[tempDataKey]?.find(i => (i.zona === `TEMP_${zone}`)); extraData[tempDataKey]?.find(i => { return i.zona === `TEMP_${zone}`; }); zoneName(zone); if (data) { return ` TEMPERATURA
${zona}

${data.testo} `; } return ''; } /** * Get tile layer */ const getTileLayer = () => { return 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}', }) }); }; /** * Get all data of that bollettino */ const getAllData = async (lang) => { translate(lang); const url = `https://api.arpa.veneto.it/REST/v1/bollettini_meteo_simboli${lang}?&bollettino=${bollettino}`; const response = await fetch(url); const jsonResponse = (await response.json()); meteoData = jsonResponse.data; let format = { year: 'numeric', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', }; lastUpdate = new Date(meteoData[0].aggiornamento).toLocaleDateString(langDate, format); meteoData.forEach(x => { //populate dates dates.add(x.scadenza); if (!datesIntervals[x.scadenza]) { datesIntervals[x.scadenza] = new Set(); } datesIntervals[x.scadenza].add(x.intervallo); }) return lang; }; /** * Set active layer * @param {String} date * @param {Number} interval */ let attendibilita = ''; const setActiveLayer = (date, interval) => { const selectedDate = meteoData.find((i) => i.scadenza == date); updateMeteoText(); activateLayer(date, interval); }; /** * add meteo text */ const getTextData = () => { dates.forEach(d => { // stampa data let format = { weekday: `long`, day: '2-digit', }; let a = new Date(d).toLocaleDateString(langDate, format) let printDate = document.createElement('h3'); printDate.setAttribute('class', 'mt-4'); printDate.innerHTML = `${a}`; divTexts.append(printDate); if (datesIntervals[d].size > 1) { // stampa notte/mattino let printMorning = document.createElement('h4'); printMorning.setAttribute('class', 'my-0'); printMorning.innerHTML = ` notte/mattino `; divTexts.append(printMorning); const zones1 = dammiLeZonePerQestaData(d, "notte/mattina"); stampaLeZone(zones1); // stampa pome/sera let printAfternoon = document.createElement('h4'); printAfternoon.setAttribute('class', 'mt-2'); printAfternoon.innerHTML = ` pomeriggio/sera `; divTexts.append(printAfternoon); const zones2 = dammiLeZonePerQestaData(d, "pom/sera"); stampaLeZone(zones2); } else { const zones = dammiLeZonePerQestaData(d); stampaLeZone(zones); } }) } /** * get array sort by scadenza & interval & zona * @param {String} data * @param {Number} interval * @return {Array} */ const dammiLeZonePerQestaData = (data, interval) => { let zone = []; meteoData.forEach(m => { if (m.zona == "Prealpi occidentali" || m.zona == "Area del Garda") { if (m.scadenza == data && (!interval || m.intervallo == interval)) { zone.push(m); } } }) return zone.reverse(); } /** * Update meteo text section */ let btnIT; let btnEN; let btnFR; let btnDE; const updateMeteoText = () => { update.innerHTML = `

${langBollettino} ${lastUpdate}

`, divUpdate.append(update); btnIT = document.getElementById('btnIT'); btnEN = document.getElementById('btnEN'); btnFR = document.getElementById('btnFR'); btnDE = document.getElementById('btnDE'); btnIT.addEventListener("click", () => { lang = ''; langDate = 'it-IT'; langBollettino ='Bollettino aggiornato al'; translate(lang); getControlButtons(meteoData); allLayers.forEach(i => { i.setVisible(false); }); setActiveLayer(today, 1); }); btnEN.addEventListener("click", () => { lang = '_en'; langDate = 'en-GB'; langBollettino ='Bulletin updated to'; translate(lang); getControlButtons(meteoData); allLayers.forEach(i => { i.setVisible(false); }); setActiveLayer(today, 1); }); btnFR.addEventListener("click", () => { lang = '_fr'; langDate = 'fr-FR'; langBollettino ='Bulletin mis à jour pour'; translate(lang); getControlButtons(meteoData); allLayers.forEach(i => { i.setVisible(false); }); setActiveLayer(today, 1); }); btnDE.addEventListener("click", () => { lang = '_de'; langDate = 'de-DE'; langBollettino ='Bulletin aktualisiert auf'; translate(lang); getControlButtons(meteoData); allLayers.forEach(i => { i.setVisible(false); }); setActiveLayer(today, 1); }); }; /** * Print zona * @param {Array} zona */ const stampaLeZone = (zona) => { zona.forEach(z => { let printInterval = document.createElement('div'); printInterval.setAttribute('class', 'mb-0'); printInterval.innerHTML = `

${z?.zona}. ${z?.testo} - Precipitazioni: ${z?.precipitazioni} - Probabilità: ${z?.['prob precipitazioni']} ${z.attendibilita ? `- Attendibilità: ${z?.attendibilita}` : ``}

`; divTexts.append(printInterval); }) } /** * Activate layer * */ const activateLayer = (date, interval) => { let found = false; allLayers.forEach(l => { l.setVisible(false); if (l.getProperties().date == date && ( datesIntervals[date].size === 0 || datesIntervals[date].size === 1 || l.getProperties().interval == interval )) { l.setVisible(true); populateExtra(date, interval); populateTemp(date, interval); found = true; } }); if (!found) { loadLayerData(lang, date, interval); }; if ( lang == '') { divTexts.classList.remove('d-none'); } else { divTexts.classList.add('d-none') ; }; }; let activeInterval = 1; /** * load Data fro the layer * @param {String} date * @param {Number} interval */ const loadLayerData = (lang, date, interval) => { allLayers.forEach(i => { i.setVisible(false); }); translate(lang); //data for loadLayerData layerData = new Set(); const multiInterval = datesIntervals[date].size > 1; meteoData.forEach(l => { if (l.scadenza == date && (!multiInterval || (l.intervallo == 'pom/sera' && interval > 1) || (l.intervallo == 'notte/mattina' && interval == 1))) { layerData.add(l); } }) const geojsonObject = { type: 'FeatureCollection', crs: { type: 'name', properties: { name: 'EPSG:3857', }, }, features: [], }; const layerStyles = {}; const extraDataKey = getExtraDateKey(date, interval); extraData[extraDataKey] = []; layerData?.forEach(i => { if (i.simbolo) { if (i.zona.startsWith('EXTRA_') || i.zona.startsWith('TEMP_')) { extraData[extraDataKey].push(i); } else { geojsonObject.features.push({ type: 'Feature', geometry: JSON.parse(i.geometry), properties: { id: i.zonaid, data: { ...i }, }, }); layerStyles[i.zonaid] = createIconStyle(i); } } }); // create layer const layer = new ARPAVAPI.openlayers.layer.Vector({ source: new ARPAVAPI.openlayers.source.Vector({ projection: 'EPSG:27700', format: new ARPAVAPI.openlayers.format.GeoJSON(), features: new ARPAVAPI.openlayers.format.GeoJSON({ featureProjection: 'EPSG:3857', }).readFeatures(geojsonObject) }), style: (feature, resolution) => { const style = layerStyles[feature.values_.id]; const scale = feature.values_.data.zona.startsWith('TEMP_') ? 4 : 6; style.getImage().setScale(1 / Math.pow(resolution, 1 / scale)); return style; }, properties: { date: date, interval: interval }, visible: true }) map.addLayer(layer); allLayers.push(layer); populateExtra(date, interval); populateTemp(date, interval); return lang; }; /** * Create icon style * @param {Object} data */ const createIconStyle = (data) => { const iconStyle = new ARPAVAPI.openlayers.style.Style({ image: new ARPAVAPI.openlayers.style.Icon({ anchor: [0.5, 1], scale: 0.2, anchorXUnits: 'fraction', anchorYUnits: 'fraction', src: `${imagesBaseUrl}${data.simbolo}`, }), }); return iconStyle; }; /** * Utility to format date. * Date can be formatted in numeric or extended way. * * @param {String} sDate * @param {Boolean} extended * @returns {String} */ const formatDate = (sDate, extended) => { const date = new Date(sDate); let format; if (extended) { format = { weekday: 'long', month: 'long', day: 'numeric' }; } else { format = { weekday: 'short', day: '2-digit', }; } return date.toLocaleDateString(langDate, format); }; /** * @param {Object[]} items * @returns {HTMLElement} */ const divBtns = document.createElement('div'); divBtns.setAttribute('id', 'buttonsIn'); divBtns.className = 'layer-button-control bg-transparent text-center'; divBtns.style = 'top: 0.5rem; left: 0; right: 0; '; let nintervalli = ''; const getControlButtons = (items) => { divBtns.innerHTML = ''; if (screen.width <= 500) { // div style divBtns.setAttribute('style', 'z-index: 1001; position: absolute; display: flex; flex-direction: column; width: 100%; margin-top: -45px; overflow: scroll; pointer-events: auto;'); } else { // div style divBtns.setAttribute('style', 'position: absolute; top: 0.5rem; left: 0; right: 0; display: flex; z-index: 1001; flex-direction: column; align-items: center; width: 100%; pointer-events: auto;'); } const datesBtns = document.createElement('div'); // datesBtns.setAttribute('style', 'display: flex; flex-flow: row nowrap;') const periodsBtns = document.createElement('div'); divBtns.append(datesBtns); divBtns.append(periodsBtns); dates.forEach((d) => { // crea il ogni date btn const btn = document.createElement('button'); btn.className = 'chip chip-simple chip-lg mr-2 mb-2' + (d == today ? ' selected' : ''); btn.setAttribute('type', 'button'); btn.setAttribute('data-scadenza', d); btn.setAttribute('data-intervalli', nintervalli); btn.setAttribute('id', `btncontrol-${d}`) btn.innerHTML = `${formatDate(d)}`; btn.onclick = () => { // toggle selected class datesBtns.querySelector('.selected')?.classList.remove('selected'); btn.classList.add('selected'); // select interval periodsBtns.childNodes.forEach(c => { c.classList.add('d-none'); c.classList.remove('selected'); }); if (datesIntervals[d].size > 1) { const btn1 = document.getElementById(`btncontrol-${d}-1`); const btn2 = document.getElementById(`btncontrol-${d}-2`); btn1?.classList.remove('d-none'); btn1?.classList.add('selected') btn2?.classList.remove('d-none'); nintervalli = 2; } else { if (datesIntervals[d].size == 1) { nintervalli = 1; } else { nintervalli = null; } } setActiveLayer(d, nintervalli > 1 ? 1 : null); } datesBtns.append(btn); if (datesIntervals[d].size >1) { const int1Btn = document.createElement('button'); int1Btn.className = 'chip chip-simple chip-lg mr-2 mb-2 selected' + (d != today ? ' d-none' : ''); int1Btn.setAttribute('type', 'button'); int1Btn.setAttribute('data-scadenza', d); int1Btn.setAttribute('data-intervallo', 1); int1Btn.setAttribute('id', `btncontrol-${d}-1`) int1Btn.innerHTML = `${morning}`; periodsBtns.append(int1Btn); int1Btn.onclick = () => { // toggle selected class periodsBtns.querySelector('.selected')?.classList.remove('selected'); int1Btn.classList.add('selected'); setActiveLayer(d, 1); } // add interval dates const int2Btn = document.createElement('button'); int2Btn.className = 'chip chip-simple chip-lg mr-2 mb-2' + (d != today ? ' d-none' : ''); int2Btn.setAttribute('type', 'button'); int2Btn.setAttribute('data-scadenza', d); int2Btn.setAttribute('data-intervallo', 1); int2Btn.setAttribute('id', `btncontrol-${d}-2`) int2Btn.innerHTML = `${afternoon}`; periodsBtns.append(int2Btn); int2Btn.onclick = () => { // toggle selected class periodsBtns.querySelector('.selected')?.classList.remove('selected'); int2Btn.classList.add('selected'); setActiveLayer(d, 2); } } }); return divBtns; }; /** * Populate popup with zone content loaded from api. * * @param {Number} zoneid */ const populatePopup = async (zoneid) => { modalTimeline.innerHTML = ''; populateData = new Set(); meteoData.forEach(m => { if (m.zonaid == zoneid) { populateData.add(m) } }) // get dates info const days = new Set(); const days_meteo = {}; populateData.forEach(item => { days.add(item.scadenza); if (!days_meteo[item.scadenza]) { days_meteo[item.scadenza] = []; } days_meteo[item.scadenza].push(item) }); // create HTML for day Array.from(days).sort().forEach(day => { modalTimeline.append(generateHTMLForDay(day, days_meteo[day])); }); }; /** * Generate the HTML for day in popup * * @param {String} day * @param {Object[]} info * @returns {HTMLElement} */ const generateHTMLForDay = (day, info) => { const tlitem = document.createElement('div'); tlitem.classList.add('col-12'); const date = formatDate(info[0].scadenza, true); tlitem.innerHTML = `

${date}

${generateDayTable(info)}

` return tlitem; }; /** * Get timeline item class: * - past: "it-past" * - now: "it-now" * - future: "it-future" * * @param {String} date * @returns {String} */ const getTimelineItemClass = (date) => { return 'it-evidence'; const today = (new Date()).setHours(0, 0, 0, 0); const day = (new Date(date)).setHours(0, 0, 0, 0); if (day === today) { return 'it-now'; } else if (day < today) { return 'it-past'; } return 'it-future'; }; /** * Genereate table for day info. * * @param {Object[]} info * @returns {String} */ const generateDayTable = (info = []) => { const fullday = info.length === 1; let table = ''; if (!fullday) { table += ` `; } table += ''; // stato del cielo if (info[0]?.simbolo || info[1]?.simbolo) { table += ` ` if (!fullday) { table += ` `; } table += ''; } // temperatura if (info[0]?.temperatura || info[1]?.temperatura) { table += ` ` } // temperatura 1500 if (info[0]?.['temperatura 1500m'] || info[1]?.['temperatura 1500m']) { table += ` ` } // temperatura 2000 if (info[0]?.['temperatura 2000m'] || info[1]?.['temperatura 2000m']) { table += ` ` } // temperatura 3000 if (info[0]?.['temperatura 3000m'] || info[1]?.['temperatura 3000m']) { table += ` ` } // rainfalls if (info[0]?.precipitazioni || info[0]?.['prob precipitazioni'] || info[1].precipitazioni || info[1]?.['prob precipitazioni']) { table += ` ` if (!fullday) { table += ` `; } table += ''; } // snow quote if (info[0]?.['quota neve'] || info[1]?.['quota neve']) { table += ` ` if (!fullday) { table += ` `; } table += ''; } // show wind if (info[0]?.vento || info[1]?.vento) { table += ` ` if (!fullday) { table += ` `; } table += ''; } // reliability if (info[0]?.attendibilita || info[1]?.attendibilita) { table += ` ` if (!fullday) { table += ` `; } table += ''; } table += '

	${morning}	${afternoon}
${statesky}
${temperature}	${getTempCell(info[0]?.temperatura, info[1]?.temperatura)}
${temperature1500}	${getTempCell(info[0]?.['temperatura 1500m'], info[1]?.['temperatura 1500m'])}
${temperature2000}	${getTempCell(info[0]?.['temperatura 2000m'], info[1]?.['temperatura 2000m'])}
${temperature3000}	${getTempCell(info[0]?.['temperatura 3000m'], info[1]?.['temperatura 3000m'])}
${rainfall}	${getRainfallsCell(info[0]?.precipitazioni, info[0]?.['prob precipitazioni'])}	${getRainfallsCell(info[1]?.precipitazioni, info[1]?.['prob precipitazioni'])}
${snow}	${info[0]?.['quota neve']}	${info[1]?.['quota neve']}
${wind}	${info[0]?.vento}	${info[1]?.vento}
${reliability}	${info[0]?.attendibilita}	${info[1]?.attendibilita}

'; return table; }; /** * Format temperatures cells text * * @param {Numeric} temp1 * @param {Numeric} temp2 * @returns {String} */ const getTempCell = (temp1, temp2) => { if (temp2 === undefined) { return `max ${temp1}° C`; } else { const s_temp1 = temp1.split('/'); const s_temp2 = temp2.split('/'); let temps = [] if (parseInt(s_temp1[0]) < parseInt(s_temp2[0])) { temps = [temp1, temp2]; } else { temps = [temp2, temp1]; } return `min ${temps[0]}° C – max ${temps[1]}°`; } }; /** * Format rainfalls cell text * * @param {String} text * @param {String} prob * @returns {String} */ const getRainfallsCell = (text, prob) => { let output = text || ''; if (prob) { output += output ? '
' : ''; output += `${rainfallProb} ${prob}`; } return output; }; /** * Generates HTML */ const generateHTML = async () => { translate(lang); // load data await getAllData(lang); // add tile map.addLayer(getTileLayer()); // add meteo text updateMeteoText(); getTextData(); // add date controls map.addControl( new ARPAVAPI.openlayers.control.Control({ element: getControlButtons(meteoData), }) ); map.addControl( new ARPAVAPI.openlayers.control.Control({ element: layerTemp }) ); map.addControl( new ARPAVAPI.openlayers.control.Control({ element: layerExtra }) ); // add click event map.on('click', function (event) { map.forEachFeatureAtPixel( event.pixel, feature => { const props = feature.getProperties(); const data = props.data; if (data?.zonaid < 100) { modalLabel.innerText = data.zona; modal.show(); populatePopup(data.zonaid); } }) }); setActiveLayer(today, 1); }; /** * change controlBottons position on screen width change */ window.addEventListener("resize", function (event) { const div = document.getElementById('buttonsIn'); if (screen.width <= 500) { // div style div.setAttribute('style', 'z-index: 1001; position: absolute; display: flex; flex-direction: column; width: 100%; margin-top: -45px; overflow: scroll; pointer-events: auto;'); } else { // div style div.setAttribute('style', ' top: 0.5rem; left: 0; top: 0.5rem; right: 0; display: flex; z-index: 1001; display: flex; flex-direction: column; align-items: center; pointer-events: auto;'); } }) generateHTML();

Meteo Garda

Questa pagina ti è stata utile?