title: Skycons not showing up
body: <p>I'm creating a basic weather app. It gets the weather data from the open weather API and then displays the temperature and location. I found SKYCONS and thought they would be a nice and easy way to add icons to my app. However, they won't show up. </p>
  
  <pre><code>&lt;link rel="stylesheet" href="bootstrap.css"/&gt;
  &lt;link rel="stylesheet" href="style.css"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://rawgithub.com/darkskyapp/skycons/master/skycons.js"&gt;&lt;/script&gt;
  &lt;script src="Script.js"&gt;&lt;/script&gt;
  
  
  &lt;body&gt;
      &lt;div class="col-xs-12 text-center"&gt;
          &lt;h1&gt;Weather App&lt;/h1&gt;
          &lt;div class="container"&gt;
              &lt;br&gt;
              &lt;h3&gt;&lt;span id = "city"&gt;{City here}&lt;/span&gt;&lt;span id = "country"&gt;{Country here}&lt;/span&gt;&lt;/h3&gt;
              &lt;h1&gt;&lt;span id = "temperature"&gt;{Temperature here}&lt;/span&gt;&lt;span id="unit"&gt;&amp;#8457&lt;/span&gt;&lt;/h1&gt;
              &lt;h2&gt;&lt;span id = "weather"&gt;{Weather here}&lt;/span&gt;&lt;/h2&gt;
              &lt;br&gt;
              &lt;p class = "text"&gt;&lt;/p&gt;
              &lt;br&gt;
              &lt;figure id = "icon"&gt;&lt;canvas id="partly-cloudy-night" width="175" height="175"&gt;&lt;/canvas&gt;&lt;/figure&gt;
              &lt;br&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Here is the script:</p>
  
  <pre><code>$(document).ready(function(){
  
      // gets user's location; shows Earth weather if location cannot be accessed
      var longitude = 0;
      var latitude = 0;
      if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
              latitude = Math.floor(position.coords.latitude);
              longitude = Math.floor(position.coords.longitude);
          });
      }
  
      $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&amp;lon=" + longitude + "&amp;appid=44db6a862fba0b067b1930da0d769e98", function(json){
  
          // gets data from json
          $("#city").html(json.name);
          $("#country").html(", " + json.sys.country);
          var weather = json.weather[0].main;
          $("#weather").html(weather);
          var tempInKelvin = parseFloat(json.main.temp);
          var tempInCelsius = Math.round((tempInKelvin - 273.15)*10)/10;
          var tempInFahrenheit = tempInCelsius + 32;
          $("#temperature").html(tempInFahrenheit); // shows temperature in Fahrenheit by default
  
          // switches between Fahrenheit and Celsius when clicked
          var iterator = 1; // because .toggle() was deprecated in jQuery 1.9
          $("#unit").on("click", function(){
              if (iterator % 2 == 1) { 
                  $("#unit").html("&amp;#8451"); // change to Celsius
                  $("#temperature").html(tempInCelsius);
              } else {
                  $("#unit").html("&amp;#8457"); // change back to Fahrenheit
                  $("#temperature").html(tempInFahrenheit);
              }
              iterator++;
          });
  
          // Changes background according to time of day
          var time = new Date();
          time = time.getHours();
          var color =  "";
          if (time &gt;= 19 || time &lt;= 4) {
              color = "#283048";
          } else if (time &gt;= 17) {
              color = "#F0CB35";
          } else if (time &gt;= 7) {
              color = "#C02425";
          } else {
              color = "#FF512F";
          }
  
          $("body").css("background-color", color);
  
          // adds icon, depending on time and weather
          var icons = new Skycons({"color": "red"});
          var htmlToAdd = '';
          switch (weather.toLowerCase()) {
              case "clouds":
                  if (time &gt;= 19 || time &lt;= 4) {
                      htmlToAdd = '&lt;canvas id="partly-cloudy-night" width="175" height="175"&gt;&lt;/canvas&gt;';
                      icons.set("partly-cloudy-night", Skycons.PARTLY_CLOUDY_NIGHT);
                  } else {
                      htmlToAdd = '&lt;canvas id="cloudy" width="175" height="175"&gt;&lt;/canvas&gt;';
                      icons.set("cloudy", Skycons.CLOUDY);
                  }
                  $("#weather").html("Cloudy");
                  break;
              case "rain":
                  htmlToAdd = '&lt;canvas id="rain" width="175" height="175"&gt;&lt;/canvas&gt;';
                  icons.set("rain", Skycons.RAIN);
                  break;
              case "snow":
                  htmlToAdd = '&lt;canvas id="snow" width="175" height="175"&gt;&lt;/canvas&gt;';
                  icons.set("snow", Skycons.SNOW);
                  break;
              case "clear":
                  if (time &gt;= 19 || time &lt;= 4) {
                      htmlToAdd = '&lt;canvas id="clear-night" width="175" height="175"&gt;&lt;/canvas&gt;';
                      icons.set("clear-night", Skycons.CLEAR_NIGHT);
                  } else {
                      htmlToAdd = '&lt;canvas id="clear-day" width="175" height="175"&gt;&lt;/canvas&gt;';
                      icons.set("clear-day", Skycons.CLEAR_DAY);
                  }
                  break;
              default:
                  htmlToAdd = '&lt;canvas id="rain" width="175" height="175"&gt;&lt;/canvas&gt;';
                  icons.set("rain", Skycons.RAIN);
          }
  
          $("#icon").html(htmlToAdd);
          icons.play();
      });
  });
  </code></pre>
  
  <p>And yes, I know I'm doing everything inside the getJSON, but I didn't know how to store json values to global variables without getJSON's asynchronous way of functioning getting in the way.</p>