<!DOCTYPE html> <html lang='en'> <head> <title>Aurora</title> <META HTTP-EQUIV="Refresh" CONTENT="60"> <meta charset="UTF-8"> <meta name="author" content="Arnau Busom i Vidal"> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/> <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script> </head> <body> <div style="text-align: center;"> <h1><span style='color: purple;'>D</span><span style='color: #FF47EB;'>a</span><span style='color: red;'>t</span><span style='color: #FF6600;'>a</span> <span style='color: orange;'>f</span><span style='color: #FFE200;'>r</span><span style='color: lightgreen;'>o</span><span style='color: darkgreen;'>m</span> <span style='color: turquoise;'>I</span><span style='color: #1ac6ff;'>R</span><span style='color: blue;'>F</span> <span style='color: grey;'>K</span><span style='color: #914724;'>i</span>r<span style='color: #9933ff;'>u</span><span style='color: #ff99cc;'>n</span><span style='color: #811a36;'>a</span></h1> <div style="display: inline-block; padding: 10px;"> <h3>Latest image from the All Sky camera</h3> <img style='width: 90%;' src='https://www.irf.se/alis/allsky/krn/latest_small.jpeg'> </div> <div style="display: inline-block; padding: 10px;"> <h3>Latest movie from the All Sky camera</h3> <video style='width: 90%;' autoplay loop src='https://www.irf.se/alis/allsky/krn/latest_movie.mp4'></video> </div> </div> <div style="text-align: center;"> <h1 id='clouds'>Cloud Coverage Forcast for the next hour</h1> <div id="mapid", style="height: 400px; width: 70%; margin: auto;"></div> </div> <div style="text-align: center;"> <h1>Aurora Forecast</h1> <div style="display: inline-block; padding: 10px;"> <h3>Kp index now</h3> <span id="kp_now"></span> </div> <div style="display: inline-block; padding: 10px;"> <h3>Kp index in 3 hours</h3> <span id="kp_3"></span> </div> <h2>Advanced data</h2> <img style='width: 70%;' src='https://www.spaceweather.se/content/irf-kp.png'> </div> <footer style="text-align: center;"> All data has been obtained from <a href="https://www.irf.se/">IRF</a>, any use or distribution of the data has to comply with <a href="https://www.irf.se/wp-content/uploads/2020/02/License-agreement.pdf">this</a> license. <br> This site has been created by Arnau Busom Vidal. The source code and the license for the site can be found <a href="https://git.xaloc.space/xaloc/aurora">here</a>. </footer> </body> <script> async function api(){ const res = await fetch('https://www.spaceweather.se/forecast/kp/latest.json'); const data = await res.json(); var kp_now = data.kp[6]; var kp_3 = data.kp[7]; document.getElementById('kp_now').textContent = Number(kp_now.toFixed(2)); document.getElementById('kp_3').textContent = Number(kp_3.toFixed(2)); } window.onload = api; var mymap = L.map('mapid').setView([67.8488, 20.3027], 6); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 19, attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' }).addTo(mymap); var kiruna = L.marker([67.8488, 20.3027]).addTo(mymap); kiruna.bindPopup("Kiruna"); var abisko = L.marker([68.35, 18.8166]).addTo(mymap); abisko.bindPopup("Abisko"); async function clouds(){ const valTime = await fetch('https://opendata-download-metfcst.smhi.se/api/category/pmp3g/version/2/validtime.json'); const times = await valTime.json(); var time = times.validTime[1].replace(/-/g, "").replace(/:/g, ""); document.getElementById('clouds').textContent = "Cloud Coverage Forcast for " + times.validTime[1].replace(/T/g, " ").replace(/Z/g, " UTC"); const res = await fetch(`https://opendata-download-metfcst.smhi.se/api/category/pmp3g/version/2/geotype/multipoint/validtime/${time}/parameter/tcc_mean/leveltype/hl/level/0/data.json`); const data = await res.json(); for(i=0; i<data.timeSeries[0].parameters[0].values.length; i+=10){ addClouds(data.geometry.coordinates[i][1],data.geometry.coordinates[i][0],data.timeSeries[0].parameters[0].values[i]) } } window.onload = clouds; function addClouds(lat,lon,opa){ var circle = L.circle([lat, lon], { stroke: false, color: 'grey', opacity: 0.05*opa, fillOpacity: 0.1*opa, radius: 4300 }).addTo(mymap); } </script> </html>