Seit ein paar Wochen habe ich an verschiedenen Stellen meines Blogs Widgets mit der 7-Tage Corona-Inzidenz für meinen Wohnort Rostock (s. Titelgrafik). Wenn ihr so etwas auch für euer Blog haben möchtet, bitte weiterlesen. Es funktioniert rein Client-seitig mit HTML, CSS und JavaScript. Das Prinzip ist sehr ähnlich zu den beliebten Corona-Widgets unter iOS 14 über die Scriptable-App.
Ihr braucht dazu eine Stelle in eurem Blog, wo ihr HTML-Quellcode platzieren könnt. Genau genommen muss es nicht mal ein Blog sein. Im sehr verbreiteten WordPress-System eigenen sich die HTML-Widgets bestens dafür. Diese findet ihr in der Administration unter Design > Widgets und ihr benötigt das Widget “Individuelles HTML”:
Hier der reine HTML-Code für das Inhaltsfeld:
<div align="center" id="inzidenz" style="font-size: 20px">
</div>
<div style="margin-top: 10px">
Neuinfektionen pro 100.000 Einwohner innerhalb der letzten 7 Tage
</div>
<div style="margin-top: 10px; font-size: 9px">
Quelle: Robert Koch-Institut (RKI), dl-de/by-2-0
</div>
<script>
const api_url = "https://services7.arcgis.com/mOBPykOjAyBO2ZKk/arcgis/rest/services/RKI_Landkreisdaten/FeatureServer/0/query?where=1%3D1&outFields=OBJECTID,cases7_per_100k,cases7_bl_per_100k,cases,GEN,county,BL&geometry=12.108811%2C54.083336&geometryType=esriGeometryPoint&inSR=4326&spatialRel=esriSpatialRelWithin&returnGeometry=false&outSR=4326&f=json";
var request = new XMLHttpRequest()
request.open('GET', api_url, true)
request.onload = function () {
// Begin accessing JSON data here
var data = JSON.parse(this.response)
if (request.status >= 200 && request.status < 400) {
document.getElementById("inzidenz").style["font-weight"] = "bold";
var inzidenz = data.features[0].attributes.cases7_per_100k
inzidenz = Math.round(inzidenz * 10) / 10
if (inzidenz < 35) {
document.getElementById("inzidenz").style["color"] = "#008000";
}
else if (inzidenz < 50) {
document.getElementById("inzidenz").style["color"] = "#ff8c00";
}
else {
document.getElementById("inzidenz").style["color"] = "#800000";
}
document.getElementById("inzidenz").textContent = inzidenz.toLocaleString();
} else {
document.getElementById("inzidenz").textContent = 'Nicht verfügbar';
}
}
request.send()
</script>Eine Anpassung ist auf jeden Fall noch erforderlich, und zwar der gewünschte Ort. Der steckt hier in Zeile 10 im geometry-Parameter:
&geometry=12.108811%2C54.083336
12.108811 und 54.083336 sind der Längen- und Breitengrad von Rostock. Dort müsst ihr die Geokoordinaten eures Ortes eintragen. Das “%2C” bitte als Trenner beibehalten. Den Style der div-Container könnt ihr natürlich auch an eure Vorlieben anpassen. Die Zeilen 20 bis 27 sorgen für die Farbgebung des Inzidenzwertes, hier Grün unter 35, Orange unter 50 und Rot über 50. Da könnt ihr euch freilich noch mehr Abstufen reinprogrammieren.
Toller Artikel, vielen Dank dafür! Wenn man jetzt noch 2 (oder 3) umliegende Landkreise abfragen könnte wäre das echter Mehrwert.
Danke! Es spricht nichts technisch dagegen, mehrere Widgets auf einer Seite zu platzieren bzw. in einem Widget mehrere Abfragen unterzubringen.
Habe ich gerade ausprobiert, im zweiten Widget wird der Wert dann allerdings aus irgendeinem Grund nicht nicht angezeigt.
Ich finde nur den Fehler nicht. Kann es an zwei Abfragen der gleichen Webseite liegen?
Eigentlich nicht. Leider erlaubt meine Zeit es nicht, technische Hilfestellung oder Support zu leisten. Momentan habe ich leider gerade besonders viele Projekte am laufen :-(.
Danke! Sehr guter HTML Code zum Einbetten der Corona Inzidenz für einen bestimmten Ort oder Landkreis. Das hat super auch in meiner WordPress Homepage bzw. Internetseite geklappt. Der Code funktioniert auch in einem Blogbeitrag, es muss also nicht unbedingt ein Widget sein.
Super Code.
Wie kann ich aber einen Wert für einen gesamten Landkreis abbilden?
(LK Oder-Spree)
Müsste eigentlich mit den Koordinaten irgendeines Ortes aus dem Kreis funktionieren. Ansonsten wäre ich leider überfragt 🤔.
Guten Tag und vielen Dank für diesen tollen Code. Wann greift sich denn dieser die aktuelle Inzidenz? Jeden Morgen sehe ich, dass die aktuelle Inzidenz stimmt, wird diese gleichzeitig mit dem RKI-Update (meist um 3 Uhr nachts) ausgetauscht?
Danke für die Info 🙂
Die Inzidenz wird bei jedem Aufruf vom entsprechenden RKI-Server geholt. Darauf, wann dieser aktualisiert wird, hat das Skript/Widget natürlich keinen Einfluss.