${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 ` ${temperature}
${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 dates from api. * * @returns {Object[]} */ let lastUpdate = ''; const getMeteoDates = async () => { meteoData = ''; const response = await fetch(`https://api.arpa.veneto.it/REST/v1/bollettini_meteo_testi?bollettino=${bollettino}`); 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); }; /** * Set active layer * @param {String} date * @param {Number} interval */ const setActiveLayer = (date, interval) => { const selectedDate = meteoData.find((i) => i.scadenza == date); // {selectedDate.nintervalli === 1 ? interval = null : interval = interval}; if(selectedDate.nintervalli === 1){ interval = null; } updateMeteoText(date, interval, selectedDate); activateLayer(date, interval); }; /** * Update meteo text section * @param {Object} bulletin */ let btnIT; let btnEN; let btnFR; let btnDE; const updateMeteoText = (date, interval, bulletin) => { divUpdate.innerHTML = `

${langBollettino} ${lastUpdate}

`; divTexts.innerHTML = bulletin ? `

Evoluzione

${bulletin.evoluzionegenerale}

${meteoData[0]?.avviso ? `

Avviso

${meteoData[0].avviso}

` : ''} ${meteoData[0]?.fenomeniparticolari ? `

Fenomeni particolari

${meteoData[0].fenomeniparticolari}

` : ''}

Previsione

${bulletin.previsione}

${bulletin?.attendibilita ? `

Attendibilità: ${bulletin.attendibilita}

` : ``} ` : ''; 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); // loadLayerData( '', today, interval); 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); // loadLayerData( '_en', today, interval); 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); // loadLayerData( '_fr', today, interval); 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); // loadLayerData( '_de', today, interval); getControlButtons(meteoData); allLayers.forEach(i => { i.setVisible(false); }); setActiveLayer(today, 1); }); }; /** * Activate layer * */ const activateLayer = (date, interval) => { let found = false; allLayers.forEach(l => { l.setVisible(false); if (l.getProperties().date == date && l.getProperties().interval == interval) { l.setVisible(true); populateExtra(date, interval); populateTemp(date, interval); found = true; } }); if (!found) { loadLayerData(lang, date, interval); } }; const loadLayerData = (lang, date, interval) => { allLayers.forEach(i => { i.setVisible(false); }); let url = `https://api.arpa.veneto.it/REST/v1/bollettini_meteo_simboli${lang}?data=${date}&bollettino=${bollettino}`; lang == '' ? divTexts.classList.remove('d-none') : divTexts.classList.add('d-none') ; translate(lang); if (interval) { url += `&intervallo=${interval}`; } const geojsonObject = { type: 'FeatureCollection', crs: { type: 'name', properties: { name: 'EPSG:3857', }, }, features: [], }; fetch(url) .then(res => res.json()) .then(result => { // get features const layerStyles = {}; const extraDataKey = getExtraDateKey(date, interval); extraData[extraDataKey] = []; result.data?.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.className = 'layer-button-control bg-transparent text-center'; divBtns.style = 'top: 0.5rem; left: 0; right: 0; '; const getControlButtons = (items) => { divBtns.innerHTML = ''; const datesBtns = document.createElement('div'); const periodsBtns = document.createElement('div'); divBtns.append(datesBtns); divBtns.append(periodsBtns); // create buttons items.forEach((item, index) => { // add dates buttons const btn = document.createElement('button'); btn.className = 'chip chip-simple chip-lg mr-2 mb-2' + (item.scadenza == today ? ' selected' : ''); btn.setAttribute('type', 'button'); btn.setAttribute('data-scadenza', item.scadenza); btn.setAttribute('data-intervalli',item.nintervalli); btn.setAttribute('id', `btncontrol-${item.scadenza}`); btn.innerHTML = `${formatDate(item.scadenza)}`; btn.onclick = () => { allLayers.forEach(i => { i.setVisible(false); }); // 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 (item.nintervalli == 2) { const btn1 = document.getElementById(`btncontrol-${item.scadenza}-1`); const btn2 = document.getElementById(`btncontrol-${item.scadenza}-2`); btn1?.classList.remove('d-none'); btn1?.classList.add('selected'); btn2?.classList.remove('d-none'); } setActiveLayer(item.scadenza, item.nintervalli == 2 ? 1 : null); } datesBtns.append(btn); if (item.nintervalli === 2) { // add interval dates const int1Btn = document.createElement('button'); int1Btn.className = 'chip chip-simple chip-lg mr-2 mb-2 selected' + (item.scadenza != today ? ' d-none' : ''); int1Btn.setAttribute('type', 'button'); int1Btn.setAttribute('data-scadenza', item.scadenza); int1Btn.setAttribute('data-intervallo', 1); int1Btn.setAttribute('id', `btncontrol-${item.scadenza}-1`); int1Btn.innerHTML = `${morning}`; periodsBtns.append(int1Btn); int1Btn.onclick = () => { // toggle selected class periodsBtns.querySelector('.selected')?.classList.remove('selected'); int1Btn.classList.add('selected'); allLayers.forEach(i => { i.setVisible(false); }); setActiveLayer(item.scadenza, 1); } // add interval dates const int2Btn = document.createElement('button'); int2Btn.className = 'chip chip-simple chip-lg mr-2 mb-2' + (item.scadenza != today ? ' d-none' : ''); int2Btn.setAttribute('type', 'button'); int2Btn.setAttribute('data-scadenza', item.scadenza); int2Btn.setAttribute('data-intervallo', 1); int2Btn.setAttribute('id', `btncontrol-${item.scadenza}-2`); int2Btn.innerHTML = `${afternoon}`; periodsBtns.append(int2Btn); int2Btn.onclick = () => { translate(lang); // toggle selected class periodsBtns.querySelector('.selected')?.classList.remove('selected'); int2Btn.classList.add('selected'); allLayers.forEach(i => { i.setVisible(false); }); setActiveLayer(item.scadenza, 2); } } }); return divBtns; }; /** * Populate popup with zone content loaded from api. * * @param {Number} zoneid */ const populatePopup = async (zoneid) => { modalTimeline.innerHTML = ''; const response = await fetch(`https://api.arpa.veneto.it/REST/v1/bollettini_meteo_simboli${lang}?zona=${zoneid}`); const jsonResponse = (await response.json()); // get dates info const days = new Set(); const days_meteo = {}; jsonResponse.data.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); // add tile map.addLayer(getTileLayer()); // load data await getMeteoDates(); // 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); }; generateHTML();

Meteo Veneto

Questa pagina ti è stata utile?