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         =   '';
            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.

Registriere Dich dazu kostenlos bei openweathermap.com
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:

IP-Adresse: Die Daten des Vermittlungsknoten des Providers werden verwendet. Hierbei kann es zu Abweichungen von mehr als 50 Kilometer kommen.
WLAN-Netzwerke: Im Rahmen von Google-StreetView wurden in Ballungsgebieten alle WLAN-Netze erfasst. Daher kann die Genauigkeit bis zu 10 Meter betragen.
Funk-Signale: Durch Trilateration kann die Genauigkeit auf 20 – 200 Meter genau sein.
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			=	'';
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			=	'';
			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);
		}
	});
}

5 Likes

Verfasst am 02.01.2018 Update 01.11.2019

revilodesign oli

CSS box-sizing – Vorteile des Styles

kategorien-und-tags-zu-seiten-in-wordpress-hinzufuegt

Kategorien und Tags zu Seiten in WordPress hinzufügen

13 Kommentare

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

Knoten sagt:
9. Oktober 2018 um 6:42 Uhr

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.

Antworten
- admin sagt:
  9. Oktober 2018 um 9:26 Uhr
  
  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
  
  Antworten
Knoten sagt:
9. Oktober 2018 um 6:43 Uhr

Hu…

Grüße vergessen O:-)

Antworten
Knoten sagt:
16. Oktober 2018 um 9:34 Uhr

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

Antworten
- admin sagt:
  16. Oktober 2018 um 9:40 Uhr
  
  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
  
  Antworten
Knoten sagt:
16. Oktober 2018 um 10:08 Uhr

Hi,

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

Gruß

Antworten
Hans Stier sagt:
1. November 2019 um 13:02 Uhr

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

Antworten
- admin sagt:
  1. November 2019 um 15:51 Uhr
  
  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
  
  Antworten
Mario sagt:
26. März 2020 um 17:48 Uhr

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

Antworten
- admin sagt:
  30. März 2020 um 8:36 Uhr
  
  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
  
  Antworten
Ayrton sagt:
3. Februar 2021 um 10:08 Uhr

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.

Antworten
- admin sagt:
  3. Februar 2021 um 11:45 Uhr
  
  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
  
  Antworten
Sascha sagt:
12. September 2023 um 8:48 Uhr

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

Antworten