Last active
November 23, 2022 20:04
-
-
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
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!!
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Schade, suche die ganze Zeit nach einem AdOn, womit ich vier Landkreise einbetten kann. Trotzdem danke.