Skip to content

Instantly share code, notes, and snippets.

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.
"Corona Ampel" HTML5-Template für die Anzeige des 7-Tage-Inzidenzwertes eines beliebigen Landkreises. Daten via Rest-API vom RKI.
<!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>
@mario-fliegner
Copy link
Author

mario-fliegner commented Oct 27, 2020

Anpassung um den 7-Tage-Inzidenzwert für einen beliebigen Landkreis in Deutschland in der Corona-Ampel darzustellen:

  1. Die folgende Webseite aufrufen: https://npgeo-corona-npgeo-de.hub.arcgis.com/datasets/917fc37a709542548cc3be077a786c17_0
  2. Dort im linken mittleren Bereich der Karte auf das "Download"-Icon klicken.
  3. Nun um ganz linken Fensterbereich die CSV-Datei (kommaseparierte Liste) herunterladen.
  4. Die CSV-Datei hat den Namen RKI_Corona_Landkreise.csv und lässt sich bspw. mit Microsoft Excel öffnen.
  5. Da der Inhalt kommasepariert ist, muss er zuerst noch über die Excel-Funktion "Text in Spalten" (Menü "Daten") in Spalten umgewandelt werden, sodass eine vernünftige Suche nach der OBJECTID möglich ist.
  6. Nachdem der Inhalt in Spalten umgewandelt wurde, kann man in den Spalten H und I den gewünschten Landkreis/Stadt ermitteln und nun in Spalte A die OBJECTID ablesen.

Alternativ: Hier findet ihr die Liste mit allen Landkreisen/Städten und der OBJECTID von mir bereitgestellt (Basis sind die o.g. Schritte). Es muss einfach nur noch mit STRG+F nach dem gewünschten Landkreis gesucht werden. ;-)

Siehe auch: https://www.feuerwehr-gruenwald.de/covid19-ampel (Grundlage für dieses GIST)

Lizenz des GIST-Quellcodes: CC0

Benötigte Angaben zur Datenquelle: Robert-Koch-Institut (RKI) unter der dl-de/by-2-0 Lizenz!

@apbonn
Copy link

apbonn commented Apr 10, 2021

Hey, vielen Dank für dein Template.
Könntest du noch irgendwie einbauen wie der Wert vom Vortag war?
Denn es wäre super zu sehen ob der Wert eher steigt oder fällt :)
lg

@mario-fliegner
Copy link
Author

Hey, vielen Dank für dein Template.
Könntest du noch irgendwie einbauen wie der Wert vom Vortag war?
Denn es wäre super zu sehen ob der Wert eher steigt oder fällt :)
lg

Vielen Dank. Den Wert vom Vortag müsste man sich selbst in einer Datenbank speichern, da das RKI nur immer den aktuellen Wert bereitstellt. Das ist aber dann schon wieder - zumindest für den von mir ursprünglich gedachten Einsatzzweck - für viele zu kompliziert. Du benötigst eine serverseitige Scriptsprache und eine Datenbank (da würde wohl auch eine Text-Datei herhalten können). Dann wohl auch noch einen CRON-Job, da es wahrscheinlich nicht sinnvoll ist, bei jedem Seitenaufruf zu schauen, ob der Eintrag vom aktuellen Tag schon drinnen ist oder nicht,...

@apbonn
Copy link

apbonn commented Apr 12, 2021

Ach okay danke.
Und den Inzidenzwert von Deutschland? Dazu finde ich keine ObjectID

@HappyFr1tz
Copy link

Moin, ist es so gewollt, dass man maximal nur für einen Landkreis die Daten angeben kann? Wenn ich für zwei Landkreise die anbieten möchte, zeigt er in allen Feldern den zuletzt eingestellten Landkreis an.

@mario-fliegner
Copy link
Author

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.

@HappyFr1tz
Copy link

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.

@adrianwhu
Copy link

adrianwhu commented Oct 2, 2021

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!!

@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