So nutzen Sie die Wetter-API von Yahoo!

Als ich 2006 in einer Designagentur in Cardiff, Wales, arbeitete, kam mir die Idee, auf unserer Website die aktuellen Wetterbedingungen außerhalb unseres Büros zu veröffentlichen. Ich wollte unsere Website vollständig ansprechend gestalten und unseren Besuchern und Kunden in Echtzeit zeigen, was wir jeden Tag im wirklichen Leben erleben.

Nach umfangreichen Recherchen habe ich herausgefunden, dass der beste Ausgangspunkt hierfür die Wetter-API von Yahoo! ist, da sie die Wetterbedingungen in einem konsistenten, nutzbaren Format bereitstellt. Die einzige Möglichkeit, das Wetter auf einer Website wirklich darzustellen, war damals jedoch die Verwendung von Flash. Allein die Entwicklungszeit reichte aus, um die Idee aus den Köpfen der Unternehmensleiter zu vertreiben, und sie kam nie über die Konzeptionsphase hinaus.

Jetzt, sechs Jahre später, habe ich als technischer Leiter meines eigenen Unternehmens die Idee noch einmal aufgegriffen. Eine Suche auf verschiedenen Websites, Blogs und Foren ergab, dass selbst sechs Jahre später noch niemand so etwas getan hat, sodass wir den Code dafür erstellen mussten. Außerdem sind in den sechs Jahren seit der Idee meine Ambitionen gewachsen. Ich möchte nicht mehr nur, dass die Website das Wetter außerhalb unseres Büros anzeigt – ich möchte, dass sie das Wetter außerhalb des Fensters der Person anzeigt, die die Website betrachtet.

Ich habe eine Wunschliste mit Funktionen erstellt – mit Live-Wetteraktualisierungen, Sonnenauf- und -untergangszeiten, Tag und Nacht und sogar Mondzyklen – und sie unserem Entwickler Steven gegeben, damit er sie umsetzen kann.

Wieder einmal erwies sich die Wetter-API von Yahoo als die konsistenteste und bot sehr genaue Codes für verschiedene Wettertypen. Mit diesen Informationen könnten wir ein Array erstellen, das unsere Wetteranzeige steuern könnte.



















































Doch so gut die Daten von Yahoo auch sind, sie waren nur so genau wie der Standort, den wir über die Website eingeben konnten, und aufgrund der Schwächen des Internet Explorers von Microsoft konnten wir die Geolokalisierung nicht verwenden, um einen genauen Standort abzurufen für alle, die die Website besuchen. Wir mussten uns daher mit der nächstbesten Möglichkeit begnügen und die Website IPInfoDB verwenden, um anhand der IP-Adresse des Benutzers die nächstgelegene Hauptstadt oder nächstgelegene Großstadt abzurufen.

In den USA ergibt sich daraus in der Regel die Hauptstadt des Bundesstaates, in dem die Person, die sich die Website ansieht, ihren Wohnsitz hat. Hier im Vereinigten Königreich wird standardmäßig London verwendet, unabhängig davon, wo im Vereinigten Königreich die Person ansässig ist; Hoffentlich wird Microsoft eines Tages mit dem Rest der Browserwelt gleichziehen und uns die Nutzung der Geolokalisierung ermöglichen.

Durch die Verwendung der IP-Adresse des Benutzers und deren Eingabe in IPInfoDB konnten wir das Land, den Staat oder die Provinz sowie die Stadt oder Gemeinde der Person, die die Website betrachtet, extrapolieren. Durch die Eingabe in die Yahoo-API erhielten wir das aktuelle Wetter für diesen bestimmten Standort.

Die Sonnenauf- und -untergangszeiten sind jeden Tag genau und werden im Handumdrehen basierend auf Längen- und Breitengrad berechnet, die ebenfalls von der Wetter-API von Yahoo abgeleitet werden.

Schließlich ist da noch die Mondphase, die, obwohl sie nur auf dem Datum als Variable basiert, sich als die komplizierteste Berechnung von allen erwies.

Lass es schneien, lass es schneien, lass es schneien ...

Das ist die Theorie. Nun dazu, wie es gemacht wurde.

Der erste Schritt bestand darin, die von Yahoo! abgerufenen Wettertypen aufzuteilen. in ein Array, mit dem wir die Effekte auf der Website steuern können. Jeder der 47 verschiedenen Wettertypen von Yahoo verfügt über ein eigenes Array, das wir in vier Zahlen unterteilt haben. Der erste Zahlensatz bestimmt die Bewölkung und reicht von einem klaren Tag bis zu dunklen, schweren Wolken. Die zweite Zahl bezieht sich auf den Regen und reicht von keinem Regen bis hin zu starken Regenfällen. Die dritte Zahl steht für verschiedene zusätzliche Wetterarten wie Schnee und Blitz. Die vierte Zahl schließlich steht für das, was unser Designer Steven die „Soßeneffekte“ nennt, wie Nebel, Staub und Dunst.

$weatherarray[0]=array('tornado',3,3,5,3);
$weatherarray[1]=array('tropischer Sturm',3,3,5,3);
$weatherarray[2]=array('hurricane',3,2,4,3);
$weatherarray[3]=array('schwere Gewitter',3,3,5,3);
$weatherarray[4]=array('Gewitter',3,2,5,2);
$weatherarray[5]=array('gemischter Regen und Schnee',2,1,1,0);
$weatherarray[6]=array('gemischter Regen und Schneeregen',2,1,1,0);
$weatherarray[7]=array('gemischter Schnee und Schneeregen',2,1,2,0);
$weatherarray[8]=array('eiskalter Nieselregen',1,1,1,0);
$weatherarray[9]=array('drizzle',1,1,0,0);
$weatherarray[10]=array('Gefrierregen',1,2,1,0);
$weatherarray[11]=array('showers',2,2,0,0);
$weatherarray[12]=array('showers',2,2,0,0);
$weatherarray[13]=array('Schneegestöber',1,0,2,1);
$weatherarray[14]=array('leichte Schneeschauer',1,0,2,1);
$weatherarray[15]=array('Schneetreiben',1,0,2,2);
$weatherarray[16]=array('snow',1,0,2,0);
$weatherarray[17]=array('hagel',1,0,4,0);
$weatherarray[18]=array('seet',1,1,4,0);
$weatherarray[19]=array('dust',0,0,0,5);
$weatherarray[20]=array('foggy',0,0,0,4);
$weatherarray[21]=array('haze',0,0,0,5);
$weatherarray[22]=array('smoky',0,0,0,5);
$weatherarray[23]=array('blustery',1,0,0,2);
$weatherarray[24]=array('windig',1,0,0,2);
$weatherarray[25]=array('cold',1,0,0,0);
$weatherarray[26]=array('cloudy',2,0,0,0);
$weatherarray[27]=array('meistens bewölkt (Nacht)',1,0,0,0);
$weatherarray[28]=array('meistens bewölkt (Tag)',1,0,0,0);
$weatherarray[29]=array('teilweise bewölkt (Nacht)',1,0,0,0);
$weatherarray[30]=array('teilweise bewölkt (Tag)',1,0,0,0);
$weatherarray[31]=array('clear (night)',0,0,0,0);
$weatherarray[32]=array('sunny',0,0,0,0);
$weatherarray[33]=array('fair (Nacht)',0,0,0,0);
$weatherarray[34]=array('fair (Tag)',0,0,0,0);
$weatherarray[35]=array('gemischter Regen und Hagel',1,1,4,1);
$weatherarray[36]=array('hot',0,0,0,0);
$weatherarray[37]=array('isolierte Gewitter',3,2,5,2);
$weatherarray[38]=array('verstreute Gewitter',3,2,5,2);
$weatherarray[39]=array('verstreute Gewitter',3,2,5,2);
$weatherarray[40]=array('verstreute Schauer',3,2,0,2);
$weatherarray[41]=array('starker Schnee',1,0,3,0);
$weatherarray[42]=array('verstreute Schneeschauer',1,0,2,0);
$weatherarray[43]=array('starker Schnee',1,0,3,0);
$weatherarray[44]=array('teilweise bewölkt',1,0,0,0);
$weatherarray[45]=array('thundershowers',3,2,5,2);
$weatherarray[46]=array('Schneeschauer',1,0,2,0);
$weatherarray[47]=array('isolierte Gewitterschauer',3,2,5,2);
$weatherarray[3200]=array('nicht verfügbar',0,0,0,0);

Um den ohnehin schon umfangreichen Code und die Bilder auf ein Minimum zu beschränken, haben wir uns entschieden, die gleichen Bilder nach Möglichkeit wiederzuverwenden. Beispielsweise gibt es nur eine Regengrafik und diese wird anhand der Informationen von Yahoo! gesteuert. Wenn die Regengrafik hell sein soll, wird eine geringere Deckkraft eingestellt, um sie heller zu machen:

switch ( $effect1) {
Fall 0:
$weathercode.= 'jQuery(\'#rain\').css("opacity", "0.0");';
brechen;
Fall 1:
$weathercode.= 'jQuery(\'#rain\').css("opacity", "0.10");';
brechen;
Fall 2:
$weathercode.= 'jQuery(\'#rain\').css("opacity", "0.30");';
brechen;
Fall 3:
$weathercode.= 'jQuery(\'#rain\').css("opacity", "0.50");';
brechen;
}

Hüte dich vor dem Mond

Zum Glück sind wir zufällig auf die Berechnungen für den Mondzyklus gestoßen Stephen A. Zarkos‘ Blog. Im Einklang mit unserem Wunsch, die Bilder auf ein Minimum zu beschränken, wurde die Mondphase mit einem Pixelblatt erstellt, das 10 verschiedene Mondphasen zeigt. Mithilfe der Berechnungen von Zarkos wählt der folgende Code den richtigen Teil des Pixelblatts zur Anzeige aus und stellt so sicher, dass auf unserer Website immer der richtige Mondzyklus angezeigt wird.

Hintergrundposition: px 0;

Beobachten Sie den Sonnenuntergang in Echtzeit

Der letzte und optisch aufregendste Teil des Projekts ist der Echtzeit-Sonnenuntergang und -aufgang. Wie bereits erwähnt, werden dabei der Längen- und Breitengrad der nächstgelegenen Hauptstadt des Besuchers der Website verwendet, um die Sonnenauf- und -untergangszeiten für ihn zu extrapolieren. Das bedeutet, dass jemand, der sich die Website in Los Angeles ansieht, drei Stunden nach dem Besuch derselben Website in New York den Sonnenaufgang und -untergang sehen wird.

Der Sonnenuntergang und der Sonnenaufgang bestehen aus drei separaten Skyline-Effekten, die nacheinander ineinander übergehen. Für den Sonnenuntergang löst sich die Tagesszene langsam in eine orangefarbene Szene auf, bevor sie sich in eine Nachtszene auflöst. Während dies geschieht, beginnt eine Sonnengrafik (die immer über der Browserfalte vorhanden ist) herabzusteigen und zu „untergehen“. Dieser gesamte Vorgang dauert genau 300 Sekunden.

Die Sonnenuntergangszeit (abgeleitet aus Längen- und Breitengrad) wird in einen Unix-Zeitstempel umgewandelt, der dann als Variable gespeichert wird. Die aktuelle Zeit wird außerdem in einen Unix-Zeitstempel umgewandelt und die Differenz zwischen den beiden Zeiten wird für eine jQuery-Timeout-Funktion verwendet. Dadurch entsteht der Übergang zwischen den Tag- und Nachtthemen.

jQuery('#daytime').fadeOut(200000, 'linear', function() {
jQuery('#sill').fadeOut(100000, 'linear', function() {});
jQuery('#sunset').fadeOut(100000, 'linear', function() {});
});

Die üblichen Wettereffekte, was auch immer sie sein mögen, treten weiterhin auf, während die Sonne untergeht und aufgeht. Dies kann zu sehr schönen Übergängen führen, insbesondere wenn es sehr stark regnet.

Sie können den Code in Aktion auf der sehen Engage-Website.

Unsere Prognose für morgen

Da es sich um ein System handelt, das wir selbst entwickelt haben, suchen wir ständig nach Möglichkeiten, es zu verbessern. Seit der Einführung des Wettersystems im August dieses Jahres wollten wir zwei Funktionen hinzufügen.

Das erste haben wir gerade hinzugefügt; eine Cookie-basierte Standorteinstellung, mit der der Besucher der Website seine Wetteranzeige durch Eingabe seines Ortes, seiner Stadt oder seiner Postleitzahl genauer gestalten kann, um spezifische Wetterinformationen für seine Region abzurufen. Dies war tatsächlich sehr einfach, da die Wetter-API von Yahoo Postleitzahlen und Städte als Eingaben akzeptiert und einen Anruf bei iponfodb.com erspart. Wir haben dies mit verschiedenen Städten auf der ganzen Welt getestet, von Nordkanada bis zu den Antipodeninseln vor der Küste Neuseelands – so können Sie sehen, wie das Wetter überall auf der Welt ist.

Die zweite Funktion, die wir im neuen Jahr einführen werden, ist eine Steuerbox, mit der Besucher die Wettereffekte nach Belieben implementieren können, sodass die Kombinationen verschiedener Wettertypen unabhängig vom tatsächlichen Wetter angezeigt werden können. Besucher können beispielsweise die Regenintensität in 10-Prozent-Schritten von 0 % auf 100 % erhöhen. Dazu gehört auch ein Auslöser für den Sonnenuntergang und Sonnenaufgang, sodass jeder in die Rolle von Ed Harris aus der Truman Show schlüpfen und jederzeit einen Sonnenaufgang kreieren kann.

Haben Sie die Wetter-API von Yahoo! verwendet? Was hast du damit gebaut? Lass es uns unten in den Kommentaren wissen.

Ausgewähltes Bild/Miniaturansicht, Wetterbild über Shutterstock.

Aktuelle Artikel:

Empfohlen