Als Roundup zum Thema Webseiten-Wetter möchte ich Euch in diesem Artikel nun zeigen, wie sich eine Wetterkarte für die Region Oberfranken mit 6 eingetragenen Städten (Bamberg, Bayreuth, Forchheim, Coburg, Kronach und Hof) und eine Vorhersagetabelle für einen Standort (Bamberg) mit Hilfe des wetter.com-Api erstellen lässt. Hierfür wird lediglich ein kostenloses wetter.com-Account sowie PHP in einer Version 5.x benötigt, da für das Auslesen der Wetterdaten die simple_xml – Bibliothek verwendet wird.
1. Vorbereitungen
Registrierung und Anlegen eines Projekts bei wetter.com
Um das wetter.com – Api (openweather-Schnittstelle) nutzen zu können, müsst Ihr Euch zunächst auf wetter.com kostenlos registrieren. Nach erfolgreicher Anmeldung legt Ihr im Api-Center (der Link versteckt sich in der Fußleiste von wetter.com) unter Projektverwaltung ein neues Projekt an und bestätigt die Nutzungsbedingungen. Bitte beachtet in diesem Zusammenhang, dass die Anzahl der maximalen Zugriffe auf die openweather-Schnittstelle derzeit auf 10000 pro Monat und pro Projekt beschränkt ist und das wetter.com-Logo, das Ihr im Api-Bereich unter Downloads findet, zwingend in den Quelltext einzubinden ist.
Unter dem Punkt „Übersicht“ findet Ihr nun den eindeutigen API Key, der im weiteren Verlauf für die Abfrage der Wetterdaten benötigt wird. Zudem ist die URL der Webseite anzugeben, unter der Ihr die Wetterkarte/Wetterdaten veröffentlichen wollt.
Mit Hilfe der Liste „Felder der Ortssuche“ unter Sucheinstellungen können die Parameter festgelegt werden, die für die eindeutige Identifikation des Standorts bei der Abfrage der Wetterdaten dienen sollen. In der Regel sind die Werte „Suche nach City-Code“, „Suche nach PLZ“ etc. bereits voreingestellt.
Die Optionen, die sich unter dem Menüpunkt „Vorhersageeinstellungen“ befinden, legen schließlich fest, welche Daten von wetter.com zurückgeliefert werden sollen. Zuerst werdet Ihr nach der Anzahl der Vorhersagetage gefragt. In der kostenlosen Version stehen maximal 3 Vorhersagetage (Wetter von heute, morgen und übermorgen) zur Verfügung.
Nun könnt Ihr per Drag and Drop die Parameter auswählen, die für Eure Wetterkarte benötigt werden. Die wichtigsten hierbei sind sicherlich die Minimal- und Maximaltemperatur (tn,tx) und der Code für den Wetterzustand (w). Da ich in diesem Beispiel eine möglichst detaillierte Vorhersage erreichen möchte, habe ich zusätzlich noch die Angaben für den Wind (wd,ws) und die Niederschlagswahrscheinlichkeit (pc) selektiert.
Wetter.com City-Code ermitteln
Der City-Code des gewünschten Standorts lässt sich am einfachsten über das Suchfeld auf der Startseite von wetter.com ermitteln, wo Ihr die PLZ oder den Ortsnamen des gewünschten Ortes eintragt. Ihr werdet nach dem Absenden auf die URL für die Stadt weitergeleitet, an deren Ende sich der City-Code befindet. Der 9-stellige Code hat für Orte in Deutschland stets die Form: DExxxxxxx. Für dieses Beispiel ergibt sich somit :
Bamberg (DE0000772)
Bayreuth (DE0000856)
Forchheim (DE0002952)
Coburg (DE0001794)
Kronach (DE0005784)
Hof (DE0004666)
Benötigtes Material
-Karte: Frei nutzbares und noch dazu optisch ansprechendes Kartenmaterial ist im Web nicht gerade einfach zu finden. Falls Ihr die Wetterkarte selbst erstellen wollt, sucht in der Google Bilder-Suche nach einer möglichst einfarbigen Karte der Region. Öffnet diese in Eurem Bildbearbeitungsprogramm und erstellt eine Auswahl um die Region. Skaliert die Auswahl nun auf die gewünschte Größe und füllt diese nach Belieben. Mit einem leichten Schatten bringt Ihr, insbesondere bei hellen Hintergründen, etwas mehr Tiefe ins Spiel. Speichert die Karte nun entweder als PNG mit transparentem Hintergrund oder als JPG mit der selben Hintergrundfarbe, wie Ihr Sie in Eurem Seitenlayout verwendet, ab.
-Icons: Im Api-Bereich findet Ihr unter Downloads das Wetter- und Wind Icon-Set von wetter.com.
Der Dateiname der Icons setzt sich dabei wiefolgt zusammen:
d_<erste Ziffer des Wetterzustandcodes>_b.png (Tagicons)
n_<erste Ziffer des Wetterzustandcodes>_b.png (Nachticons)
<Windrichtung>.png (Windicons)
Natürlich könnt Ihr jederzeit eigene Wetter-Icons verwenden. Es empfiehlt sich jedoch, die von wetter.com vorgeschlagene Namenskonvention einzuhalten.
2. automatisierte Wetterkarte
Zu Beginn des Codes wird zunächst die CSS-Datei (styles.css) festgelegt, die unsere Wetterkarte und Vorhersagetabelle formatiert.
HTML:
<link href="css/styles.css" rel="stylesheet" type="text/css" />
Bevor wir die Wetterdaten von wetter.com abfragen, brauchen wir zunächst einen Div-Container mit der Wetterkarte als Hintergrundbild. In diesen werden im weiteren Verlauf die Divs für die sechs Städte eingefügt. Höhe und Breite entsprechen dabei den Maßen des Karten-Images.
HTML:
<div class="wetterkarte">Hier kommen die PHP-generierten Staedteboxen rein</div>
CSS:
.wetterkarte{ position:relative; width:400px; height:400px; background-image:url(../img/Wetterkarte.png); background-repeat:no-repeat; font-family:Georgia, "Times New Roman", Times, serif; font-size:11px; }
Der Container wurde im Beispiel relativ positioniert, da sich die Städteboxen später absolut an diesem orientieren sollen. Für jede dieser Städte habe ich eine CSS Klasse angelegt, die u.a. deren absolute Position und Breite definiert. Die Klassennamen sind bewusst gewählt und sollten eine fortlaufende Zahl enthalten. Der Grund hierfür wird später ersichtlich. Die Nummerierung muss allerdings zwingend der Reihenfolge der Städte im Array entsprechen. Da die Boxen über der Wetterkarte angezeigt werden sollen, erhalten diese zusätzlich den z-index 2. Die weiteren CSS-Klassen dienen der Formatierung der Städteboxen.
CSS:
.city_0{ /*Bamberg*/ width:100px; position:absolute; top:190px; left:55px; z-index:3; text-align:center; } .city_1{ /*Bayreuth*/ width:100px; position:absolute; top:181px; left:213px; z-index:3; text-align:center; } .city_2{ /*Forchheim*/ width:100px; position:absolute; top:250px; left:113px; z-index:3; text-align:center; } .city_3{ /*Coburg*/ width:100px; position:absolute; top:75px; left:80px; z-index:3; text-align:center; } .city_4{ /*Kronach*/ width:100px; position:absolute; top:90px; left:177px; z-index:3; text-align:center; } .city_5{ /*Hof*/ width:100px; position:absolute; top:55px; left:275px; z-index:3; text-align:center; } .cityname{ margin:0; padding:0; margin-top:-10px; text-align:center; color:#FFFFFF; } .temperature{ text-align:center; margin:0; padding:0; color:#FFFFFF; } .temp_min{ color:#06C; font-size:13px; } .temp_max{ color:#C00; font-size:13px; }
Kommen wir nun zum Teil, der unsere Wetterkarte mit Informationen füllt, dem PHP-Skript. Damit wir später jedem City-Code den Namen der Stadt wieder eindeutig zuordnen können, legen wir für die Codes und für die Städtenamen jeweils ein Array an und füllen diese in der gleichen Reihenfolge. Anschließend ermitteln wir deren Länge.
PHP:
$citycodes[0]="DE0000772"; //Bamberg $cityname[0]="Bamberg"; $citycodes[1]="DE0000856"; //Bayreuth $cityname[1]="Bayreuth"; $citycodes[2]="DE0002952"; //Forchheim $cityname[2]="Forchheim"; $citycodes[3]="DE0001794"; //Coburg $cityname[3]="Coburg"; $citycodes[4]="DE0005784"; //Kronach $cityname[4]="Kronach"; $citycodes[5]="DE0004666"; //Hof $cityname[5]="Hof"; $length=count($citycodes); $tag=0;
Mit Hilfe der Variable $tag wird der Vorhersagetag festgelegt, für den die auf der Karte angezeigten Wetterdaten gelten sollen. In einer for-Schleife sollen nun für jeden Ort im Array zunächst die Wetterdaten abgefragt und im weiteren Verlauf die Städtebox erzeugt werden.
PHP:
for($i=0;$i<$length;$i++){ $sSearchUrl=""; $sSearchUrl = "https://api.wetter.com/forecast/weather"; $sProjectName = "wetterartikel"; $sApiKey = "74c7845b29a513b86e8bda764398be67"; $sChecksum = md5($sProjectName . $sApiKey . $citycodes[$i]); $sSearchUrl .= "/city/" . $citycodes[$i]; $sSearchUrl .= "/project/" . $sProjectName; $sSearchUrl .= "/cs/" . $sChecksum; ... }
Das Format einer gültigen Suchanfrage lautet:
https://api.wetter.com/forecast/weather/city/<citycode>/project/<projektname>/cs/<checksumme>
Entsprechend dieser Vorlage wird der URL-String $sSearchUrl mit den in der Projektverwaltung von wetter.com angegebenen Werten schrittweise zusammengesetzt. Die Checksumme egibt sich dabei aus dem MD5-Hashwert der Zeichenkette, die sich wiederum aus dem angegeben Projektnamen, dem von wetter.com zugeteilten Api-Key und dem City-Code zusammensetzt. Um den URL-String zu testen, gebt Ihr diesen mit einem „echo“- Befehl aus und kopiert die URL anschließend in die Adresszeile des Browsers. Bei korrekter Zusammensetzung sollte der HTTP-Request mit der XML-Struktur der Wettervorhersage für den gewünschten Standort beantwortet und diese im Browser wie folgt angezeigt werden:
XML:
<city> <city_code>DE0000772</city_code> <name>Bamberg</name> <post_code>96047</post_code> <credit> <!-- In order to use the free weather data from wetter.com you HAVE TO display at least two out of three of the following possibilities: text, link, logo --> <text>Powered by wetter.com</text> <link>https://www.wetter.com</link> <logo> Download at https://www.wetter.com/api/downloads/#logos</logo> </credit> <forecast> <date value="2010-04-24"> <du>1272081600</du> <d>1272088800</d> <dhu>2010-04-24 04:00</dhu> <dhl>2010-04-24 06:00</dhl> <p>24</p> <w>10</w> <pc>0</pc> <wd>90</wd> <ws>9.3</ws> <time value="06:00"> <du>1272081600</du> <d>1272088800</d> <dhu>2010-04-24 04:00</dhu> <dhl>2010-04-24 06:00</dhl> <p>5</p> <w>0</w> <pc>0</pc> <tn>6</tn> <tx>14</tx> <wd>90</wd> <ws>7.4</ws> <w_txt>sonnig</w_txt> <wd_txt>O</wd_txt> </time> ...
Nachdem Ihr den String erfolgreich getestet habt, ist es nun an der Zeit den HTTP Request mittels PHP automatisiert an wetter.com zu senden und die Wetterdaten abzufragen:
PHP:
$api = simplexml_load_string(file_get_contents($sSearchUrl));
Die Funktion file_get_contents sendet die Anfrage und erzeugt aus der Antwort des wetter.com-Servers eine Zeichenkette. Dieser String wird anschließend in ein simple_XML- Objekt umgewandelt. Aus diesem lassen sich nun die Parameter für den heutigen Tag auslesen:
PHP:
$wetter=$api->forecast->date[$tag]->w; $wetter_symbol=substr($wetter,0,1); $wetter_text= $api->forecast->date[$tag]->w_txt; /*Maximumtemperatur/Minimumtemperatur ermitteln*/ $tmax=-100; $tmin=100; for ($a=0;$a<4;$a++){ $tmax_curr=(int)$api->forecast->date[$tag]->time[$a]->tx; $tmin_curr=(int)$api->forecast->date[$tag]->time[$a]->tn; if($tmax_curr>=$tmax){ $tmax=$tmax_curr; } if($tmin_curr<=$tmin) { $tmin=$tmin_curr; } }
Beginnen wir mit dem Wetter für den heutigen Tag. Alle Parameter, die sich auf den gesamten heutigen Tag und nicht auf eine Vorhersage zu einer bestimmten Uhrzeit beziehen, befinden sich unterhalb des ersten <date value=“…“> Knotenpunktes außerhalb der <time >-Angaben. Das Wettersymbol verbirgt sich dabei im Parameter w, und zwar genau in der ersten Stelle des Wertes. Mit Hilfe der XML Notation (->) hangeln wir uns vom Basisknoten <city> aus über <forecast>, dem ersten darin aufgeführten <date>-Knoten (date[0]) hin zum Knoten w und legen den Wert in $wetter ab. Danach verwenden wir die substr – Funktion, um die Zeichenkette („10“) in zwei Teilstrings („1″|“0“) zu zerlegen und die erste Stelle („1“) in der Variable $wetter_symbol („1“) zu speichern. Zusätzlich lesen wir noch den Zustand des Wetters in Textform (w_txt) aus. Fertig.
Nun wird es ein klein wenig komplizierter, es folgt die Ermittlung der minimalen bzw. maximalen Tagestemperatur. Da von wetter.com keine Höchst-/Tiefsttemperatur für den gesamten Tag geliefert wird, müssen wir aus den Daten der vier Zeitpunkte (06:00 ,11:00, 17:00, und 23:00 UTC) die höchste(tx) bzw. niedrigste Temperatur(tn) ermitteln. In einer for-Schleife lesen wir deshalb die vorhergesagte Maximal-/Minimaltemperatur zu den Zeitpunkten time[0], time [1], time[2], time[3] aus. Da beim Zugriff auf XML-Knoten immer Zeichenketten zurückgeliefert werden, wandeln wir die gewonnenen Temperaturen in einen ganzzahligen Wert (integer) um und legen sie jeweils in $tmax_curr/ $tmin_curr ab.
Wir vergleichen diese nun mit zwei vorher festgelegten Hilfsparametern$tmax=-100,$tmin=100, die die bisherige maximale / minimale Tagestemperatur bilden:
Die aus dem ersten Zeitknoten (06:00 UTC) ermittelte Tageshöchsttemperatur wird mit 100%iger Sicherheit höher sein als -100°C. Die -100°C werden daher durch die ausgelesene Maximaltemperatur ersetzt. Im nächsten Schritt wird die Maximaltemperatur von 09:00 UTC ermittelt. Ist diese höher als die bisherige Tages-Maximaltemperatur, wird $tmax wiederum durch den neuen Wert ersetzt. Ist diese kleiner, bleibt $tmax unverändert. Dies wiederholt sich für die Zeitpunkte 17:00, 23:00 zwei weitere Male.
Die gleiche Prozedur wird auch für die Tages-Tiefsttemperatur $tmin durchgeführt, allerdings mit umgekehrten Vorzeichen. Am Ende befinden sich in $tmax und $tmin die gewünschten Werte.
Nachdem wir die Wetterdaten nun vorliegen haben, können wir die Städtebox zusammensetzen und in den Wetterkartencontainer einfügen:
PHP:
echo "<div class=\"city_".$i."\"> <div> <img title=\"".$wetter_text."\" src=\"img/icons/d_".$wetter_symbol."_b.png\"/> </div> <div class=\"cityname\">".$cityname[$i]."</div> <div class=\"temperature\"> <span class=\"temp_min\">".$tmin."</span>|<span class=\"temp_max\">".$tmax."</span> </div> </div>";
Der Div-Container erhält die CSS-Klasse der entsprechenden Stadt (city_0,city_1 usw.). In diesen wird zunächst das korrespondierende Wettersymbol eingefügt. Mit der Angabe des Wettertextes im title des Images wird erreicht, dass der Wetterzustand in Textform beim Überfahren mit der Maus angezeigt wird. Schließlich folgt der Name der Stadt sowie die Ausgabe der minimalen / maximalen Tagestemperatur, Das war’s. Unsere Wetterkarte ist fertig.
3. Vorhersagetabelle für die nächsten 3 Tage
Im zweiten Teil dieses Tutorials möchte ich Euch nun zeigen, wie Ihr für einen bestimmten Ort eine Vorhersagetabelle für die nächsten Tage erstellt. Der Aufbau ist im Grunde identisch mit dem der Wetterkarte. Die Unterschiede bestehen lediglich darin, dass wir uns bei der Wettervorhersage nun auf einen Ort konzentrieren, den Vorhersagezeitraum auf 3 Tage (heute, morgen übermorgen) erweitern und den Detailgrad der Vorschau erhöhen. Neben den zusätzlichen Parametern Niederschlagswahrscheinlichkeit, Windrichtung und Wingeschwindigkeit soll zudem das Wetter an den Vorhersagezeitpunkten (06:00, 11:00, 17:00 und 23:00 UTC) des jeweiligen Tages angezeigt werden. Das Ganze soll in etwa so aussehen:
Für das Layout der Tabelle benötigen wir deshalb ein paar ergänzende CSS-Klassen:
CSS:
.weather_table{ text-align:center; font-family:Georgia, "Times New Roman", Times, serif; font-size:11px; color:#4a4a4a; background-color:#acc1ff; } .weather_table tr{ height:25px; } .weather_table tr td{ padding-left:8px; padding-right:8px; } #headline{ height:45px; font-weight:bold; } .even{ background-color:#bccdff; } .legend{ text-align:right; font-weight:bold; } }
PHP:
$sSearchUrl = "https://api.wetter.com/forecast/weather"; $sProjectName = "wetterartikel"; $sApiKey = "74c7845b29a513b86e8bda764398be67"; $citycode="DE0000772"; $sChecksum = md5($sProjectName . $sApiKey . $citycode); $sSearchUrl .= "/city/" . $citycode; $sSearchUrl .= "/project/" . $sProjectName; $sSearchUrl .= "/cs/" . $sChecksum; $api = simplexml_load_string(file_get_contents($sSearchUrl));
Der Quelltext für die Abfrage der Wetterdaten bei wetter.com ist nahezu identisch. Diesmal brauchen wir allerdings nur den City-Code des gewünschten Standortes und kommen somit ohne die for-Schleife aus.
Auch das Auslesen der Parameter aus dem simpleXML-Objekt funktioniert nach dem selben Prinzip. Über die „->“ Schreibweise greifen wir auf die Wetterdaten für den aktuellen Tag (date[0]) zu und ermitteln an den vier Vorhersagezeitpunkten (time[0], time[1], time[2], time[3]) die minimale / maximale Tagestemperatur, die Niederschlagswahrscheinlichkeit, die Windgeschwindigkeit und die Windrichtung und legen die Daten jeweils in einer Variablen ab.
PHP:
$datum_heute= date("d.m.Y"); $wetter=$api->forecast->date[0]->time[0]->w; $wetter_heute_frueh=substr($wetter,0,1); $wetter=$api->forecast->date[0]->time[1]->w; $wetter_heute_mittag=substr($wetter,0,1); $wetter=$api->forecast->date[0]->time[2]->w; $wetter_heute_abend=substr($wetter,0,1); $wetter=$api->forecast->date[0]->time[3]->w; $wetter_heute_nacht=substr($wetter,0,1); $tmax_heute=-100; $tmin_heute=100; for ($a=0;$a<4;$a++){ $tmax_curr=(int)$api->forecast->date[0]->time[$a]->tx; $tmin_curr=(int)$api->forecast->date[0]->time[$a]->tn; if($tmax_curr>=$tmax_heute){ $tmax_heute=$tmax_curr; } if($tmin_curr< =$tmin_heute){ $tmin_heute=$tmin_curr; } } $niederschlags_ws_heute=$api->forecast->date[0]->pc; $wind_geschwindigkeit_heute = $api->forecast->date[0]->ws; $wind_richtung_heute = $api->forecast->date[0]->wd_txt; /* Parameter morgen*/ $datum_morgen = date("d.m.Y", time()+86400); $wetter=$api->forecast->date[1]->time[0]->w; $wetter_morgen_frueh=substr($wetter,0,1); $wetter=$api->forecast->date[1]->time[1]->w; $wetter_morgen_mittag=substr($wetter,0,1); $wetter=$api->forecast->date[1]->time[2]->w; $wetter_morgen_abend=substr($wetter,0,1); $wetter=$api->forecast->date[1]->time[3]->w; $wetter_morgen_nacht=substr($wetter,0,1); $tmax_morgen=-100; $tmin_morgen=100; for ($a=0;$a<4;$a++){ $tmax_curr=(int)$api->forecast->date[1]->time[$a]->tx; $tmin_curr=(int)$api->forecast->date[1]->time[$a]->tn; if($tmax_curr>=$tmax_morgen){ $tmax_morgen=$tmax_curr; } if($tmin_curr< =$tmin_morgen) { $tmin_morgen=$tmin_curr; } } $niederschlags_ws_morgen=$api->forecast->date[1]->pc; $wind_geschwindigkeit_morgen = $api->forecast->date[1]->ws; $wind_richtung_morgen = $api->forecast->date[1]->wd_txt; /*Parameter uebermorgen*/ $datum_uebermorgen = date("d.m.Y", time()+172800); $wetter=$api->forecast->date[2]->time[0]->w; $wetter_uebermorgen_frueh=substr($wetter,0,1); $wetter=$api->forecast->date[2]->time[1]->w; $wetter_uebermorgen_mittag=substr($wetter,0,1); $wetter=$api->forecast->date[2]->time[2]->w; $wetter_uebermorgen_abend=substr($wetter,0,1); $wetter=$api->forecast->date[2]->time[3]->w; $wetter_uebermorgen_nacht=substr($wetter,0,1); $tmax_uebermorgen=-100; $tmin_uebermorgen=100; for ($a=0;$a<4;$a++){ $tmax_curr=(int)$api->forecast->date[2]->time[$a]->tx; $tmin_curr=(int)$api->forecast->date[2]->time[$a]->tn; if($tmax_curr>=$tmax_uebermorgen){ $tmax_uebermorgen=$tmax_curr; } if($tmin_curr< =$tmin_uebermorgen) { $tmin_uebermorgen=$tmin_curr; } } $niederschlags_ws_uebermorgen=$api->forecast->date[2]->pc; $wind_geschwindigkeit_uebermorgen = $api->forecast->date[2]->ws; $wind_richtung_uebermorgen = $api->forecast->date[2]->wd_txt;
Dies wiederholen wir jeweils für den morgigen (date[1]) und den übernächsten Tag (date[2]). Mit Hilfe der PHP-Funktion date(„d.m.Y“) lässt sich das jeweilige Datum errechnen und in der Form TT.MM.JJJJ ausgeben. Um an das morgige Datum zu gelangen, besitzt die Funktion einen zweiten Parameter für die Definition eines bestimmten Zeitpunktes. Zum aktuellen Zeitpunkt time() werden also 24 (h) *60 (min) *60 (s)= 86400 Sekunden addiert date(„d.m.Y“, time()+86400), für das Datum am übernächsten Tag 172800.
Abschließend puzzlen wir die Tabelle mit den gewonnenen Wetterdaten zusammen:
PHP:
<table class="weather_table" border="0" cellspacing="0" cellpadding="0"> <tr class="even" id="headline"> <td></td> <td>heute<br /> <?php echo $datum_heute; ?> </td> <td>morgen<br /> <?php echo $datum_morgen; ?> </td> <td>übermorgen<br /> <?php echo $datum_uebermorgen; ?> </td> </tr> <tr> <td class="legend">Früh:</td> <td> <img src="img/icons/d_<?php echo $wetter_heute_frueh; ?>_b.png" width="73" height="63" /> </td> <td> <img src="img/icons/d_<?php echo $wetter_morgen_frueh; ?>_b.png" width="73" height="63" /> </td> <td> <img src="img/icons/d_<?php echo $wetter_uebermorgen_frueh; ?>_b.png" alt="" width="73" height="63" /> </td> </tr> <tr class="even"> <td class="legend">Mittags: </td> <td> <img src="img/icons/d_<?php echo $wetter_heute_mittag; ?>_b.png" alt="" width="73" height="63" /> </td> <td> <img src="img/icons/d_<?php echo $wetter_morgen_mittag; ?>_b.png" alt="" width="73" height="63" /> </td> <td> <img src="img/icons/d_<?php echo $wetter_uebermorgen_mittag; ?>_b.png" alt="" width="73" height="63" /> </td> </tr> <tr> <td class="legend">Abends:</td> <td> <img src="img/icons/d_<?php echo $wetter_heute_abend; ?>_b.png" alt="" width="73" height="63" /> </td> <td> <img src="img/icons/d_<?php echo $wetter_morgen_abend; ?>_b.png" alt="" width="73" height="63" /> </td> <td> <img src="img/icons/d_<?php echo $wetter_uebermorgen_abend; ?>_b.png" alt="" width="73" height="63" /> </td> </tr> <tr class="even"> <td class="legend">Nachts:</td> <td> <img src="img/icons/n_<?php echo $wetter_heute_nacht; ?>_b.png" width="73" height="63" /> </td> <td> <img src="img/icons/n_<?php echo $wetter_morgen_nacht; ?>_b.png" alt="" width="73" height="63" /> </td> <td> <img src="img/icons/n_<?php echo $wetter_uebermorgen_nacht; ?>_b.png" alt="" width="73" height="63" /> </td> </tr> <tr> <td class="legend">Temperatur:<br /> (min/max) </td> <td> <span class="temp_min"><?php echo $tmin_heute; ?></span>| <span class="temp_max"><?php echo $tmax_heute; ?></span> </td> <td> <span class="temp_min"><?php echo $tmin_morgen; ?></span>| <span class="temp_max"><?php echo $tmax_morgen; ?></span></td> <td> <span class="temp_min"><?php echo $tmin_uebermorgen; ?></span>| <span class="temp_max"><?php echo $tmax_uebermorgen; ?></span> </td> </tr> <tr class="even"> <td class="legend">Niederschlagsrisiko:</td> <td><?php echo $niederschlags_ws_heute;?>%</td> <td><?php echo $niederschlags_ws_morgen;?>%</td> <td><?php echo $niederschlags_ws_uebermorgen;?>%</td> </tr> <tr> <td class="legend">Windrichtung:</td> <td> <img src="img/icons/<?php echo $wind_richtung_heute;?>.png" alt="<?php echo $wind_richtung_heute;?>" title="<?php echo $wind_richtung_heute;?>" width="50" height="50"/> </td> <td> <img src="img/icons/<?php echo $wind_richtung_morgen;?>.png" alt="<?php echo $wind_richtung_morgen;?>" title="<?php echo $wind_richtung_morgen;?>" width="50" height="50"/> </td> <td> <img src="img/icons/<?php echo $wind_richtung_uebermorgen;?>.png" alt="<?php echo $wind_richtung_uebermorgen;?>" title="<?php echo $wind_richtung_uebermorgen;?>" width="50" height="50"/> </td> </tr> <tr class="even"> <td class="legend">Wind:</td> <td><?php echo $wind_geschwindigkeit_heute;?> km/h</td> <td><?php echo $wind_geschwindigkeit_morgen;?> km/h</td> <td><?php echo $wind_geschwindigkeit_uebermorgen;?> km/h</td> </tr> </table>
Das war’s. Das fertige Ergebnis könnt Ihr Euch nun hier ansehen und alle Meterialien und Skripte herunterladen:
stay connected
Super, das ist extrem ausführlich beschrieben. Für die Anzeige in einer jpg-Grafik habe ich auch noch eine tolle Anleitung gefunden: https://www.keepaneye.de/wetterdaten-aus-xml-api-verwenden/
Grüße,
Mat
Vielen Dank @Mat für das Lob und den Link!
Moin moin,
wirklich super Anleitung. Hat alles auf Anhieb funktioniert. Vielen Dank!!!!!
Dear admin it is possible with api of yr.no?
Hi, and thanks for reading…
First of all I have to mention, that I don´t have any experiences with yr.no. I had a quick look over their offer… and indeed, there is an API.
Have a look at this page. There you´ll find a link to a php – File (which you only need, if you want to store weather data on your webspace) and a link to the xml specification.
To get XML datas for a forecast for one city, you need to request an URL with the following structure:
https://www.yr.no/place/%5Bcountry e.g. Germany]/[state e.g. Bavaria]/[city e.g. Bamberg]/forecast.xml
=
https://www.yr.no/place/Germany/Bavaria/Bamberg/forecast.xml
Because the xml-patterns are a little different to those from wetter.com, you´ll have to adapt the XML-pathes in the php-file.
Hope, I could help you.
Best regards!
Hi Dominic!
It wasn´t as easy as I thought, but it seems to work.
Check the following link:
demo
download
I`m currently working on the article and the description for the example.
Best regards!
I heartily thank you Admin! is really fabulous! I guess it was very difficult! I would not have ever been able to build.
I included the script as well as downloaded, it works, but all the icons are always updated to the night, as the temperatures also changing day.
PS: You can get the weather up to 7 days?
thank you very much!!!!
Thanks! Great to hear that the code works. I guess, I zipped the wrong source file.
Every requested XML-File seems to have 36 points of forecast, each day has 4 of them, that means a forecast over 9 days is possible. I´ll think about the idea of wind symbols on map. In my opinion, a time based change of symbols would be the best solution, because the mouse-over stat is already in use (jQuery-Tooltip).
Hallo,
super script. Funktioniert auf Anhieb. Nür die Umlaute werden falsch angezeigt. Was mache ich denn da falsch.
Viele Grüße Hans
Hallo Hans,
das Problem mit der korrekten Darstellung von Umlauten kann verschiedene Gründe haben bzw. diese Zeichen auch an verschiedenen Stellen falsch erzeugt werden, angefangen vom falschen Charset im header über Browsereinstellungen bis hin zum in PHP generierten Code oder der jQuery-Übergabe.
Ohne die Ausgabe zu kennen würde ich mich Schritt für Schritt vortasten, ev. zunächst mal ISO-8859-1 als Charset ausprobieren und anschließend im PHP-Code in Zeile 142 für $cityname[$i] die diversen PHP Zeichencodierungs-Funktionen, je nach Art der falschen Zeichen, ausprobieren (utf8_encode(), htmlentities()).
Gruß Flo