Comment afficher la météo sur son site web en javascript ?

Dans cet article, vous allez apprendre à mettre en place la météo sur votre site internet. Pour cela, je vais utiliser l’API du site Openweathermap. Je voulais au départ me servir de l’API de Google mais apparemment, elle n’est plus disponible…

Avec ce code, je ne vous promets pas d’être aussi efficace que la célèbre présentatrice TV Evelyne Dehliat (C’est impossible de toute façon) mais d’exploiter tout de même des données assez précises qui vont vous permettre d’afficher le temps qu’il fait sur votre blog ou votre site web.

Code HTML à insérer sur votre site internet

Je vous fournis un code de base. A vous ensuite de rajouter du CSS pour personnaliser votre espace météo afin d’avoir un résultat unique.

<div ng-app="myapp" ng-controller="WeatherCtrl">
 <p style="font-size:21px">Météo du jour</p>
 <weather-icon cloudiness="{{ weather.clouds }}"></weather-icon>
 <p style="font-size:19px">Actuellement : {{ weather.temp.current | temp:2 }}</p>
 min: {{ weather.temp.min | temp }}, max: {{ weather.temp.max | temp }}
</div>

Code javascript à intégrer

Pour changer le lieu, par exemple, pour afficher le temps et la température de Marseille, il vous suffit de remplacer la valeur « q » dans l’url http://api.openweathermap.org/data/2.5/weather?q=Paris,at&units=metric&callback=JSON_CALLBACK. Si vous voulez aller plus loin, je vous invite à découvrir le fonctionnement de l’api sur le site Openweathermap qui propose une documentation complète pour les développeurs.

'use strict';
var myapp = angular.module('myapp', []);
myapp.factory('weatherService', function($http) {
 return { 
 getWeather: function() {
 var weather = { temp: {}, clouds: null };
 $http.jsonp('http://api.openweathermap.org/data/2.5/weather?q=Paris,at&units=metric&callback=JSON_CALLBACK').success(function(data) {
 if (data) {
 if (data.main) {
 weather.temp.current = data.main.temp;
 weather.temp.min = data.main.temp_min;
 weather.temp.max = data.main.temp_max;
 }
 weather.clouds = data.clouds ? data.clouds.all : undefined;
 }
 });
return weather;
 }
 }; 
});
myapp.filter('temp', function($filter) {
 return function(input, precision) {
 if (!precision) {
 precision = 1;
 }
 var numberFilter = $filter('number');
 return numberFilter(input, precision) + '\u00B0C';
 };
});
myapp.controller('WeatherCtrl', function ($scope, weatherService) {
 $scope.weather = weatherService.getWeather();
});
myapp.directive('weatherIcon', function() {
 return {
 restrict: 'E', replace: true,
 scope: {
 cloudiness: '@'
 },
 controller: function($scope) {
 $scope.imgurl = function() {
 var baseUrl = 'https://ssl.gstatic.com/onebox/weather/128/';
 if ($scope.cloudiness < 20) {
 return baseUrl + 'sunny.png';
 } else if ($scope.cloudiness < 90) {
 return baseUrl + 'partly_cloudy.png';
 } else {
 return baseUrl + 'cloudy.png';
 }
 };
 },
 template: '<div style="float:left"><img ng-src="{{ imgurl() }}"></div>'
 };
});

Logiquement, si vous avez bien suivi mes indications, vous devriez voir apparaître un soleil ou un nuage selon le temps qu’il fait à Paris ainsi que la température juste à côté.

Si vous rencontrez un problème pour insérer ce code, que vous voulez en savoir plus, n’hésitez pas à le mentionner dans la zone des commentaires pour que je puisse vous aider.