130 lines
6.0 KiB
HTML
130 lines
6.0 KiB
HTML
<!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 Forecast for the next hour</h1>
|
|
<div id="mapid", style="height: 400px; width: 70%; margin: auto;"></div>
|
|
</div>
|
|
<div style="text-align: center;">
|
|
<h1 id='temp'>Current temperature map (in °C)</h1>
|
|
<embed src="https://www.temperatur.nu/karta2.php#67.86313,20.20935,8z", id="tempmapid", style="height: 400px; width: 70%; margin: auto;">
|
|
</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;
|
|
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 Forecast 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;
|
|
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>
|