Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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.

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

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

Geschrieben von kulturbanause Team

thumb

Beiträge bei denen das kulturbanause-Team als Autor angegeben ist, wurden von mehreren Personen in Zusammenarbeit geschrieben. Wir nutzen diesen Blog als öffentliches Archiv und um euch bei alltäglichen Problemen im Zusammenhang mit der Erstellung von Websites zu helfen. Neben diesem Blog bieten wir auch Trainings wie Schulungen, Bücher oder Videos an. Und natürlich unterstützen wir auch gerne im Rahmen unserer Agenturtätigkeit.

Feedback & Ergänzungen – 2 Kommentare

  1. Felix Zemmel
    schrieb am 24.10.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/

    Antworten
  2. Samuel Heinz
    schrieb am 17.10.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.

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →