xexu / simple-open-weather Goto Github PK
View Code? Open in Web Editor NEWIt's a jQuery plugin using openweathermap json api
simple-open-weather's People
Contributors
Stargazers
Watchers
simple-open-weather's Issues
feature request
Hello,
Datas are missing, like {{wind}} for example.
;)
JS Error due to removed wind degree
Openweathermap seems to have the degree of the wind removed, therefore it causes a JavaScript error.
Uncaught TypeError: Cannot read property 'toFixed' of undefined 'direction': weather.wind.deg.toFixed(1),
Forcasts?
Hi,
is it possible to get forcasts-infos for the next 3-5 days, too?
Regards,
Sascha
Upate to support Weather-icons
Hi
i'm using your script and changed it to support this icons font (https://github.com/erikflowers/weather-icons).
Probably it was not the best update but i create a new option called weathericonsfont, and change the icon tag to support the inline tag for that icon font.
(function( $ ){
$.fn.simpleopenweather = function(options){
var defaults = {
template : '<div class="simpleopenweather-place"> {{icon}} {{place}}: {{sky}} </div><div><span class="simpleopenweather-temperature">Temp: {{temperature.current}} ºC</span><span class="simpleopenweather-humidity"> Humidity: {{humidity}}%</span></div><div>Temp min/max: <span class="simpleopenweather-temperature-min">{{temperature.min}} ºC </span> /<span class="simpleopenweather-temperature-max">{{temperature.max}} ºC </span></div><div>Wind: <span class="simpleopenweather-wind-speed">{{wind.speed}} m/s</span> <span class="simpleopenweather-wind-direction">{{wind.direction}}º</span></div><div><span class="simpleopenweather-cloudiness">Cloudiness: {{cloudiness}}% </span> <span class="simpleopenweather-pressure">Pressure: {{pressure}} kPa</span></div>',
noweather : '<p>no weather report was found for that place!</p>',
error : '<p>something went wrong!</p>',
latitude : 0,
longitude : 0,
units : 'imperial',
lang : 'en',
iconset : 'http://openweathermap.org/img/w/',
iconfont : false,
weathericonsfont: false //Maintained at http://erikflowers.github.io/weather-icons
}
var settings = $.extend(defaults, options);
return this.each(function() {
var item = $(this);
var openweathermap_url = "http://api.openweathermap.org/data/2.5/weather";
var icons = {"01d": "B", "01n": "C", "02d": "H", "02n": "I", "03d": "N", "03n": "N", "04d": "Y", "04n": "Y", "09d": "Q", "09n": "Q", "10d": "R", "10n": "R", "11d": "0", "11n": "0", "13d": "W", "13n": "W", "50d": "J", "50n": "K"};
if(item.attr("data-simpleopenweather-city")){
openweathermap_url += "?q=" + item.attr("data-simpleopenweather-city");
} else if(item.attr("data-simpleopenweather-coord")){
latlon = item.attr("data-simpleopenweather-coord").split(',');
openweathermap_url += "?lat="+latlon[0]+"&lon="+latlon[1]+"&cnt=1";
} else if(settings.latitude != 0 && settings.longitude != 0){
openweathermap_url += "?lat="+settings.latitude+"&lon="+settings.longitude+"&cnt=1";
}
if(settings.lang != ''){
openweathermap_url += "&lang="+settings.lang;
}
if(settings.units == 'metric'){
openweathermap_url += "&units="+'metric';
} else{
openweathermap_url += "&units="+'imperial';
}
console.log(openweathermap_url);
$.ajax({
type : "GET",
dataType : "jsonp",
url : openweathermap_url,
success : function(weather){
if(!weather){
item.html(settings.noweather);
return;
}
if(settings.iconfont && settings.weathericonsfont==false)
{
var icon_name = icons[weather.weather[0].icon];
icon_name='<i class="meteocon">'+icon_name+'</i>';
}
else if(settings.weathericonsfont && settings.iconfont==false)
{
//get font icon from Weather Icons
var icon_name = getFontIcon(weather.weather[0].icon);
}
else
{
var icon_name = settings.iconset+weather.weather[0].icon+".png";
icon_name='<img src="'+icon_name+'"></img>';
}
var info = {
temp : {
'current' : weather.main.temp.toFixed(1),
'min' : weather.main.temp_min.toFixed(1),
'max' :weather.main.temp_max.toFixed(1),
},
humidity : weather.main.humidity,
pressure : weather.main.pressure,
wind : {
'speed': weather.wind.speed.toFixed(1),
'direction': weather.wind.deg.toFixed(1),
},
cloudiness : weather.clouds ? weather.clouds.all : "N/A",
sky : weather.weather[0].description,
icon : icon_name,
place : weather.name
};
item.html(settings.template.replace(/{{place}}/ig, info.place)
.replace(/{{temperature}}/ig, info.temp.current)
.replace(/{{temperature.current}}/ig, info.temp.current)
.replace(/{{temperature.min}}/ig, info.temp.min)
.replace(/{{temperature.max}}/ig, info.temp.max)
.replace(/{{humidity}}/ig, info.humidity)
.replace(/{{pressure}}/ig, info.pressure)
.replace(/{{wind.speed}}/ig, info.wind.speed)
.replace(/{{wind.direction}}/ig, info.wind.direction)
.replace(/{{cloudiness}}/ig, info.cloudiness)
.replace(/{{icon}}/ig, info.icon)
//.replace(/{{icon}}/ig, ((settings.iconfont) ? '<i class="meteocon">'+info.icon+'</i>' : '<img src="'+info.icon+'"></img>'))
.replace(/{{sky}}/ig, info.sky));
},
error : function(){
item.html(settings.error);
}
});
//get icon correspondency from
//Weather Icons
//Maintained at http://erikflowers.github.io/weather-icons
function getFontIcon(iconid){
var fontIcon;
switch (iconid){
case '01d':
fontIcon = '<i class="wi wi-day-sunny"></i>';
break;
case '01n':
fontIcon = '<i class="wi wi-night-clear"></i>';
break;
case '02d':
fontIcon = '<i class="wi wi-day-cloudy"></i>';
break;
case '02n':
fontIcon = '<i class="wi wi-night-cloudy"></i>';
break;
case '03d':
fontIcon = '<i class="wi wi-cloud"></i>';
break;
case '03n':
fontIcon = '<i class="wi wi-cloud"></i>';
break;
case '04d':
fontIcon = '<i class="wi wi-cloudy"></i>';
break;
case '04n':
fontIcon = '<i class="wi wi-cloudy"></i>';
break;
case '09d':
fontIcon = '<i class="wi wi-sprinkle"></i>';
break;
case '09n':
fontIcon = '<i class="wi wi-sprinkle"></i>';
break;
case '10d':
fontIcon = '<i class="wi wi-day-sprinkle"></i>';
break;
case '10n':
fontIcon = '<i class="wi wi-night-alt-sprinkle"></i>';
break;
case '11d':
fontIcon = '<i class="wi wi-day-lightning"></i>';
break;
case '11n':
fontIcon = '<i class="wi wi-night-alt-lightning"></i>';
break;
case '13d':
fontIcon = '<i class="wi wi-day-snow"></i>';
break;
case '13n':
fontIcon = '<i class="wi wi-night-snow"></i>';
break;
case '50d':
fontIcon = '<i class="wi wi-day-fog"></i>';
break;
case '50n':
fontIcon = '<i class="wi wi-fog"></i>';
break;
case 'r':
fontIcon = '<i class="wi wi-sprinkles"></i>';
break;
case 'sn50':
fontIcon = '<i class="wi wi-snowflake-cold"></i>';
break;
case 't50':
fontIcon = '<i class="wi wi-lightning"></i>';
break;
case 'w50':
fontIcon = '<i class="wi wi-strong-wind"></i>';
break;
default:
fontIcon = '<i class="wi wi-alien"></i>';
break;
}
return fontIcon;
}
});
}
})( jQuery );
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.