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 zusätzliche 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".

Newsletter
In Kontakt bleiben, nichts mehr verpassen und Bonus-Tipps bekommen? Jetzt meinen Newsletter abonnieren!

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

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.