-
-
Save mario-fliegner/1c4afc59b6dfa0c948bea49d76809ae9 to your computer and use it in GitHub Desktop.
| <!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> | |
| </div> | |
| </div> | |
| <div id="obererGrenzwert"> | |
| <div class="divGrenzwert"> | |
| <span title="oberer Grenzwert: 50">50</span> | |
| </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> |
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
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,...
Ach okay danke.
Und den Inzidenzwert von Deutschland? Dazu finde ich keine ObjectID
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.
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.
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.
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!!
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!!
Anpassung um den 7-Tage-Inzidenzwert für einen beliebigen Landkreis in Deutschland in der Corona-Ampel darzustellen:
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!