<!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>
<style>
.dark {
background-color: black;
color: white;
}
.button-dark {
position: absolute;
top: 3px;
right: 3px;
}
</style>
</head>
<body class="dark">
<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;">
<button id="modeBtn" onclick="darkMode()" class="button-dark">Dark Mode: On</button>
<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>
function darkMode() {
var ele = document.body;
ele.classList.toggle("dark");
var x = document.getElementById("modeBtn");
if (x.innerHTML === "Dark Mode: Off") {
x.innerHTML = "Dark Mode: On";
} else {
x.innerHTML = "Dark Mode: Off";
}
}
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, "");
var textTime = new Date(times.validTime[1]).toLocaleString("en-GB", {dateStyle: "short", timeStyle: "short"});
var textTimeUTC = new Date(times.validTime[1]).toLocaleTimeString("en-GB", {timeZone: "UTC", timeStyle: "short"});
document.getElementById('clouds').textContent = "Cloud Coverage Forcast for " + textTime + " (" + textTimeUTC+" 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>