2020-09-17 21:02:49 +01:00
<!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" / >
2021-04-05 21:02:14 +01:00
< 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 >
2021-08-26 22:21:00 +01:00
< style >
.dark {
background-color: black;
color: white;
}
.button-dark {
position: absolute;
top: 3px;
right: 3px;
}
< / style >
2020-09-17 21:02:49 +01:00
< / head >
2021-08-26 22:26:43 +01:00
< body class = "dark" >
2020-09-17 21:02:49 +01:00
< div style = "text-align: center;" >
2020-09-23 19:58:21 +01:00
< 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 >
2020-09-17 21:02:49 +01:00
< div style = "display: inline-block; padding: 10px;" >
2021-08-26 23:34:28 +01:00
< button id = "modeBtn" onclick = "darkMode()" class = "button-dark" > Dark Mode: On< / button >
2020-09-17 21:02:49 +01:00
< h3 > Latest image from the All Sky camera< / h3 >
2020-09-23 19:58:21 +01:00
< img style = 'width: 90%;' src = 'https://www.irf.se/alis/allsky/krn/latest_small.jpeg' >
2020-09-17 21:02:49 +01:00
< / div >
< div style = "display: inline-block; padding: 10px;" >
< h3 > Latest movie from the All Sky camera< / h3 >
2020-09-23 19:58:21 +01:00
< video style = 'width: 90%;' autoplay loop src = 'https://www.irf.se/alis/allsky/krn/latest_movie.mp4' > < / video >
2020-09-17 21:02:49 +01:00
< / div >
< / div >
2021-04-05 21:02:14 +01:00
< 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 >
2020-09-17 21:02:49 +01:00
< 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 >
2020-09-23 19:58:21 +01:00
< img style = 'width: 70%;' src = 'https://www.spaceweather.se/content/irf-kp.png' >
2020-09-17 21:02:49 +01:00
< / 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 >
2020-09-17 21:25:35 +01:00
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 > .
2020-09-17 21:02:49 +01:00
< / footer >
< / body >
< script >
2021-08-26 22:21:00 +01:00
function darkMode() {
var ele = document.body;
ele.classList.toggle("dark");
2021-08-26 23:34:28 +01:00
var x = document.getElementById("modeBtn");
if (x.innerHTML === "Dark Mode: Off") {
x.innerHTML = "Dark Mode: On";
} else {
x.innerHTML = "Dark Mode: Off";
}
2021-08-26 22:21:00 +01:00
}
2021-08-26 23:34:28 +01:00
2020-09-17 21:02:49 +01:00
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;
2021-04-05 21:02:14 +01:00
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, "");
2022-08-23 10:25:46 +01:00
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"});
2022-08-23 10:26:09 +01:00
document.getElementById('clouds').textContent = "Cloud Coverage Forecast for " + textTime + " (" + textTimeUTC+" UTC)";
2021-04-05 21:02:14 +01:00
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);
}
2020-09-17 21:02:49 +01:00
< / script >
2020-09-23 19:58:21 +01:00
< / html >
