Skip to content

Instantly share code, notes, and snippets.

@mario-fliegner

mario-fliegner/ffw_corona-ampel_landkreis_7-tage-inzidenz.html

Last active November 23, 2022 20:04
Show Gist options
  • Save mario-fliegner/1c4afc59b6dfa0c948bea49d76809ae9 to your computer and use it in GitHub Desktop.
Save mario-fliegner/1c4afc59b6dfa0c948bea49d76809ae9 to your computer and use it in GitHub Desktop.
Download ZIP
"Corona Ampel" HTML5-Template für die Anzeige des 7-Tage-Inzidenzwertes eines beliebigen Landkreises. Daten via Rest-API vom RKI.
Raw
ffw_corona-ampel_landkreis_7-tage-inzidenz.html
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width = device-width, initial-scale = 1.0" />
<meta name="description" content="Inzidenzwert Testseite">
<title>Corona-Ampel</title>
<style>
.fett{
font-weight: 600;
}
.kursiv {
font-style: italic;
}
.block {
display: block;
text-align:center;
}
.kleiner {
font-size:smaller;
}
.rand {
padding: 0px;
margin-left: 0px;
margin-top: 20px;
padding-top: 20px;
margin-bottom: 20px;
border: 8px solid #c90024;
}
.gruen {
padding-left: 5px;
padding-right: 5px;
color: white;
background-color: green;
}
.gelb {
padding-left: 5px;
padding-right: 5px;
color: black;
background-color: yellow;
}
.rot {
padding-left: 5px;
padding-right: 5px;
color: white;
background-color: red;
}
/* Farbverlauf fuer Inzidenzzahl <=100 (normal) */
.farbverlauf {
background-image: linear-gradient(90deg, green 20%, yellow 33%, yellow 33%, yellow 48%, red 75%);
width:70%;
height:50px;
margin: 0 auto;
position: relative;
}
/* Farbverlauf fuer Inzidenzzahl >100 (mit 3 weissen Auslassungsstreifen*/
.farbverlauf_ext {
background-image: linear-gradient(90deg, green 20%, yellow 33%, yellow 33%, yellow 48%, red 75%, red 80.9%, white 81%, white 82%, red 82.1%, red 83%, white 83.1%, white 84%, red 84.1%, red 85%, white 85.1%, white 86%, red 86.1%, rgb(150, 0, 0) 95%);
width:70%;
height:50px;
margin: 0 auto;
position: relative;
}
.divGrenzwert {
display: flex;
justify-content:
flex-end;align-items:
flex-end; height:100%;
color:grey;
font-size:smaller;
}
.divAktuellerWert {
border: 1px solid;
padding:5px;
background:#fff;
margin-bottom: 5px;
margin-right: -40px;
margin-top:70px;
font-weight:700;
display: inline-block;
text-align:center;
}
#container_farbverlauf {
display:inline-block;
width:100%;
text-align:center;
height:110px;
margin-top:10px;
}
#untererGrenzwert {
width:33%;
border-right: 2px solid;
border-right-color: grey;
height:70px;
float:left;
}
#obererGrenzwert {
width:33%;
border-right: 2px solid;
border-right-color: grey;
height:70px;
text-align:right;
float: left;
}
#aktuellerWert {
border-right: 5px solid;
height:80px;
text-align:right;
z-index: 1;
position: absolute;
float: left;
}
</style>
<script>
//Hier ergolgt die Angabe der Landkreis OBJECTID! Bspw. 239 = Landkreis München
//OBJECTID hier ermitteln: https://npgeo-corona-npgeo-de.hub.arcgis.com/datasets/917fc37a709542548cc3be077a786c17_0
var landkreisObjectId = '239';
// Ab hier keine Aenderung erforderlich
var HttpClient = function() {
this.get = function(request, callback) {
var httpRequest = new XMLHttpRequest();
httpRequest.onreadystatechange = function() {
if (httpRequest.readyState == 4 && httpRequest.status == 200)
callback(httpRequest.responseText);
}
httpRequest.open("GET", request, true);
httpRequest.send(null);
}
}
var client = new HttpClient();
var restServiceUrl = 'https://services7.arcgis.com/mOBPykOjAyBO2ZKk/arcgis/rest/services/RKI_Landkreisdaten/FeatureServer/0/query?where=OBJECTID%20%3E%3D%20'+landkreisObjectId+'%20AND%20OBJECTID%20%3C%3D%20'+landkreisObjectId+'&outFields=OBJECTID,death_rate,cases,deaths,cases_per_100k,cases_per_population,BL,BL_ID,county,last_update,cases7_per_100k,recovered,cases7_bl_per_100k&outSR=4326&f=json';
client.get(restServiceUrl, function(response) {
var jsonLandkreis = JSON.parse(response);
jsonLandkreis = jsonLandkreis['features'][0]['attributes'];
// Name des Landkreises
var lk = document.querySelectorAll('[id="anzeigeLandkreisname"]');
for(var i = 0; i < lk.length; i++) {
lk[i].innerHTML = jsonLandkreis['county'].replace('LK', 'Landkreis');
}
// Name des Bundeslandes
var bl = document.querySelectorAll('[id="anzeigeBundeslandname"]');
for(var i = 0; i < bl.length; i++) {
bl[i].innerHTML = jsonLandkreis['BL'];
}
// 7-Tages-Inzidenzwert
var inzidenz7Tage= document.querySelectorAll('[id="anzeige7TageInzidenzWert"]');
var inzidenz7 = Math.round((jsonLandkreis['cases7_per_100k'] * 100)) / 100;
for(var i = 0; i < inzidenz7Tage.length; i++) {
inzidenz7Tage[i].innerHTML = inzidenz7;
//Auf Basis dieses Wertes wird abhaengig der Grenzwerte die Hintergrundfarbe geaendert:
inzidenz7Tage[i].classList.remove('gruen');
inzidenz7Tage[i].classList.remove('gelb');
inzidenz7Tage[i].classList.remove('rot');
if(inzidenz7 <= 35) {
inzidenz7Tage[i].classList.add('gruen');
} else if (inzidenz7 >35 && inzidenz7 <=50) {
inzidenz7Tage[i].classList.add('gelb');
} else if (inzidenz7 > 50) {
inzidenz7Tage[i].classList.add('rot');
}
}
// 7-Tages-Inzidenzwert Ampel
var divAktuellerFarbverlauf = document.querySelectorAll('[id="farbverlauf"]');
var divAktuellerAmpelWert = document.querySelectorAll('[id="aktuellerWert"]');
var cssWidth = 0;
if (inzidenz7 <=35) {
cssWidth = (Math.round(inzidenz7) * 33) / 35 ;
}
if (inzidenz7 >35 && inzidenz7 <50) {
cssWidth = (Math.round(inzidenz7) * 50) / 42;
}
if (inzidenz7 >=50 && inzidenz7 <=100) {
cssWidth = ((Math.round(inzidenz7) * 66) / 100) + 33;
}
for(var i = 0; i < divAktuellerFarbverlauf.length; i++) {
if (inzidenz7 > 100) {
cssWidth = 98;
divAktuellerFarbverlauf[i].classList.remove('farbverlauf');
divAktuellerFarbverlauf[i].classList.add('farbverlauf_ext');
} else {
divAktuellerFarbverlauf[i].classList.remove('farbverlauf_ext');
divAktuellerFarbverlauf[i].classList.add('farbverlauf');
}
for(var i = 0; i < divAktuellerAmpelWert.length; i++) {
divAktuellerAmpelWert[i].style.setProperty('width', + cssWidth+ '%');
}
}
// 7-Tage-Inzidenzwert Bundesland
var inzidenz7TageBL= document.querySelectorAll('[id="anzeige7TageInzidenzWertBundesland"]');
for(var i = 0; i < inzidenz7TageBL.length; i++) {
inzidenz7TageBL[i].innerHTML = Math.round((jsonLandkreis['cases7_bl_per_100k'] * 100)) / 100;
}
// Faelle pro 100k Einwohner
var inzidenzLK= document.querySelectorAll('[id="anzeigeFaellePro100k"]');
for(var i = 0; i < inzidenzLK.length; i++) {
inzidenzLK[i].innerHTML = Math.round((jsonLandkreis['cases_per_100k'] * 100)) / 100;
}
// Letztes Update / Letzter Stand vom RKI bereitgestellt
var letztesUpdate= document.querySelectorAll('[id="anzeigeLetztesUpdate"]');
for(var i = 0; i < letztesUpdate.length; i++) {
letztesUpdate[i].innerHTML = jsonLandkreis['last_update'];
}
// Gesamtfaelle im Landkreis
var faelleLK = document.querySelectorAll('[id="anzeigeFaelleGesamt"]');
for(var i = 0; i < faelleLK.length; i++) {
faelleLK[i].innerHTML = jsonLandkreis['cases'];
}
// Todesfaelle im Landkreis
var sterbefaelle = document.querySelectorAll('[id="anzeigeFaelleTod"]');
for(var i = 0; i < sterbefaelle.length; i++) {
sterbefaelle[i].innerHTML = jsonLandkreis['deaths'];
}
// Sterberate im Landkreis
var sterberate = document.querySelectorAll('[id="anzeigeSterberate"]');
for(var i = 0; i < sterberate.length; i++) {
sterberate[i].innerHTML = (Math.round((jsonLandkreis['death_rate'] * 100)) / 100) + "%";
}
// Faelle bezogen auf Gesamtbevoelkerung
var betroffenenrate = document.querySelectorAll('[id="anzeigeBetroffenenrate"]');
for(var i = 0; i < betroffenenrate.length; i++) {
betroffenenrate[i].innerHTML = Math.round((jsonLandkreis['cases_per_population'] * 100)) / 100;
}
});
</script>
</head>
<body>
<div class="block rand">
<h2>Corona-Ampel für den <span id="anzeigeLandkreisname"></span></h2>
7-Tage-Inzidenzwert<br/>
<span class="kursiv kleiner">Stand: <span id="anzeigeLetztesUpdate"></span> (Robert-Koch-Institut (RKI), <a href="https://www.govdata.de/dl-de/by-2-0" target="_blank" title="Lizenz: Datenlizenz Deutschland – Namensnennung – Version 2.0">dl-de/by-2-0</a>)</span>
<div id="container_farbverlauf">
<div id="farbverlauf" class="farbverlauf">
<div id="untererGrenzwert">
<div class="divGrenzwert">
<span title="unterer Grenzwert: 35">35</span>&nbsp;
</div>
</div>
<div id="obererGrenzwert">
<div class="divGrenzwert">
<span title="oberer Grenzwert: 50">50</span>&nbsp;
</div>
</div>
<div id="aktuellerWert">
<span class="divAktuellerWert" title="Aktueller Inzidenzwert">
<span id="anzeige7TageInzidenzWert"></span>
</span>
</div>
</div>
</div>
<div style="clear:both;"></div>
</div>
</body>
</html>
@HappyFr1tz
Copy link

Gibt es auch die Möglichkeit diese Daten auf einer anderen Website einzubetten und auf weitere Städte zu erweitern?

Ja, ist gewollt! Da ich die Ampel ursprünglich für unsere Feuerwehr-Webseite entwickelt habe, habe ich von Anfang an nur einen Landkreis benötigt.

Schade, suche die ganze Zeit nach einem AdOn, womit ich vier Landkreise einbetten kann. Trotzdem danke.

Olla, das habe ich für meine Verwandschaft gemacht, indem ich einfach mehrere Skripte (pro Landkreis eines) konfiguriert habe. Habe einfach die Ausgabevariablen angepasst. Schau dirs einfach an, wenn du Fragen hast schreib mir einfach :)

http://adrianwie.bplaced.net/coronainfo/

Ist natürlich alles schnell hingerotzt, bin kein Coder :D

Danke auch noch mal an mario-fliegner für das tolle Skript, habe damals wirklich lange nach einer einfachen Lösung gesucht, die hast du mir geboten! Danke!!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment