Allgemeines

Corona-Inzidenz-Widget für das eigene Blog

Corona-Widget (Screenshot)

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”:

Wordpress-Widget (Screenshot)
WordPress-Widget

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.

Plus/Premium
Gefällt Dir dieser Artikel oder hast Du sogar Nutzen daraus gezogen? Du kannst mein Blog via Patreon unterstützen und erhältst dafür Zugriff auf aktuell 112 Plus-Artikel. Auch jeder Link in sozialen Medien oder anderen Blogs zu meinen Inhalten hilft mir, Danke!

Erfolgreicher und produktiver werden
Mein E-Book und mein Coaching-Angebot zu den Themen "Get Organized" und "OmniFocus".

Unterstützung bei Apple-Automatisierungen
Ich arbeite seit 2008 mit iPhones und Mac-Computern und habe inzwischen Hunderte von Automatisierungen erstellt. Gerne stelle ich mein Wissen zur Verfügung! Weitere Infos hier.

Über den Autor

Markus Jasinski

Markus Jasinski ist ein Rostocker Unternehmer, Naturwissenschaftler, IT-Spezialist, Autor, Coach, Dänemark-Fan, überzeugter Radfahrer und nicht zuletzt „Computer Geek“ und Smart-Home-Enthusiast. Sein erstes iPhone kaufte der promovierte Naturwissenschaftler im Jahre 2008, kurze Zeit später wurde er dann auch zum Mac-Nutzer. Nach und nach gesellten sich iPad, Apple TV und Apple Watch hinzu.

Um diese vielfältigen Interessen und Aktivitäten "unter einen Hut" zu bekommen befasst sich der gebürtige Westfale seit über zehn Jahren mit den Themen Selbstorganisation und Aufgabenmanagement, die ebenfalls ein Schwerpunkt dieses Blogs sind.

9 Kommentare

  • 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.

  • 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.

Kommentar schreiben


Alle Kommentare werden moderiert und nur freigeschaltet, wenn sie diesen Regeln entsprechen. Keine Werbung! Bitte nutzt E-Mail für allgemeine und sonstige Anfragen.

All comments are reviewed and manually unlocked. Comments that do not refer to the article, are not written in German or contain advertising will be deleted. Please use e-mail for general and other inquiries.