kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Das aktuelle Wetter mit Hilfe der Yahoo Weather API auf der Website anzeigen

Auf einigen Websites bietet es sich an, das aktuelle Wetter für einen bestimmten Standort anzuzeigen. Open-Air-Veranstaltungen oder Urlaubsorte sind typische Beispiele für den Einsatz einer solchen Wetter-Anzeige. Mit Hilfe der »Yahoo Weather API« lässt sich das Wetter unkompliziert anzeigen. Den notwendigen Code zur Integration inkl. der Übersetzung des jeweiligen Wetterberichts ins Deutsche archivieren wir in diesem Beitrag.

Workshops und Seminare von kulturbanause

Unsere Seminar-Termine für 2018 sind online!

Visual Prototyping, Responsive Design, WordPress, Adobe Muse, HTML & CSS, Website-Optimierung …

Jetzt Frühbucher-Preise sichern!

Wetter-Anzeige inkl. Übersetzungen

Der folgendes Code gibt euch die aktuelle Temperatur in °C und die Wetterbeschreibung in deutscher Sprache aus. Die Übersetzungen können auf Wunsch angepasst werden.

<?php
$BASE_URL = "http://query.yahooapis.com/v1/public/yql";

// »DEINESTANDORTID« muss mit der korrekten ID ausgetauscht werden
$yql_query = "select * from weather.forecast where woeid=DEINESTANDORTID";
$yql_query_url = $BASE_URL . "?q=" . urlencode($yql_query) . "&format=json";
$json = file_get_contents($yql_query_url);

//PHP Objekt aus JSON konvertieren
$phpObj = json_decode($json);

if($json != "") {
  $xml = $phpObj;
  $today = $xml->query->results->channel->item->condition;
  echo "<i class='icon-".$today->code."'></i>";
  echo "<p><span class='temp'>".fToC($today->temp)." &deg;C </span>";
  echo "<span class='currently'>".lang($today->text)."</span></p>";
} else {
  echo "Wetter konnte nicht geladen werden";
} 

// Umrechnen der Temperatur von Fahrenheit in Celsius
function fToC($i){
  return round(($i-32)/1.8 , 1);
}

// Übersetzen der englischen Begriffe ins Deutsche
function lang($data){
  if($data == 'AM Clouds/PM Sun') $data = 'vormittags bewölkt/nachmittags sonnig';
  elseif($data == 'AM Drizzle') $data = 'vormittags Nieselregen';
  elseif($data == 'AM Drizzle/Wind') $data = 'vorm. Nieselregen/Wind';
  elseif($data == 'AM Fog/PM Clouds') $data = 'vormittags Nebel/nachmittags bewölkt';
  elseif($data == 'AM Fog/PM Sun') $data = 'vormittags Nebel, nachmittags sonnig';
  elseif($data == 'AM Ice') $data = 'vorm. Eis';
  elseif($data == 'AM Light Rain') $data = 'vormittags leichter Regen';
  elseif($data == 'AM Light Rain/Wind') $data = 'vorm. leichter Regen/Wind';
  elseif($data == 'AM Light Snow') $data = 'vormittags leichter Schneefall';
  elseif($data == 'AM Rain') $data = 'vormittags Regen';
  elseif($data == 'AM Rain/Snow Showers') $data = 'vorm. Regen-/Schneeschauer';
  elseif($data == 'AM Rain/Snow') $data = 'vormittags Regen/Schnee';
  elseif($data == 'AM Rain/Snow/Wind') $data = 'vorm. Regen/Schnee/Wind';
  elseif($data == 'AM Rain/Wind') $data = 'vorm. Regen/Wind';
  elseif($data == 'AM Showers') $data = 'vormittags Schauer';
  elseif($data == 'AM Showers/Wind') $data = 'vormittags Schauer/Wind';
  elseif($data == 'AM Snow Showers') $data = 'vormittags Schneeschauer';
  elseif($data == 'AM Snow') $data = 'vormittags Schnee';
  elseif($data == 'AM Thundershowers') $data = 'vorm. Gewitterschauer';
elseif($data == 'Blowing Snow') $data = 'Schneetreiben';
  elseif($data == 'Clear') $data = 'Klar';
  elseif($data == 'Clear/Windy') $data = 'Klar/Windig';
  elseif($data == 'Clouds Early/Clearing Late') $data = 'früh Wolken/später klar';
  elseif($data == 'Cloudy') $data = 'Bewölkt';
  elseif($data == 'Cloudy/Wind') $data = 'Bewölkt/Wind';
  elseif($data == 'Cloudy/Windy') $data = 'Wolkig/Windig';
  elseif($data == 'Drifting Snow') $data = 'Schneetreiben';
  elseif($data == 'Drifting Snow/Windy') $data = 'Schneetreiben/Windig';
  elseif($data == 'Drizzle Early') $data = 'früh Nieselregen';
  elseif($data == 'Drizzle Late') $data = 'später Nieselregen';
  elseif($data == 'Drizzle') $data = 'Nieselregen';
  elseif($data == 'Drizzle/Fog') $data = 'Nieselregen/Nebel';
  elseif($data == 'Drizzle/Wind') $data = 'Nieselregen/Wind';
  elseif($data == 'Drizzle/Windy') $data = 'Nieselregen/Windig';
  elseif($data == 'Fair') $data = 'Heiter';
  elseif($data == 'Fair/Windy') $data = 'Heiter/Windig';
  elseif($data == 'Few Showers') $data = 'vereinzelte Schauer';
  elseif($data == 'Few Showers/Wind') $data = 'vereinzelte Schauer/Wind';
  elseif($data == 'Few Snow Showers') $data = 'vereinzelt Schneeschauer';
  elseif($data == 'Fog Early/Clouds Late') $data = 'früh Nebel, später Wolken';
  elseif($data == 'Fog Late') $data = 'später neblig';
  elseif($data == 'Fog') $data = 'Nebel';
  elseif($data == 'Fog/Windy') $data = 'Nebel/Windig';
  elseif($data == 'Foggy') $data = 'neblig';
  elseif($data == 'Freezing Drizzle') $data = 'gefrierender Nieselregen';
  elseif($data == 'Freezing Drizzle/Windy') $data = 'gefrierender Nieselregen/Windig';
  elseif($data == 'Freezing Rain') $data = 'gefrierender Regen';
  elseif($data == 'Haze') $data = 'Dunst';
  elseif($data == 'Heavy Drizzle') $data = 'starker Nieselregen';
  elseif($data == 'Heavy Rain Shower') $data = 'Starker Regenschauer';
  elseif($data == 'Heavy Rain') $data = 'Starker Regen';
  elseif($data == 'Heavy Rain/Wind') $data = 'starker Regen/Wind';
  elseif($data == 'Heavy Rain/Windy') $data = 'Starker Regen/Windig';
  elseif($data == 'Heavy Snow Shower') $data = 'Starker Schneeschauer';
  elseif($data == 'Heavy Snow') $data = 'Starker Schneefall';
  elseif($data == 'Heavy Snow/Wind') $data = 'Starker Schneefall/Wind';
  elseif($data == 'Heavy Thunderstorm') $data = 'Schweres Gewitter';
  elseif($data == 'Heavy Thunderstorm/Windy') $data = 'Schweres Gewitter/Windig';
  elseif($data == 'Ice Crystals') $data = 'Eiskristalle';
  elseif($data == 'Ice Late') $data = 'später Eis';
  elseif($data == 'Isolated T-storms') $data = 'Vereinzelte Gewitter';
  elseif($data == 'Isolated Thunderstorms') $data = 'Vereinzelte Gewitter';
  elseif($data == 'Light Drizzle') $data = 'Leichter Nieselregen';
  elseif($data == 'Light Freezing Drizzle') $data = 'Leichter gefrierender Nieselregen';
  elseif($data == 'Light Freezing Rain') $data = 'Leichter gefrierender Regen';
  elseif($data == 'Light Freezing Rain/Fog') $data = 'Leichter gefrierender Regen/Nebel';
  elseif($data == 'Light Rain Early') $data = 'anfangs leichter Regen';
  elseif($data == 'Light Rain') $data = 'Leichter Regen';
  elseif($data == 'Light Rain Late') $data = 'später leichter Regen';
  elseif($data == 'Light Rain Shower') $data = 'Leichter Regenschauer';
  elseif($data == 'Light Rain Shower/Fog') $data = 'Leichter Regenschauer/Nebel';
  elseif($data == 'Light Rain Shower/Windy') $data = 'Leichter Regenschauer/windig';
  elseif($data == 'Light Rain with Thunder') $data = 'Leichter Regen mit Gewitter';
  elseif($data == 'Light Rain/Fog') $data = 'Leichter Regen/Nebel';
  elseif($data == 'Light Rain/Freezing Rain') $data = 'Leichter Regen/Gefrierender Regen';
  elseif($data == 'Light Rain/Wind Early') $data = 'früh leichter Regen/Wind';
  elseif($data == 'Light Rain/Wind Late') $data = 'später leichter Regen/Wind';
  elseif($data == 'Light Rain/Wind') $data = 'leichter Regen/Wind';
  elseif($data == 'Light Rain/Windy') $data = 'Leichter Regen/Windig';
  elseif($data == 'Light Sleet') $data = 'Leichter Schneeregen';
  elseif($data == 'Light Snow Early') $data = 'früher leichter Schneefall';
  elseif($data == 'Light Snow Grains') $data = 'Leichter Schneegriesel';
  elseif($data == 'Light Snow Late') $data = 'später leichter Schneefall';
  elseif($data == 'Light Snow Shower') $data = 'Leichter Schneeschauer';
  elseif($data == 'Light Snow Shower/Fog') $data = 'Leichter Schneeschauer/Nebel';
  elseif($data == 'Light Snow with Thunder') $data = 'Leichter Schneefall mit Gewitter';
  elseif($data == 'Light Snow') $data = 'Leichter Schneefall';
  elseif($data == 'Light Snow/Fog') $data = 'Leichter Schneefall/Nebel';
  elseif($data == 'Light Snow/Freezing Rain') $data = 'Leichter Schneefall/Gefrierender Regen';
  elseif($data == 'Light Snow/Wind') $data = 'Leichter Schneefall/Wind';
  elseif($data == 'Light Snow/Windy') $data = 'Leichter Schneeschauer/Windig';
  elseif($data == 'Light Snow/Windy/Fog') $data = 'Leichter Schneefall/Windig/Nebel';
  elseif($data == 'Mist') $data = 'Nebel';
  elseif($data == 'Mostly Clear') $data = 'überwiegend Klar';
  elseif($data == 'Mostly Cloudy') $data = 'Überwiegend bewölkt';
  elseif($data == 'Mostly Cloudy/Wind') $data = 'meist bewölkt/Wind';
  elseif($data == 'Mostly Sunny') $data = 'Überwiegend sonnig';
  elseif($data == 'Partial Fog') $data = 'teilweise Nebel';
  elseif($data == 'Partly Cloudy') $data = 'Teilweise bewölkt';
  elseif($data == 'Partly Cloudy/Wind') $data = 'teilweise bewölkt/Wind';
  elseif($data == 'Patches of Fog') $data = 'Nebelfelder';
  elseif($data == 'Patches of Fog/Windy') $data = 'Nebelfelder/Windig';
  elseif($data == 'PM Drizzle') $data = 'nachm. Nieselregen';
  elseif($data == 'PM Fog') $data = 'nachmittags Nebel';
  elseif($data == 'PM Light Snow') $data = 'nachmittags leichter Schneefall';
  elseif($data == 'PM Light Rain') $data = 'nachmittags leichter Regen';
  elseif($data == 'PM Light Rain/Wind') $data = 'nachm. leichter Regen/Wind';
  elseif($data == 'PM Light Snow/Wind') $data = 'nachm. leichter Schneefall/Wind';
  elseif($data == 'PM Rain') $data = 'nachmittags Regen';
  elseif($data == 'PM Rain/Snow Showers') $data = 'nachmittags Regen/Schneeschauer';
  elseif($data == 'PM Rain/Snow') $data = 'nachmittags Regen/Schnee';
  elseif($data == 'PM Rain/Wind') $data = 'nachm. Regen/Wind';
  elseif($data == 'PM Showers') $data = 'nachmittags Schauer';
  elseif($data == 'PM Showers/Wind') $data = 'nachmittags Schauer/Wind';
  elseif($data == 'PM Snow Showers') $data = 'nachmittags Schneeschauer';
  elseif($data == 'PM Snow Showers/Wind') $data = 'nachm. Schneeschauer/Wind';
  elseif($data == 'PM Snow') $data = 'nachm. Schnee';
  elseif($data == 'PM T-storms') $data = 'nachmittags Gewitter';
  elseif($data == 'PM Thundershowers') $data = 'nachmittags Gewitterschauer';
  elseif($data == 'PM Thunderstorms') $data = 'nachm. Gewitter';
  elseif($data == 'Rain and Snow') $data = 'Schneeregen';
  elseif($data == 'Rain and Snow/Windy') $data = 'Regen und Schnee/Windig';
  elseif($data == 'Rain/Snow Showers/Wind') $data = 'Regen/Schneeschauer/Wind';
  elseif($data == 'Rain Early') $data = 'früh Regen';
  elseif($data == 'Rain Late') $data = 'später Regen';
  elseif($data == 'Rain Shower') $data = 'Regenschauer';
  elseif($data == 'Rain Shower/Windy') $data = 'Regenschauer/Windig';
  elseif($data == 'Rain to Snow') $data = 'Regen, in Schnee übergehend';
  elseif($data == 'Rain') $data = 'Regen';
  elseif($data == 'Rain/Snow Early') $data = 'früh Regen/Schnee';
  elseif($data == 'Rain/Snow Late') $data = 'später Regen/Schnee';
  elseif($data == 'Rain/Snow Showers Early') $data = 'früh Regen-/Schneeschauer';
  elseif($data == 'Rain/Snow Showers Late') $data = 'später Regen-/Schneeschnauer';
  elseif($data == 'Rain/Snow Showers') $data = 'Regen/Schneeschauer';
  elseif($data == 'Rain/Snow') $data = 'Regen/Schnee';
  elseif($data == 'Rain/Snow/Wind') $data = 'Regen/Schnee/Wind';
  elseif($data == 'Rain/Thunder') $data = 'Regen/Gewitter';
  elseif($data == 'Rain/Wind Early') $data = 'früh Regen/Wind';
  elseif($data == 'Rain/Wind Late') $data = 'später Regen/Wind';
  elseif($data == 'Rain/Wind') $data = 'Regen/Wind';
  elseif($data == 'Rain/Windy') $data = 'Regen/Windig';
  elseif($data == 'Scattered Showers') $data = 'vereinzelte Schauer';
  elseif($data == 'Scattered Showers/Wind') $data = 'vereinzelte Schauer/Wind';
  elseif($data == 'Scattered Snow Showers') $data = 'vereinzelte Schneeschauer';
  elseif($data == 'Scattered Snow Showers/Wind') $data = 'vereinzelte Schneeschauer/Wind';
  elseif($data == 'Scattered T-storms') $data = 'vereinzelte Gewitter';
  elseif($data == 'Scattered Thunderstorms') $data = 'vereinzelte Gewitter';
  elseif($data == 'Shallow Fog') $data = 'flacher Nebel';
  elseif($data == 'Showers') $data = 'Schauer';
  elseif($data == 'Showers Early') $data = 'früh Schauer';
  elseif($data == 'Showers Late') $data = 'später Schauer';
  elseif($data == 'Showers in the Vicinity') $data = 'Regenfälle in der Nähe';
  elseif($data == 'Showers/Wind') $data = 'Schauer/Wind';
  elseif($data == 'Sleet and Freezing Rain') $data = 'Schneeregen und gefrierender Regen';
  elseif($data == 'Sleet/Windy') $data = 'Schneeregen/Windig';
  elseif($data == 'Snow Grains') $data = 'Schneegriesel';
  elseif($data == 'Snow Late') $data = 'später Schnee';
  elseif($data == 'Snow Shower') $data = 'Schneeschauer';
  elseif($data == 'Snow Showers Early') $data = 'früh Schneeschauer';
  elseif($data == 'Snow Showers Late') $data = 'später Schneeschauer';
  elseif($data == 'Snow Showers') $data = 'Schneeschauer';
  elseif($data == 'Snow Showers/Wind') $data = 'Schneeschauer/Wind';
  elseif($data == 'Snow to Rain') $data = 'Schneeregen';
  elseif($data == 'Snow') $data = 'Schneefall';
  elseif($data == 'Snow/Wind') $data = 'Schneefall/Wind';
  elseif($data == 'Snow/Windy') $data = 'Schnee/Windig';
  elseif($data == 'Squalls') $data = 'Böen';
  elseif($data == 'Sunny') $data = 'Sonnig';
  elseif($data == 'Sunny/Wind') $data = 'Sonnig/Wind';
  elseif($data == 'Sunny/Windy') $data = 'Sonnig/Windig';
  elseif($data == 'T-showers') $data = 'Gewitterschauer';
  elseif($data == 'Thunder in the Vicinity') $data = 'Gewitter in der Umgebung';
  elseif($data == 'Thunder') $data = 'Gewitter';
  elseif($data == 'Thundershowers Early') $data = 'früh Gewitterschauer';
  elseif($data == 'Thundershowers') $data = 'Gewitterschauer';
  elseif($data == 'Thunderstorm') $data = 'Gewitter';
  elseif($data == 'Thunderstorm/Windy') $data = 'Gewitter/Windig';
  elseif($data == 'Thunderstorms Early') $data = 'früh Gewitter';
  elseif($data == 'Thunderstorms Late') $data = 'später Gewitter';
  elseif($data == 'Thunderstorms') $data = 'Gewitter';
  elseif($data == 'Unknown Precipitation') $data = 'Niederschlag';
  elseif($data == 'Unknown') $data = 'unbekannt';
  elseif($data == 'Wintry Mix') $data = 'Winterlicher Mix';
  else $data = $data;
  return $data;
}
?>

Standort über »woeid« angeben

Den Standort gibt man mit Hilfe der woeid (Where On Earth ID) an. Diese Standort-ID kann man z. B. hier erfahren. Im oben gezeigten Code müsst ihr die woeid an der Stelle eintragen wo DEINESTANDORTID als Platzhalter eingesetzt ist.

Styling der Wetter-Icons

Zusätzlich könnt ihr ein Wetter-Icon über CSS-Kassen hinzufügen. Im obigen Code ist die Passage bereits enthalten. Die Wetter-Icons könnten z. B. mit Hilfe eines Icon-Fonts realisiert werden. In diesem Beispiel greifen wir auf einen Open Source-Webfont für die Darstellung von Wetter-Icons zurück.

wetter-icons

 

@font-face {  font-family: 'weather';  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot');  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'),  url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.woff') format('woff'),  url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.ttf') format('truetype'),  url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg');  font-weight: normal;  font-style: normal; } i {  font-family: 'weather';  font-size: 10em;  display: block;  font-weight: normal;  font-style: normal;  text-transform: none;  line-height: 100%; } .icon-0:before { content: ":"; }
.icon-1:before { content: "p"; }
.icon-2:before { content: "S"; }
.icon-3:before { content: "Q"; }
.icon-4:before { content: "S"; }
.icon-5:before { content: "W"; }
.icon-6:before { content: "W"; }
.icon-7:before { content: "W"; }
.icon-8:before { content: "W"; }
.icon-9:before { content: "I"; }
.icon-10:before { content: "W"; }
.icon-11:before { content: "I"; }
.icon-12:before { content: "I"; }
.icon-13:before { content: "I"; }
.icon-14:before { content: "I"; }
.icon-15:before { content: "W"; }
.icon-16:before { content: "I"; }
.icon-17:before { content: "W"; }
.icon-18:before { content: "U"; }
.icon-19:before { content: "Z"; }
.icon-20:before { content: "Z"; }
.icon-21:before { content: "Z"; }
.icon-22:before { content: "Z"; }
.icon-23:before { content: "Z"; }
.icon-24:before { content: "E"; }
.icon-25:before { content: "E"; }
.icon-26:before { content: "3"; }
.icon-27:before { content: "a"; }
.icon-28:before { content: "A"; }
.icon-29:before { content: "a"; }
.icon-30:before { content: "A"; }
.icon-31:before { content: "6"; }
.icon-32:before { content: "1"; }
.icon-33:before { content: "6"; }
.icon-34:before { content: "1"; }
.icon-35:before { content: "W"; }
.icon-36:before { content: "1"; }
.icon-37:before { content: "S"; }
.icon-38:before { content: "S"; }
.icon-39:before { content: "S"; }
.icon-40:before { content: "M"; }
.icon-41:before { content: "W"; }
.icon-42:before { content: "I"; }
.icon-43:before { content: "W"; }
.icon-44:before { content: "a"; }
.icon-45:before { content: "S"; }
.icon-46:before { content: "U"; }
.icon-47:before { content: "S"; }

Beispiel anschauen

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Das könnte dich auch interessieren

2 Kommentare

  1. Samuel Heinz

    Verfasst am 17. Oktober 2016 um 14:01 Uhr.

    Da die Google Weather API nicht mehr unterstützt wird habe ich ebenfalls auf die Yahoo Weather API umgestellt.

    Ich würde dir empfehlen bei den deutschen Labels auf die PHP-Funktion Switch mit entsprechenden Cases zu setzen. Die Lesbarkeit vom Code ist dadurch deutlich besser und von der Performance macht es keinen großen Unterschied.

  2. Felix Zemmel

    Verfasst am 24. Oktober 2016 um 15:00 Uhr.

    Gut und bis 1.000 Impressions pro Tag kostenlos ist auch die API von Dark Sky: https://darksky.net/dev/

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.