homepage Welcome to WebmasterWorld Guest from 54.227.171.163
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
How to add weather api to my website?
mounaime



 
Msg#: 4633252 posted 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 ]

 

daveVk

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4633252 posted 2:32 am on Dec 25, 2013 (gmt 0)

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');
mounaime



 
Msg#: 4633252 posted 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

mounaime



 
Msg#: 4633252 posted 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

daveVk

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4633252 posted 7:37 am on Dec 25, 2013 (gmt 0)

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.

mounaime



 
Msg#: 4633252 posted 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
[url]https://github.com/jasonmoo/t.js[/url]

</body>
</html>

daveVk

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4633252 posted 11:38 pm on Dec 25, 2013 (gmt 0)

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>

mounaime



 
Msg#: 4633252 posted 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=?') .

daveVk

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4633252 posted 6:46 am on Dec 30, 2013 (gmt 0)

One less problem for new year, All the best.

mounaime



 
Msg#: 4633252 posted 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

mounaime



 
Msg#: 4633252 posted 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

daveVk

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4633252 posted 1:41 am on Dec 31, 2013 (gmt 0)

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' ]
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved