PHP Wetter auslesen – Wetterdaten mit Openweathermap Api in eigene Webseite einbinden

  • HTML
  • JS
  • CSS
// ABFRAGE VON GEOLOCATION
if (navigator.geolocation) {
    jQuery('div#weather').html('

Geolocation funktioniert :)

Warte ein paar Sekunden. Die Daten werden gleich angezeigt. Versprochen :)

'); function position(currentPosition) { var coords = currentPosition.coords; var lat = coords.latitude; var lng = coords.longitude; weatherApi(lat, lng); }; } else { jQuery('div#weather').html('

Geolocation funktioniert nicht :(

'); var lat = '52.52'; var lng = '13.39'; weatherApi(lat, lng); } navigator.geolocation.getCurrentPosition(position); // FUNCTION function weatherApi (newPositionLat = null , newPositionLng = null ) { // AUSLESEN VON LAT UND LNG if ( newPositionLat == null && newPositionLng == null ) { var newPositionLat = '52.5200066'; var newPositionLng = '13.404954'; } // API URL var apiUrl = 'https://api.openweathermap.org/data/2.5/weather?lat=' + newPositionLat + '&lon=' + newPositionLng + '&units=metric&APPID=2b2b2817a56f2bbd9b1267cc202a6ba3'; // WETTER API jQuery.ajax ({ url: apiUrl, type: 'GET', dataType: 'jsonp', success: function(data) { // KOORDINATEN var coordLat = data.coord.lat; var coordLng = data.coord.lon; // WETTER var weatherId = data.weather[0].id; var weatherMain = data.weather[0].main; var weatherDesc = data.weather[0].description; var weatherIcon = ''+weatherDesc+''; var weatherBg = data.weather[0].icon; // EXAKT if ( weatherBg == 800 ) { // klares wetter jQuery('div#weatherBg').css('background-color', 'yellow'); } else if ( weatherBg == 951 ) { // ruhe jQuery('div#weatherBg').css('background-color', 'blue'); } else if ( weatherBg == 952 ) { // leichte-briese jQuery('div#weatherBg').css('background-color', 'AliceBlue '); } else if ( weatherBg == 954 ) { // maessige-briese jQuery('div#weatherBg').css('background-color', 'AntiqueWhite '); } else if ( weatherBg == 955 ) { // frische-briese jQuery('div#weatherBg').css('background-color', 'Aqua'); } else if ( weatherBg == 956 ) { // starke-briese jQuery('div#weatherBg').css('background-color', 'Aquamarine '); } else if ( weatherBg == 957 ) { // starker-wind jQuery('div#weatherBg').css('background-color', 'Azure'); } else if ( weatherBg == 958 ) { // sturm jQuery('div#weatherBg').css('background-color', 'BlueViolet'); } else if ( weatherBg == 959 ) { // starker-sturm jQuery('div#weatherBg').css('background-color', 'Brown'); } else if ( weatherBg == 959 ) { // starker-sturm jQuery('div#weatherBg').css('background-color', 'BurlyWood'); } else if ( weatherBg == 960 ) { // sturm jQuery('div#weatherBg').css('background-color', 'CadetBlue'); } else if ( weatherBg == 961 ) { // heftiger-sturm jQuery('div#weatherBg').css('background-color', 'Chartreuse'); } else if ( weatherBg == 962 ) { // hurrikan jQuery('div#weatherBg').css('background-color', 'Coral'); } // RANGE else if ( weatherBg >= 900 && weatherBg <= 950 ) { // extrem jQuery('div#weatherBg').css('background-color', 'DarkBlue'); } else if ( weatherBg >= 801 && weatherBg <= 899 ) { // wolkig jQuery('div#weatherBg').css('background-color', 'DarkGrey'); } else if ( weatherBg >= 701 && weatherBg <= 799 ) { // atmosphäre jQuery('div#weatherBg').css('background-color', 'DarkTurquoise'); } else if ( weatherBg >= 600 && weatherBg <= 700 ) { // schnee jQuery('div#weatherBg').css('background-color', 'GhostWhite'); } else if ( weatherBg >= 500 && weatherBg <= 599 ) { // regen jQuery('div#weatherBg').css('background-color', 'LightSteelBlue'); } else if ( weatherBg >= 300 && weatherBg <= 499 ) { // nieselregen jQuery('div#weatherBg').css('background-color', 'LightSkyBlue'); } else if ( weatherBg >= 200 && weatherBg <= 299 ) { // gewitter jQuery('div#weatherBg').css('background-color', 'MidnightBlue'); } // BASE var baseData = data.base; // TEMP var mainTemp = data.main.temp; var mainPressure = data.main.pressure; var mainHumidity = data.main.humidity; var mainTempMin = data.main.temp_min; var mainTempMax = data.main.temp_max; // VISIBILITY var visibility = data.visibility; // WIND var windSpeed = data.wind.speed; var windDeg = data.wind.deg; // CLOUDS var clouds = data.clouds.all; // DT var dt = data.dt; // SYS var sysType = data.sys.type; var sysId = data.sys.id; var sysMessage = data.sys.message; var sysCountry = data.sys.country; var sysSunrise = data.sys.sunrise; var sysSunset = data.sys.sunset; // ID var id = data.id; // NAME var name = data.name; // COD var cod = data.cod; var coor = '

Koordinaten

  • Lat: ' + coordLat + '
  • Lng: ' + coordLng + '
'; var weather = '

Wetter

  • ID: ' + weatherId + '
  • Main: ' + weatherMain + '
  • Desc: ' + weatherDesc + '
  • icon: ' + weatherIcon + '
'; var base = '

Base

  • Base: ' + baseData + '
'; var temperatur = '

Temperatur

  • Main Temp: ' + mainTemp + '
  • Druck: ' + mainPressure + '
  • Feuchtigkeit: ' + mainHumidity + '
  • min. Temp.: ' + mainTempMin + '
  • Max. Temp.: ' + mainTempMax + '
'; var visibility = '

Sichtweite

  • Sichtweite: ' + visibility + '
'; var wind = '

Wind

  • Wind Speed: ' + windSpeed + '
  • Wind Deg: ' + windDeg + '
'; var clouds = '

Wolken

  • Wolken: ' + clouds + '
'; var dt = '

DT

  • Dt: ' + dt + '
'; var system = '

Base

  • Typ: ' + sysType + '
  • ID: ' + sysId + '
  • Message: ' + sysMessage + '
  • Land: ' + sysCountry + '
  • Sunrise: ' + sysSunrise + '
  • Sunset: ' + sysSunset + '
'; var id = '

ID

  • ID: ' + id + '
'; var name = '

Name

  • Name: ' + name + '
'; var cod = '

Cod

  • Cod: ' + cod + '
'; // OUTPUT jQuery('div#weather').html( coor + weather + base + temperatur + visibility + wind + clouds + dt + system + id + name + cod ); console.log(data); } }); }
div#weather {
	padding: 20px;
}
div#weather h2 {
	padding: 0 0 10px;
	font-size: 16px;
}

Es gibt mehrere Möglichkeiten das aktuelle Wetter auf der eigenen Webseite einzubinden. Entweder mit einem Plugin, einem Widget oder einer selbstgeschriebenen Funktion.

Ich möchte Euch zeigen, wie Ihr mittels der openweathermap.org API und der Standortabfrage im Browsers das aktuelle Wetter anhand der Latitude und der Longitude auslest. Zudem sollen anhand der Rückgabewerte von openweathermap das Hintergrundbild der Wetterlage angepasst werden.

Lasst uns beginnen!

Als erstes erstellt Ihr ein Element, in welches wir später die kompletten Daten laden werden.

Erstellen einer kostenlosen openweathermap.org API

Als nächstes erstellen wir eine kostenlose Wetter API bei openweathermap.org.

  1. Registriere Dich dazu kostenlos bei openweathermap.com
  2. Kopiere deine APPID aus der E-Mail, die du von openweathermap.org erhalten hast

Nun könnten wir beispielsweise schon das Wetter von Berlin auslesen. Kopiert dazu einfach die folgende Zeile in Euren Browser, fügt Eure APPID ein und klickt Enter.

https://api.openweathermap.org/data/2.5/weather?q=berlin&APPID=DEINEAPPID

Keine Produkte gefunden.

Das gleiche funktioniert auch mit der Latitude und der Longitude, mit der wir im weiteren Verlauf auch arbeiten werden. Um die Wetterdaten von Berlin zu bekommen nutzen wir daher den folgenden Link. Dieser sollte die gleichen Werte zurückgeben, wie der vorherige Link.

https://api.openweathermap.org/data/2.5/weather?lat=52.52&lon=13.39&units=metric&APPID=DEINEAPPID

Diese Zeile benötigen wir etwas später. Als nächste müssen wir die Geolocation mittels des Browsers ermitteln.

Abfrage der Geolocation mittels des Browsers

Zunächst erstellen wir eine Abfrage und prüfen erst einmal, ob unser Browser überhaupt die geolocation zulässt. Um einen optischen output zu bekommen nutzen wir unser Div mit der ID id="weather", welches wir bereits angelegt haben und laden in diesem Element mittels jQuery unser Ergebnis. Sollte Euch „Geolocation funktioniert“ angezeigt werden können wir fortfahren.

if (navigator.geolocation) {
	jQuery('div#weather').html('

Geolocation funktioniert :)

'); } else { jQuery('div#weather').html('

Geolocation funktioniert nicht :(

'); }

Als nächstes lesen wir die Koordinaten mittels der function position(currentPosition) aus. Die Latitude und Longitude die uns übermittelt werden speichern wir der Einfachheit in einzelne Variablen und übermitteln diese unser weatherApi(lat, lng);, zu der wir gleich kommen werden. Dieser Funktion übergeben wir die mitgeteilten Werte lat und lng. Zudem legen wir zur Sicherheit legen in der else-Schleife Standardwerte fest, falls die Übermittlung der Geolocation verhindert wird oder anderweitig nicht funktioniert. Der Code sollte dann wie folgt aussehen:

if (navigator.geolocation) {
	jQuery('div#weather').html('

Geolocation funktioniert :)

'); function position(currentPosition) { var coords = currentPosition.coords; var lat = coords.latitude; var lng = coords.longitude; weatherApi(lat, lng); }; } else { jQuery('div#weather').html('

Geolocation funktioniert nicht :(

'); var lat = '52.52'; var lng = '13.39'; weatherApi(lat, lng); }

Übrigens: Es gibt verschiedene Schritte der Standortgenauigkeit. Im folgenden findet Ihr die Schritte zur Standortgenauigkeit, die der Browser aufsteigend der Genauigkeit als Wert zurückgibt:

  1. IP-Adresse: Die Daten des Vermittlungsknoten des Providers werden verwendet. Hierbei kann es zu Abweichungen von mehr als 50 Kilometer kommen.
  2. WLAN-Netzwerke: Im Rahmen von Google-StreetView wurden in Ballungsgebieten alle WLAN-Netze erfasst. Daher kann die Genauigkeit bis zu 10 Meter betragen.
  3. Funk-Signale: Durch Trilateration kann die Genauigkeit auf 20 – 200 Meter genau sein.
  4. GPS: Durch enableHighAccuracy können Genauigkeiten von 5 – 20 Meter erreicht werden.

Die weatherAPI Funktion

Als nächstes legen wir eine function an, die erst geladen werden soll, wenn der Browser die Latitude und Longitude übermittel hat. Standardmäßig leeren wir die Parameter newPositionLat und newPositionLng.

function weatherApi (newPositionLat = null , newPositionLng = null ) {
}

Als erstes Frage ich in der Funktion noch einmal ab, ob wirklich Werte übermittelt wurden. Dies ist zwar „doppelt-gemoppelt“ aber sicherheitshalber lege ich „Standardwerte“ fest, falls es zu einem Übermittlungsfehler gekommen ist. In meinem Fall sind es Standardmäßig immer die Latitude und die Longitude von Berlin.

if ( newPositionLat == null && newPositionLng == null  ) {
	var newPositionLat	=	'52.5200066';
	var newPositionLng	=	'13.404954';	
}

Im nächsten Schritt meiner watherAPI Funktion definiere ich die dynamische URL, die ich später in meinem Ajax verwenden werde und Speicher sie wieder in eine variable. Diese nenne ich apiURL.

// API URL
var apiUrl = 'https://api.openweathermap.org/data/2.5/weather?lat=' + newPositionLat + '&lon=' + newPositionLng + '&units=metric&APPID=DEINE APPID';

Keine Produkte gefunden.

Nun werden endlich die Daten von openweathermap.org, anhand der übertragenden Werte vom Browser, ermittelt. Dazu nutze ich Ajax. Im Parameter url lade ich die zuvor erstellte apiURL.

$.ajax ({
	url: apiUrl,
	type: 'GET',
	dataType: 'jsonp',
	success: function(data) {
		console.log(data);
	}
});

Solltet Ihr alles richtig gemacht haben, dann solltet Ihr im Inspektor Eures Browser etwas ähnliches sehen.

wetterdaten mit api auf in eigene webseite einbinden

Auslesen von data

Data gibt eine Vielzahl von Werten zurück. Ob man jeden einzelnen braucht, dass kann man für sich selbst entscheiden. Aber im folgenden habe ich Euch eine Liste zusammengestellt, die Euch alle Werte in variablen speichert.

// KOORDINATEN
var coordLat			=	data.coord.lat;
var coordLng			=	data.coord.lon;

// WETTER
var weatherId			=	data.weather[0].id;
var weatherMain			=	data.weather[0].main;
var weatherDesc			=	data.weather[0].description;
var weatherIcon			=	'' + weatherDesc + '';
var weatherBg			=	data.weather[0].icon;

// BASE
var baseData			=	data.base;

// TEMP
var mainTemp			=	data.main.temp;
var mainPressure		=	data.main.pressure;
var mainHumidity		=	data.main.humidity;
var mainTempMin			=	data.main.temp_min;
var mainTempMax			=	data.main.temp_max;

// VISIBILITY
var visibility			=	data.visibility;

// WIND
var windSpeed			=	data.wind.speed;
var windDeg				=	data.wind.deg;

// CLOUDS
var clouds				=	data.clouds.all;

// DT
var dt					=	data.dt;

// SYS
var sysType				=	data.sys.type;
var sysId				=	data.sys.id;
var sysMessage			=	data.sys.message;
var sysCountry			=	data.sys.country;
var sysSunrise			=	data.sys.sunrise;
var sysSunset			=	data.sys.sunset;

// ID
var id					=	data.id;

// NAME
var name				=	data.name;

// COD
var cod					=	data.cod;

jQuery('div#weather').html( weatherIcon );

Anschließend können alle oder einzelne Werte in das anfangs erstellte id="weather" geladen werden. Ihr könnt selbst selektieren, welche Wetterdaten Ihr auf Eure eigene Webseite einbinden wollt.

Ändern des Hintergrundbilds anhand des Wetters

Mit den Daten kann man nun viel „herumspielen“. Eine Möglichkeit ist das ändern des Hintergrundbildes anhand des Wetters oder eine jQuery Schneeflocken Animation bei Schneefall. Ich zeige Euch wie Ihr anhand der Icon-ID das Hintergrundbild ändern könnt, denn HIER findet Ihr alle Icons, die euch die API wiedergibt. Dabei sind einige Icon-IDs einem bestimmten Wetter zugewiesen und manch andere gehören zu einer Gruppe. Ich habe mir die Mühe gemacht und eine zusätzliche Abfrage erstellt, die die Hintergrundfarbe eines DIVs mit der ID weatherBg ändert.

if ( weatherBg == 800  ) {	
	// klares wetter
	jQuery('div#weatherBg').css('background-color', 'yellow');
} else if ( weatherBg == 951  ) {	
	// ruhe
	jQuery('div#weatherBg').css('background-color', 'blue');
} else if ( weatherBg == 952  ) {	
	// leichte-briese
	jQuery('div#weatherBg').css('background-color', 'AliceBlue ');
} else if ( weatherBg == 954  ) {	
	// maessige-briese
	jQuery('div#weatherBg').css('background-color', 'AntiqueWhite ');
} else if ( weatherBg == 955  ) {	
	// frische-briese
	jQuery('div#weatherBg').css('background-color', 'Aqua');
} else if ( weatherBg == 956  ) {	
	// starke-briese
	jQuery('div#weatherBg').css('background-color', 'Aquamarine ');
} else if ( weatherBg == 957  ) {	
	// starker-wind
	jQuery('div#weatherBg').css('background-color', 'Azure');
} else if ( weatherBg == 958  ) {	
	// sturm
	jQuery('div#weatherBg').css('background-color', 'BlueViolet');
} else if ( weatherBg == 959  ) {	
	// starker-sturm
	jQuery('div#weatherBg').css('background-color', 'Brown');
} else if ( weatherBg == 959  ) {	
	// starker-sturm
	jQuery('div#weatherBg').css('background-color', 'BurlyWood');
} else if ( weatherBg == 960  ) {	
	// sturm
	jQuery('div#weatherBg').css('background-color', 'CadetBlue');
} else if ( weatherBg == 961  ) {	
	// heftiger-sturm
	jQuery('div#weatherBg').css('background-color', 'Chartreuse');
} else if ( weatherBg == 962  ) {	
	// hurrikan
	jQuery('div#weatherBg').css('background-color', 'Coral');
} 

// RANGE 

else if ( weatherBg >= 900 && weatherBg <= 950  ) {	
	// extrem
	jQuery('div#weatherBg').css('background-color', 'DarkBlue');							
} else if ( weatherBg >= 801 && weatherBg <= 899 ) {	
	// wolkig
	jQuery('div#weatherBg').css('background-color', 'DarkGrey');							
} else if ( weatherBg >= 701 && weatherBg <= 799  ) {	
	// atmosphäre
	jQuery('div#weatherBg').css('background-color', 'DarkTurquoise');						
} else if ( weatherBg >= 600 && weatherBg <= 700 ) {	
	// schnee
	jQuery('div#weatherBg').css('background-color', 'GhostWhite');							
} else if ( weatherBg >= 500 && weatherBg <= 599  ) {	
	// regen
	jQuery('div#weatherBg').css('background-color', 'LightSteelBlue');							
} else if ( weatherBg >= 300 && weatherBg <= 499  ) {	
	// nieselregen
	jQuery('div#weatherBg').css('background-color', 'LightSkyBlue');							
} else if ( weatherBg >= 200 && weatherBg <= 299 ) {	
	// gewitter
	jQuery('div#weatherBg').css('background-color', 'MidnightBlue');
}

Der folgende Code

Für die, die zu faul waren sich alle einzelnen Punkte durchzulesen – hier der komplette Code:

// ABFRAGE VON GEOLOCATION
if (navigator.geolocation) {
	jQuery('div#weather').html('

Geolocation funktioniert :)

'); function position(currentPosition) { var coords = currentPosition.coords; var lat = coords.latitude; var lng = coords.longitude; weatherApi(lat, lng); }; } else { jQuery('div#weather').html('

Geolocation funktioniert nicht :(

'); var lat = '52.52'; var lng = '13.39'; weatherApi(lat, lng); } navigator.geolocation.getCurrentPosition(position); // FUNCTION function weatherApi (newPositionLat = null , newPositionLng = null ) { // AUSLESEN VON LAT UND LNG if ( newPositionLat == null && newPositionLng == null ) { var newPositionLat = '52.5200066'; var newPositionLng = '13.404954'; } // API URL var apiUrl = 'https://api.openweathermap.org/data/2.5/weather?lat=' + newPositionLat + '&lon=' + newPositionLng + '&units=metric&APPID=DEINEAPPID'; // WETTER API jQuery.ajax ({ url: apiUrl, type: 'GET', dataType: 'jsonp', success: function(data) { // KOORDINATEN var coordLat = data.coord.lat; var coordLng = data.coord.lon; // WETTER var weatherId = data.weather[0].id; var weatherMain = data.weather[0].main; var weatherDesc = data.weather[0].description; var weatherIcon = ''+weatherDesc+''; var weatherBg = data.weather[0].icon; // EXAKT if ( weatherBg == 800 ) { // klares wetter jQuery('div#weatherBg').css('background-color', 'yellow'); } else if ( weatherBg == 951 ) { // ruhe jQuery('div#weatherBg').css('background-color', 'blue'); } else if ( weatherBg == 952 ) { // leichte-briese jQuery('div#weatherBg').css('background-color', 'AliceBlue '); } else if ( weatherBg == 954 ) { // maessige-briese jQuery('div#weatherBg').css('background-color', 'AntiqueWhite '); } else if ( weatherBg == 955 ) { // frische-briese jQuery('div#weatherBg').css('background-color', 'Aqua'); } else if ( weatherBg == 956 ) { // starke-briese jQuery('div#weatherBg').css('background-color', 'Aquamarine '); } else if ( weatherBg == 957 ) { // starker-wind jQuery('div#weatherBg').css('background-color', 'Azure'); } else if ( weatherBg == 958 ) { // sturm jQuery('div#weatherBg').css('background-color', 'BlueViolet'); } else if ( weatherBg == 959 ) { // starker-sturm jQuery('div#weatherBg').css('background-color', 'Brown'); } else if ( weatherBg == 959 ) { // starker-sturm jQuery('div#weatherBg').css('background-color', 'BurlyWood'); } else if ( weatherBg == 960 ) { // sturm jQuery('div#weatherBg').css('background-color', 'CadetBlue'); } else if ( weatherBg == 961 ) { // heftiger-sturm jQuery('div#weatherBg').css('background-color', 'Chartreuse'); } else if ( weatherBg == 962 ) { // hurrikan jQuery('div#weatherBg').css('background-color', 'Coral'); } // RANGE else if ( weatherBg >= 900 && weatherBg <= 950 ) { // extrem jQuery('div#weatherBg').css('background-color', 'DarkBlue'); } else if ( weatherBg >= 801 && weatherBg <= 899 ) { // wolkig jQuery('div#weatherBg').css('background-color', 'DarkGrey'); } else if ( weatherBg >= 701 && weatherBg <= 799 ) { // atmosphäre jQuery('div#weatherBg').css('background-color', 'DarkTurquoise'); } else if ( weatherBg >= 600 && weatherBg <= 700 ) { // schnee jQuery('div#weatherBg').css('background-color', 'GhostWhite'); } else if ( weatherBg >= 500 && weatherBg <= 599 ) { // regen jQuery('div#weatherBg').css('background-color', 'LightSteelBlue'); } else if ( weatherBg >= 300 && weatherBg <= 499 ) { // nieselregen jQuery('div#weatherBg').css('background-color', 'LightSkyBlue'); } else if ( weatherBg >= 200 && weatherBg <= 299 ) { // gewitter jQuery('div#weatherBg').css('background-color', 'MidnightBlue'); } // BASE var baseData = data.base; // TEMP var mainTemp = data.main.temp; var mainPressure = data.main.pressure; var mainHumidity = data.main.humidity; var mainTempMin = data.main.temp_min; var mainTempMax = data.main.temp_max; // VISIBILITY var visibility = data.visibility; // WIND var windSpeed = data.wind.speed; var windDeg = data.wind.deg; // CLOUDS var clouds = data.clouds.all; // DT var dt = data.dt; // SYS var sysType = data.sys.type; var sysId = data.sys.id; var sysMessage = data.sys.message; var sysCountry = data.sys.country; var sysSunrise = data.sys.sunrise; var sysSunset = data.sys.sunset; // ID var id = data.id; // NAME var name = data.name; // COD var cod = data.cod; var coor = '

Koordinaten

  • Lat: ' + coordLat + '
  • Lng: ' + coordLng + '
'; var weather = '

Wetter

  • ID: ' + weatherId + '
  • Main: ' + weatherMain + '
  • Desc: ' + weatherDesc + '
  • icon: ' + weatherIcon + '
'; var base = '

Base

  • Base: ' + baseData + '
'; var temperatur = '

Temperatur

  • Main Temp: ' + mainTemp + '
  • Druck: ' + mainPressure + '
  • Feuchtigkeit: ' + mainHumidity + '
  • min. Temp.: ' + mainTempMin + '
  • Max. Temp.: ' + mainTempMax + '
'; var visibility = '

Sichtweite

  • Sichtweite: ' + visibility + '
'; var wind = '

Wind

  • Wind Speed: ' + windSpeed + '
  • Wind Deg: ' + windDeg + '
'; var clouds = '

Wolken

  • Wolken: ' + clouds + '
'; var dt = '

DT

  • Dt: ' + dt + '
'; var system = '

Base

  • Typ: ' + sysType + '
  • ID: ' + sysId + '
  • Message: ' + sysMessage + '
  • Land: ' + sysCountry + '
  • Sunrise: ' + sysSunrise + '
  • Sunset: ' + sysSunset + '
'; var id = '

ID

  • ID: ' + id + '
'; var name = '

Name

  • Name: ' + name + '
'; var cod = '

Cod

  • Cod: ' + cod + '
'; // OUTPUT jQuery('div#weather').html( coor + weather + base + temperatur + visibility + wind + clouds + dt + system + id + name + cod ); console.log(data); } }); }

revilodesign oli

13 Kommentare

Schreibe ein Kommentar zu PHP Wetter auslesen – Wetterdaten mit Openweathermap Api in eigene Webseite einbinden

  1. avatar knotenKnoten sagt:

    Hi,

    das scheint nicht mehr aktuell.
    Von wann ist das Skript?

    Es steht leider kein Datum im Artikel :-/

    Bestimmt steh ich aber auch nur auf dem Schlauch.

    • avatar adminadmin sagt:

      Hi Knoten,

      an welcher Stelle hapert es denn bei dir? In meiner Demo und im Artikel selbst (oben in der Demobox) funktioniert die Abfrage mit der API von openweathermap.org und der Standortfreigabe des Browsers.

      Vielleicht hast du die Möglichkeit deinen aktuellen Stand zu teilen, sodass man drauf schauen kann. Ohne weitere Details ist es schwer den Fehler zu finden.

      Aber danke für den Hinweis mit dem Datum. Werde dies dem Blog hinzufügen 🙂

      Lg Oli

  2. avatar knotenKnoten sagt:

    Hu…

    Grüße vergessen O:-)

  3. avatar knotenKnoten sagt:

    Hi. Danke das du so fix geantwortet hat.
    Ich hätte mir mal ein Lesezeichen setzen sollen O:-)

    Bin mir nicht sicher wo es hapert. Ganz doof bin ich jetzt nicht was das angeht,nur steh ich scheinbar irgendwo auf dem Schlauch.
    Hab alles kopiert. Das Skript, CSS und so weiter.
    Bekomme nur eine leer Seite mit dem Text im Div. (Geolocation funktioniert 🙂 )
    Auch deine Seite hab ich mal kopiert, selbes Spiel.

    Openweather schreibt das die FreeAPI nur alle 2 Std. aktualisieret wird. ( <2Std.)
    Das scheint mir viel. Evtl ist ein fertiges Widget besser o. ausreichend.
    Die historischen Wetterdaten interessieren mich allerdings auch.
    Na ich schau mal wie weit ich komme. Teilen kann ich da grade nichts.Zumindest nicht öffentlich, da es zur Zeit nur intern ist.

    Viele Grüße

    • avatar adminadmin sagt:

      Hi Knoten,

      kannst du mir deine Datei/en vielleicht via E-Mail (info@revilodesign.de) zukommen lassen? Am besten alles entferne, was mich nicht interessieren soll 🙂 Dann kann ich es mir hier lokal anschauen und dir sagen, wo der Fehler liegt.

      Lg Oli

  4. avatar knotenKnoten sagt:

    Hi,

    mach ich gerne. Nur heute werd ich das wohl nicht mehr schaffen.

    Gruß

  5. avatar hans stierHans Stier sagt:

    Diese Engine ist toll! Super einfach zum auslesen und zum Handhaben, Benötige ich eigentlich im im Impressum einen Cookie-Hinweiß?

    • avatar adminadmin sagt:

      Hey Hans,

      ich weiß es auch nicht zu 100%. Habe mir aber mal die Cookies im Inspektor angeschaut, die gesetzt werden und da sehe ich einige Cookies zu .openweathermap.org was mich deine Frage mit einem „Ja“ beantworten lässt. Aber alles ohne Gewähr.

      Lg Oli

  6. avatar marioMario sagt:

    Hallo Oli,
    danke für deinen umfassenden Beitrag. das ist echter Mehrwert! Könntest du mir kurz erklären, wie der Befehl für den div „weather“ aussehen muss, damit dort die Data Werte ausgegeben werden?
    Ich habe den kompletten Code in die functions.php zusamen mit meinem API Key reinkopiert. In meinem Template habe ich an die richtige Stelle reinkopiert. Aber ich muss dem div doch noch „sagen, welche Data Werte es ausgeben soll. Wie lautet da der CSS(?)-Befehl?
    Danke und LG Mario

    • avatar adminadmin sagt:

      Hi Mario,
      im Javascript werden die Daten in dieser Zeile dem Div mit der ID weather übergeben.

      // OUTPUT
      jQuery(‚div#weather‘).html( coor + weather + base + temperatur + visibility + wind + clouds + dt + system + id + name + cod );

      Und über dieser Zeile werden die variablen mit html tags gefüllt. Es müsste eigentlich direkt angezeigt werden, wenn du dem oberen Tutorial gefolgt bist. Läuft deine Webseite über https oder http? Das könnte auch den Anzeigefehler verursachen.

      Du kannst mir aber deine Seite/Skript auch per Email schicken. Dann schaue ich sie mir die Tage gerne mal an.

      Lg Oli

  7. avatar ayrtonAyrton sagt:

    Kleiner Tipp: In der Selbstdarstellung müsste es heißen „hält seit mehr _als_ 10 Jahren an.
    Ansonsten: Das Skript klingt interessant. Ich werde das mal versuchen, auf meiner Internetseite zu implementieren.

    • avatar adminadmin sagt:

      Hey Ayrton,

      vielen Dank für den Hinweis 🙂 Mein Wunsch ist es eh, wenn ich mal groß bin, jemanden zu haben, der mir meine Texte schreibt, denn das fällt mir gar nicht so einfach 🙂

      LG Oli

  8. avatar saschaSascha sagt:

    Hallo Oli,

    funktioniert dein Script noch? Ich bin kein Profi.
    Ich habe den kompletten Code kopiert und mit (?) eingeleitet.
    Bekomme aber kein Output!
    Was mache ich falsch?

    Gruß aus Mahlsdorf

Hinterlasse ein Kommentar zum Beitrag "PHP Wetter auslesen – Wetterdaten mit Openweathermap Api in eigene Webseite einbinden"

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Letzte Aktualisierung am 19.03.2024 / Affiliate Links / Bilder von der Amazon Product Advertising API

Follow Me

doch mal auf Instagram