Eine Wetter-Vorhersage in der eigenen Website bietet einen nützlichen Mehrwert, wenn z.B. das Thema der Website etwas mit Outdoor-Aktivitäten zu tun hat. Einige Online-Services, die sogenannte Wetter-Widgets anbieten, könnte man dazu verwenden. Diese lassen sich zumeist aber nicht an das Design der Website anpassen und haben vorbestimmte Abmaße. Möchte man das aktuelle Wetter eines Ortes anzeigen und die Ausgabe mit HTML/CSS verändern, eignet sich die Yahoo-Weather API recht gut und bietet zudem ansehnliche Wetter-Icons.
Die Google Wetter API ist leider nicht dokumentiert, ist eigentlich auch nur für die Weather-Widgets in iGoogle gedacht. Die Standard-API liefert zudem nicht unbedingt hübsche Icons. Vorteil ist allerdings, dass Sie eine Wetter-Vorhersage über mehrere Tage liefert. Glücklicherweise ist es nicht so schwer die Wetter-Vorhersage auf der eigenen TYPO3-Website anzuzeigen und dazu eigene Symbole zu verwenden.
Man kann natürlich extra eine kleine TYPO3-Extension schreiben, ist aber unnötig, da ja keine Daten (in der Datenbank) gespeichert werden müssen. Es genügt, wenn man eine sogenannte User-Function schreibt und diese per Marker in die Website einfügt. Unsere User-Function ist auch schon so vorbereitet, dass man eigene Wetter-Icon verwenden und die Location einfach im TYPOscript editieren kann, aber dazu später mehr.
Schritt 1: Marker in HTML-Template einfügen
An die Stelle wo später das Wetter-Modul ausgegeben werden soll, wird ein Marker im Template angelegt, z.B.:
<div>###WETTER###</div> |
Schritt 2: Marker im TYPOscript enbinden
In dem Tutorial verwenden wir ein klassisches TYPO3 Marker-Template und fügen den Marker im page-Objekt hinzu, in meinem Fall:
page.10 = TEMPLATE page.10 { ... marks { WETTER < lib.weather ... } } |
Schritt 3: Die PHP User-Funktion für die Google-Wetter API Abfrage
Zwingend notwendig für das Einbinden einer eigenen PHP-Datei über eine User-Function in TYPO3 sind folgende 3 Punkte:
• Dateiname beginnt mit „user_“
• Die PHP-Datei enthält eine Klasse die mit „user_“ beginnt
• die PHP-Funktion übergibt mit „return“ die Inhalte an TYPO3
Schritt 4: User-Function in TYPO3 einbinden
Die User-Function wird jetzt in TYPO3 eingebunden und über die Variablen konfiguriert
/** * lib.weather * @description: wetter ausgabe in html */ includeLibs.weather = fileadmin/scripts/user_weather.php lib.weather = USER lib.weather { userFunc = user_weather->get poi = Hamburg path = /fileadmin/templates/img/wetter-icons/ png = 1 } |
Im cObject USER können wie schon erwähnt Variablen definiert werden. Für die Location, für den das Wetter über die Weather-API abgerufen werden soll, füllt man die Variable „poi“ mit dem Ort, in unserem Fall „Hamburg“. Zudem kann man in „path“ den Pfad zu den eigenen Wetter-Symbolen angeben. Ist die Variable nicht gefüllt, werden die Standard Wetter-Symbole von Google verwendet.
Folgende Wetter-Zustände kennt die Google Wetter API (Quelle: www.web-spirit.de):
chance_of_rain sunny mostly_sunny partly_cloudy mostly_cloudy chance_of_storm showers rain chance_of_snow cloudy mist storm thunderstorm chance_of_tstorm sleet snow icy dust fog smoke haze flurries |
Wir haben unsere eigenen Wetter-Icons als PNG-Grafiken mit Alpha-Transparenz abgespeichert. In diesem Fall muss die Variable „png“ auf 1 gesetzt werden, weil dann die Wetter-Dateiendungen von GIF auf PNG in der user_weather.php umgeschrieben wird.
Ein schönes Wetter-Icon Set findet man bei graphicriver.net.
Demo-Screenshot
Nachdem das fertige Wetter-Modul mit CSS gestaltet wurde, sieht es so aus:
Download
PHP-Datei als TXT-Version zum Download: user_weather.php.txt
Hinweis
Da es keine offizielle Google API ist, ist es nicht sicher wie lange die API noch zur Verfügung steht und ob die Verwendung für die eigene Website erlaubt ist. Bisher sind im Web dazu weder positive noch negative Meinungen zu finden. Wer dazu mehr weiß, kann gerne einen Kommentar posten. Habt ihr die Google Weather API schon in Projekten eingesetzt? Wer Verbesserungsvorschläge für die PHP-Userfunc hat, bitte kommentieren! Ich hatte dabei Unterstützung von Anja, danke dafür!
Markus Günther am 13. Dezember 2011 um 00:49
Marc Fell am 13. Dezember 2011 um 23:01
Änna am 30. Juli 2012 um 17:01
nano am 24. Mai 2014 um 02:41
