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.
