Welcome to WebmasterWorld Guest from 54.144.48.252

Forum Moderators: open

Message Too Old, No Replies

How to add weather api to my website?

     
8:19 pm on Dec 23, 2013 (gmt 0)



It's been two days that I try to integrate weather api to my website and I can not.


html:
<div class="weather_wrapper">
<div class="top_wrapper top_wrapper_e">
<div class="date">Monday,
<br />23 Dec.</div>
<div class="temp">-7</div>
<div class="icon">
<img src="http://img11.hostingpics.net/pics/8703383328.png" width="34" height="34" alt="icone" />
</div>
<div class="bt_control" id="meteo_controller">
<a href="javascript://">
<img src="/themes/made_by_ola/images/meteo_widget/arrow_open.png" id="meteo_trigger_img" width="27" height="17" alt="Arrow" />
</a>
</div>
</div>
<div class="bottom_wrapper" id="meteo_future_days">
<div class="next_days_wrapper">
<div class="day first">
<div class="date">Tuesday,
<br />24 Dec.</div>
<div class="temp">-16</div>
<div class="icon">
<img src="/themes/made_by_ola/images/meteo_widget/icons/34.png" width="34" height="34" alt="icone" />
</div>
<div class="clear"></div>
</div>
<div class="day">
<div class="date">Wednesday,
<br />25 Dec.</div>
<div class="temp">-14</div>
<div class="icon">
<img src="/themes/made_by_ola/images/meteo_widget/icons/26.png" width="34" height="34" alt="icone" />
</div>
<div class="clear"></div>
</div>
<div class="day last">
<div class="date">Thursday,
<br />26 Dec.</div>
<div class="temp">-2</div>
<div class="icon">
<img src="/themes/made_by_ola/images/meteo_widget/icons/14.png" width="34" height="34" alt="icone" />
</div>
<div class="clear"></div>
</div>
</div>
<div class="bottom"></div>
</div>
</div>

JS:
var meteostatus = 0; // closed
$('#meteo_controller').click(function() {
if (meteostatus == 0) {
meteostatus = 1;
$('#meteo_future_days').fadeIn('slow');
$('#meteo_trigger_img').attr('src', $('#meteo_trigger_img').attr('src').replace('open', 'close'));
} else {
meteostatus = 0;
$('#meteo_future_days').fadeOut('slow');
$('#meteo_trigger_img').attr('src', $('#meteo_trigger_img').attr('src').replace('close', 'open'));
}
});

PS:I wanted to do, as these screenshot
[img11.hostingpics.net ]
[img11.hostingpics.net ]
2:32 am on Dec 25, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Code looks OK check the basics

- how is JS invoked, should be after page load or in script block prior to </body>

- does html validate ?

- error reporting enabled, errors in console log ?

- add a few alerts to narrow problem down

var meteostatus = 0; // closed
alert('1');
$('#meteo_controller').click(function() {
alert('2');
if (meteostatus == 0) {
alert('3');
meteostatus = 1;
$('#meteo_future_days').fadeIn('slow');
$('#meteo_trigger_img').attr('src', $('#meteo_trigger_img').attr('src').replace('open', 'close'));
} else {
alert('4');
meteostatus = 0;
$('#meteo_future_days').fadeOut('slow');
$('#meteo_trigger_img').attr('src', $('#meteo_trigger_img').attr('src').replace('close', 'open'));
}
});
alert('5');
3:29 am on Dec 25, 2013 (gmt 0)



thank you daveVk for these explanations ,I actually created a weather widget like on the site calypsopark.com the problem here I do not know how to integrate the weather forecast in my site, or what are the steps to have the weather on its website and thank you.
have a nice day
3:39 am on Dec 25, 2013 (gmt 0)



I have done some research, but no results:

I registered on wunderground.com, and I follow the documentation to generate the key ID. later I found links and codes.

Forecast in French

[api.wunderground.com...]

PHP:

<?php $json_string = file_get_contents("http://api.wunderground.com/api/2ea138a9dd52eabe /geolookup/conditions/q/IA/Cedar_Rapids.json");
$parsed_json = json_decode($json_string);
$location = $parsed_json->{'location'}->{'city'};
$temp_f = $parsed_json->{'current_observation'}->{'temp_f'};
echo "Current temperature in ${location} is: ${temp_f}\n"; ?>

Javascript & Jquery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script> jQuery(document).ready(function($) {
$.ajax({
url : "http://api.wunderground.com/api/2ea138a9dd52eabe/geolookup/conditions /q/IA/Cedar_Rapids.json", dataType : "jsonp", success : function(parsed_json) {
var location = parsed_json['location']['city'];
var temp_f = parsed_json['current_observation']['temp_f'];
alert("Current temperature in " + location + " is: " + temp_f);
} }); }); </script>

Have a wonderful day
7:37 am on Dec 25, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Thanks mounaime

Please explain what is working and what is not, is the initial display correct for example ? Is the correct weather
data being shown ? Is the dropdown working ?

I am guessing you are generating the HTML including weather data with PHP and the jQuery/js is used the hide show the little dropdown ?

Hope this job is not preventing you from having a wonderful day also.
7:05 pm on Dec 25, 2013 (gmt 0)



thank you daveVk for your response, My only problem is how do you add the weather like on the site calypsopark.com .

this is what I tried :


<!DOCTYPE html>
<html>
<head>
<title>Weather API Test</title>
</head>
<body>
<script type="text/html" id="weather_tmpl">
<div class="weather_wrapper">
<div class="top_wrapper top_wrapper_e">
{{=day0}}
<div class="bt_control" id="meteo_controller">
<a href="javascript://">
<img src="/themes/made_by_ola/images/meteo_widget/arrow_open.png" id="meteo_trigger_img" width="27" height="17" alt="Arrow" />
</a>
</div>
</div>
<div class="bottom_wrapper" id="meteo_future_days">
<div class="next_days_wrapper">
<div class="day first">
{{=day1}}
<div class="clear"></div>
</div>
<div class="day">
{{=day2}}
<div class="clear"></div>
</div>
<div class="day last">
{{=day3}}
<div class="clear"></div>
</div>
</div>
<div class="bottom"></div>
</div>
</div>
</script>

<script type="text/html" id="detail_tmpl">
<div class="date">{{=date.weekday}},
<br />{{=date.day}} {{=monthname_short}}.</div>
<div class="temp">{{=high.celsius}}</div>
<div class="icon">
<img src="{{=icon_url}}" width="34" height="34" alt="icone" />
</div>
</script>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="t.min.js"></script>

<script type='text/javascript'>
(function(){
var mainTpl = new t($('#weather_tmpl').html()),
detailTpl = new t($('#detail_tmpl').html());

$.getJSON('http://api.wunderground.com/api/<your-api-key>/forecast/q/CA/San_Francisco.json')
.done(function(data){
var tplData = {};
$.each(data.forecast.simpleforecast.forecastday, function(index, day){
tplData['day'+index] = detailTpl.render(day);
});
$('body').append(mainTpl.render(tplData));
});
})();
</script>

<script>
var meteostatus = 0; // closed
$('#meteo_controller').click(function() {
if (meteostatus == 0) {
meteostatus = 1;
$('#meteo_future_days').fadeIn('slow');
$('#meteo_trigger_img').attr('src', $('#meteo_trigger_img').attr('src').replace('open', 'close'));
} else {
meteostatus = 0;
$('#meteo_future_days').fadeOut('slow');
$('#meteo_trigger_img').attr('src', $('#meteo_trigger_img').attr('src').replace('close', 'open'));
}
});
</script>

PS:
-The data for the current day, and the forecast for the next 3 are in the array data.forecast.simpleforecast.forecastday.
-I've used a templating library called t.js which you can find
[github.com ]

</body>
</html>
11:38 pm on Dec 25, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



The last script block will fail as the HTML at this stage will not have been built by template system.

combine last two blocks like this

<script type='text/javascript'>
(function(){
var meteostatus = 0; // closed
var mainTpl = new t($('#weather_tmpl').html()),
detailTpl = new t($('#detail_tmpl').html());

$.getJSON('http://api.wunderground.com/api/<your-api-key>/forecast/q/CA/San_Francisco.json')
.done(function(data){
var tplData = {};
$.each(data.forecast.simpleforecast.forecastday, function(index, day){
tplData['day'+index] = detailTpl.render(day);
});
$('body').append(mainTpl.render(tplData));

$('#meteo_controller').click(function() {
if (meteostatus == 0) {
meteostatus = 1;
$('#meteo_future_days').fadeIn('slow');
$('#meteo_trigger_img').attr('src', $('#meteo_trigger_img').attr('src').replace('open', 'close'));
} else {
meteostatus = 0;
$('#meteo_future_days').fadeOut('slow');
$('#meteo_trigger_img').attr('src', $('#meteo_trigger_img').attr('src').replace('close', 'open'));
}
});

});
})();
</script>
2:47 am on Dec 30, 2013 (gmt 0)



thank you so much daveVK, your solution works perfectly .

PS: I add one thing about API, add at the end. json? callback =? , So that the API works.

therefore

$.getJSON('http://api.wunderground.com/api/<your-api-key>/forecast/q/CA/San_Francisco.json?callback=?') .
6:46 am on Dec 30, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



One less problem for new year, All the best.
6:14 pm on Dec 30, 2013 (gmt 0)



Hello daveVk,
please one last question, is there a way to replace the weather icons provided by wunderground with other more stylized icons.
Have a great day
6:16 pm on Dec 30, 2013 (gmt 0)



how do I change it with my own icons ?
<div class="icon">
<img src="{{=icon_url}}" width="34" height="34" alt="icone" />
</div>

thank you
1:41 am on Dec 31, 2013 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



var meteostatus = 0; // closed
var myImages = [ '/day0.png', '/day1.png', '/day2.png','/day3.png' ];
...
var tplData = {};
$.each(data.forecast.simpleforecast.forecastday, function(index, day){
day.icon_url = myImages[index];
tplData['day'+index] = detailTpl.render(day);
});


replace /day0.png etc with your own urls

assumed index start at 0, if days out by 1, add dummy entry start of array
var myImages = [ '', '/day0.png', '/day1.png', '/day2.png','day3.png' ]
 

Featured Threads

Hot Threads This Week

Hot Threads This Month