Trouble using Skycons for my weather app


#1

Hey guys,
I have perused the forums for this problem and the ones that I found solved their issue by using different external javascript links , I have used the following two links:

https://gitcdn.link/cdn/darkskyapp/skycons/master/skycons.js

https://cdnjs.cloudflare.com/ajax/libs/skycons/1396634940/skycons.min.js

even with these two links I can’t get the icon to show up.

What am I doing wrong?

this is the code I am using to display the icon:
$(document).ready(function() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
$("#getWeather").click(function() {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
var url_api =
https://crossorigin.me/https://api.darksky.net/forecast/f8c931a74f233b551ed121edbb142777/” +
lat +
"," +
lon;
$.getJSON(url_api, function(json) {
var skycon;
switch (json.currently.icon) {
case “clear-day”:
$(".card").html(
“icon: " +
json.currently.icon +
“Temperature: " +
json.currently.temperature
);
//skycon=Skycons.CLEAR_DAY;
skycon.set(“icon”,Skycons.CLEAR_DAY);
skycon.play();
break;
case “clear-night”:
$(”.card”).html(
“summary: " +
json.currently.summary +
“Temperature: " +
json.currently.temperature
);
break;
case “rain”:
$(”.card”).html(
"summary: " +
json.currently.summary +
“icon: " +
json.currently.icon +
“Temperature: " +
json.currently.temperature
);
//skycon=Skycons.RAIN;
skycon.set(“icon”,Skycons.RAIN);
skycon.play();
break;
case “snow”:
$(”.card”).html(
"summary: " +
json.currently.summary +
“icon: " +
json.currently.icon +
“Temperature: " +
json.currently.temperature
);
break;
case “sleet”:
$(”.card”).html(
"summary: " +
json.currently.summary +
“icon: " +
json.currently.icon +
“Temperature: " +
json.currently.temperature
);
break;
case “wind”:
$(”.card”).html(
"summary: " +
json.currently.summary +
“icon: " +
json.currently.icon +
“Temperature: " +
json.currently.temperature
);
break;
case “fog”:
$(”.card”).html(
"summary: " +
json.currently.summary +
“icon: " +
json.currently.icon +
“Temperature: " +
json.currently.temperature
);
break;
case “cloudy”:
$(”.card”).html(
"summary: " +
json.currently.summary +
“icon: " +
json.currently.icon +
“Temperature: " +
json.currently.temperature
);
break;
case “partly-cloudy-day”:
$(”.card”).html(
"summary: " +
json.currently.summary +
“icon: " +
json.currently.icon +
“Temperature: " +
json.currently.temperature
);
//skycon=Skycons.PARTLY_CLOUDY_DAY;
skycon.set(“icon”,Skycons.PARTLY_CLOUDY_DAY);
skycon.play();
break;
case “partly-cloudy-night”:
$(”.card”).html(
"summary: " +
json.currently.summary +
"icon: " +
json.currently.icon +
"Temperature: " +
json.currently.temperature
);
break;
}
console.log(json.currently.summary);
console.log(json.currently.icon);
console.log(skycon);
});
});
});
}
});

Thank you


#2

With the Skycons, I choose to use a Javascript Switch so I had code with easy maintenance to add in new icons at any time. For your post are you asking for a solution or are you sharing yours?


#3

sorry I didnt make my post clear.

I just want to know why it is the icons do not display with the code as i have it now.


#4

There’s a bug in the cdn version of Skycons that causes it to not work when passing in a named function as the 2nd argument. Skycons.CLEAR_DAY for example. Instead, pass a string like "clear_day" and it will work fine. That string will be available from the weather response object.

Your response object is called json so the icon will be at json.currently.icon for the icon representing the current conditions.


#5

Can you post a codepen link so we can debug it further? Also in the future please be sure to put code in code tags, otherwise it gets very hard to read.


#6

I thought I did. I had pressed the “<’/’>” before I pasted the code segment.


#7

Thank you so much!
Where did you find this information?
Was this in the Github documents?


#8

They give you an explanation at https://darkskyapp.github.io/skycons/ You’ll need to include <script src="https://cdnjs.cloudflare.com/ajax/libs/skycons/1396634940/skycons.min.js"></script> in the <head> section of your code.


#9

I ran into the same problem and read through the source code to figure out why it wasn’t working.