xaloc/aurora
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add map cloud coverage

Browse Source
This commit is contained in:
Xaloc 2021-04-05 22:02:14 +02:00
parent 00c2f86d7e
commit 9a9a779e4a
1 changed files with 44 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
index.html
View File

@ -6,6 +6,12 @@
<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;">
@ -19,6 +25,10 @@
<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;">
@ -50,5 +60,39 @@
}
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: '&copy; <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>