COVID-19 Ampel - LFV Website-Kit Widget

"Corona-Ampel" - grafische Anzeige des 7-Tage-Inzidenzwertes (via Robert-Koch-Institut) eines ausgewählten Landkreises für das LFV Website-Kit (django CMS).
Die Ampel ist auch als HTML5-Template und als Modul für das Joomla CMS verfügbar: Weitere Informationen.

Corona-Ampel für den

7-Tage-Inzidenzwert im
Stand: (Robert-Koch-Institut (RKI), dl-de/by-2-0)

Schnellstart-Anleitung:

Die ObjectId des Landkreises ermitteln für den die Ampel angezeigt werden soll.
Diese ObjectId in das Eingabefeld des Quellcode Generators eintragen und auf "ObjectId in Quellcode einfügen" klicken.
Den HTML-Code in ein neues HTML-Snippet-Element auf einer Seite des Website-Kits kopieren (ausführliche Anleitung).
Seite speichern und veröffentlichen.

Der Text über der Ampel kann natürlich frei angepasst/geändert oder entfernt werden. Wichtig ist nur, dass die Quellangabe zum Robert-Koch-Institut (RKI) und die Lizenz dl-de/by-2-0, unter der die Daten veröffentlicht werden, ersichtlich bleiben.
Wenn ihr das Widget bei euch einbindet, braucht ihr uns (also die FF-Grünwald) nicht erwähnen oder verlinken; der Quellcode des Widgets steht unter der CC0-Lizenz. Wichtiger ist, dass ihr gesund bleibt und dadurch die Einsatzbereitschaft eurer Wehren aufrecht erhaltet! So haben wir alle etwas davon. ;-)

Widget Quellcode Generator

Landkreis ObjectId eingeben (Wo finde ich die ObjectId?):

Der Quellcode enthält das komplette obere Beispiel (inkl. rotem Rahmen)

<!-- START Stylesheet Informationen -->
<style>
    .fett{
        font-weight: 600;
    }
    .kursiv {
        font-style: italic;
    }
    .block {
        display: block;
        width: 100%;
        text-align:center;
        background-color: #ffffff;
        color: #000000;
    }
.lizenzLink {
    color: #c90024 !important;
}
    .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%); 
    }
    /* 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%); 
    }
</style>
<!-- ENDE Stylesheet Informationen -->

<!-- START Anzeige der Corona-Ampel -->
<div class="block rand">
       <h2>Corona-Ampel für den <span id="anzeigeLandkreisname"></span></h2>
	7-Tage-Inzidenzwert im <span id="anzeigeLandkreisname" class="fett"></span><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" class="lizenzLink">dl-de/by-2-0</a>)</span>
	<div id="container_farbverlauf" style="display:inline-block;width:100%;text-align:center;height:110px;margin-top:10px;">
		<div id="farbverlauf" style="width:70%;height:50px;margin: 0 auto;position: relative;" class="farbverlauf">
			<div id="untererGrenzwert" style="width:33%;border-right: 2px solid; border-right-color: grey;height:70px;float:left;">
                <div style="display: flex; justify-content: flex-end;align-items: flex-end; height:100%;color:grey;font-size:smaller;">
                    <span title="unterer Grenzwert: 35">35</span> 
                </div>
			</div>
			<div id="obererGrenzwert" style="width:33%;border-right: 2px solid; border-right-color: grey; height:70px;text-align:right;float: left;">
                <div style="display: flex; justify-content: flex-end;align-items: flex-end; height:100%; color:grey;font-size:smaller;">
                    <span title="oberer Grenzwert: 50">50</span> 
                </div>
			</div>
			<div id="aktuellerWert" style="border-right: 5px solid #000000;height:80px;text-align:right;z-index: 1; position: absolute;float: left;"> 
                <span style="border: 1px solid #000000;padding:5px;background:#fff;margin-bottom: 5px;margin-right: -40px; margin-top:70px;font-weight:700;display: inline-block;text-align:center;" title="Aktueller Inzidenzwert">
                    <span id="anzeige7TageInzidenzWert"></span>
                </span>
			</div>
		</div>
	</div>
	<div style="clear:both;"></div>
</div>
<!-- ENDE Anzeige der Corona-Ampel -->

<!-- START JavaScript Code -->
<script type="text/javascript">
	var landkreisObjectId = '239'; //Default Wert... Angabe der Landkreis OBJECTID -> 239 = Landkreis München
	
	// 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>
<!-- ENDE JavaScript Code -->

Update 05.11.2020: Anpassung der Stylesheets, damit das Widget auch auf der Startseite (Homepage) im Bereich "Inhalt" richtig angezeigt wird, da hier die Besonderheit ist, dass in diesem Bereich - im Gegensatz zu allen anderen Seiten im Bereich "Inhalt" - der Hintergrund rot und die Textfarbe weiß ist. Hintergrund des Widgets ist jetzt immer weiß und die Textfarbe wird auf schwarz gesetzt. Danke an Jojo von der FF Hagelstadt!
Update 07.11.2020: SEO Optimierung, indem eine <h2> eingefügt wurde. Text der verwendeten Lizenz (dl-de/by-2-0) wurde mit Link zur Lizenz hinterlegt. Außerdem Doku mit Hinweis ergänzt, dass Quellangabe und Lizenz ersichtlich bleiben müssen. Danke an Thorsten von der FF Lindenberg!

Die Krankenhausampel als Skript zur Einbindung auf die eigene Webseite ist nun hier verfügbar: https://krankenhausampel.info

Widget:

Die ObjectId des gewünschten Landkreises ermitteln

dazu die Webseite der verwendeten API mit den Corona-Landkreisen aufrufen: https://npgeo-corona-npgeo-de.hub.arcgis.com/datasets/917fc37a709542548cc3be077a786c17_0
dann im linken mittleren Bereich der Karte auf das "Download"-Icon klicken,
und nun um ganz linken Fensterbereich die CSV-Datei (kommaseparierte Liste) herunterladen.
Die CSV-Datei hat den Namen RKI_Corona_Landkreise.csv und lässt sich bspw. mit Microsoft Excel öffnen.
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.
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 uns bereitgestellt (Basis sind die o.g. Schritte). Es muss einfach nur noch mit STRG+F nach dem gewünschten Landkreis gesucht werden.

Einbinden in eine Seite des LFV Website-Kits:

Ausführliche Anleitung um den erzeugten Quellcode auf einer Seite des Website-Kits einzubinden.

Auf der Seite als Administrator einloggen (https://name-der-gemeinde.feuerwehren.bayern/admin)
Auf "Seite öffnen" in der oberen LFV Website-Kit Menüleiste klicken
Zur gewünschten Unterseite navigieren, auf der das Widget angezeigt werden soll (bspw. Startseite)
In der oberen LFV Website-Kit Menüleiste auf "Editieren" klicken
In den Struktur-Editor wechseln (ab hier: siehe Bild unten)
Im gewünschten Bereich (bspw. unter "Beschreibung" oder "Inhalt") über das + Zeichen:
1. einen neuen Container hinzufügen (mit Standardeinstellungen)
2. in dem Container eine neue Zeile mit 1 Spalte erstellen
3. in der neuen Spalte (Standardbreite: 12 Einheiten) ein HTML Snippet hinzufügen:
  1. Einen Namen angeben, dieser wird dem Besucher nicht angezeigt sondern dient nur dem Administrator zur besseren Übersicht.
  2. In das Feld HTML den kompletten Code aus den gewünschten Beispielen hier einfügen (vorher die Landkreis ObjectId ermitteln und anpassen)
  3. Speichern bzw. "Sichern"
Auf die blau hinterlegte Schaltfläche "Änderungen jetzt veröffentlichen" in der LFV Website-Kit Menüleiste klicken
Das Widget ist nun auf der Seite veröffentlicht.

Beschreibung	Wert	HTML-Code um Wert anzuzeigen
7-Tage-Inzidenz:
Landkreis:
Letztes Update / Stand:
Bundesland:
Gesamtfälle:
Todesfälle:
Sterberate:
7-Tage-Inzidenzwert im Bundesland:
Fälle/100.000 EW:
Betroffenenrate:

Beispiel 2: Fließtext ohne Ampel

Im () liegt der aktuelle 7-Tage-Inzidenzwert bei (Stand: ). Insgesamt gibt es bisher bestätigte Fälle von COVID-19, darunter Todesfälle. Die Sterberate beträgt .
Der 7-Tage-Inzidenzwert im gesamten Bundesland beträgt . Bezogen auf die Einwohnerzahl sind das Fälle pro 100.000 Einwohner, was einer Betroffenenrate von infizierten Personen entspricht.

Quelle: Robert-Koch-Institut (RKI), Lizenz: dl-de/by-2-0

Datenbereitstellung & Aufbereitung

Die Verwendeten und verarbeiteten Daten stammen von der Nationalen Plattform für geografische Daten (NPGEO), werden dort vom Robert-Koch-Institut (RKI) bereitgestellt und unterliegen einer "Custom License". Auszug:
Die Daten sind die „Fallzahlen in Deutschland“ des Robert Koch-Institut (RKI) und stehen unter der Open Data Datenlizenz Deutschland, Version 2.0 zur Verfügung. Quellenvermerk: Robert Koch-Institut (RKI), dl-de/by-2-0 Haftungsausschluss: „Die Inhalte, die über die Internetseiten des Robert Koch-Instituts zur Verfügung gestellt werden, dienen ausschließlich der allgemeinen Information der Öffentlichkeit, vorrangig der Fachöffentlichkeit“.

Datenquelle: https://services7.arcgis.com/mOBPykOjAyBO2ZKk/arcgis/rest/services/RKI_Landkreisdaten/FeatureServer/0
Bereit gestellt von: help1@esri
Verwendete REST-API (JSON Format): ArcGIS

Die Daten werden bei jedem Aufruf der Seite mittels eines asynchronen GET-Requests auf Basis der angegebenen ObjectId (=Landkreis) geholt und angezeigt. Pures JavaScript, es wird kein Framework (bspw. jQuery) verwendet.

Ein valides HTML5-Template für alle anderen Webseiten (nicht auf der LFV Webkit Basis) mit der "Corona Ampel" ist hier verfügbar. Oliver, von der FF Tiddische, hat das Script in ein Joomla-Modul gepackt. Wer Joomla als CMS verwendet, kann sich das Modul hier herunterladen.

_{Anregungen / Wünsche / Kritik bitte E-Mail an: mario.fliegner@feuerwehr-gruenwald.de}

Weitere Anzeigemöglichkeiten

Die nachfolgende Tabelle stellt alle verfügbaren Werte des Widgets mit den dazugehörenden HTML-Elementen dar, die neben der Ampel für eine Anzeige zur Verfügung stehen. Die HTML-Codes können auch mehrmals auf einer Seite (in verschiedenen Website-Kit Elementen) verwendet werden, dazu muss jedoch der JavaScript Teil des Quellcodes nach der Verwendung des letzten verwendeten HTML-Codes eingefügt werden. Deshalb ist es empfehlenswert, den JavaScript-Teil in ein eigenes HTML-Snippet der Seite zu kopieren und dieses an letzter Position (Bereich Bottom) im Struktureditor einzufügen.