How to change weather icon from json to a weather icon I drew myself

Question

I am trying to change the weather icons that I get from the API to the ones I have drawn myself on Photoshop! My variables are in french and the comments too, if you need translations to understand my code please ask!

<script type="text/javascript">
        jQuery(document).ready(function($) {
            var maLatitude;     /*Variable gobale contenant la latitude*/
            var maLongitude;    /*Variable gobale contenant la longitude*/  

            if (navigator.geolocation)
                navigator.geolocation.getCurrentPosition(showPosition);
            else
            alert("Votre navigateur supporte pas la géolocalisation, essayez de mettre à jour votre navigateur!");
        }); 

        function showPosition(position){
            maLatitude= position.coords.latitude;
            maLongitude= position.coords.longitude; 

        $.ajax({
            url : "http://api.wunderground.com/api/API_KEY/geolookup/conditions/lang:FC/q/"+maLatitude+","+maLongitude+".json",
            dataType : "jsonp",
            success : function(parsed_json) {

                var location = parsed_json['location']['city'];
                var temp_c = parsed_json['current_observation']['temp_c'];  
                var tempRessentie = parsed_json['current_observation']['feelslike_c'];  
                var wicon = parsed_json['current_observation']['icon'];
                var condition = parsed_json['current_observation']['weather'];
                var vent_kmh = parsed_json['current_observation']['wind_kph'];
                var rafales = parsed_json['current_observation']['wind_gust_kph'];
                var visibilite = parsed_json['current_observation']['visibility_km'];

                $("div.ville").append("<div class='endroit'>" + location + " </div>"+
                                        "<div class='temp'>" + temp_c + " °C</div>"+
                                        "<div> Temp. ressentie : "+tempRessentie+" °C</div>"+
                                        "<div class='triangle'></div>"+
                                        "<div class='icone'><img src='http://icons-ak.wxug.com/i/c/k/"+wicon+".gif' alt='"+condition+"' title='"+condition+"'/></div>"+
                                        "<div class='condition'>"+condition+"</div>"+
                                        "<div>Vent : "+vent_kmh+" km/h</div>"+
                                        "<div>Rafales : "+rafales+" km/h</div>"+
                                        "<div>Visibilité : "+visibilite+" km</div>");
                }
        }); 
    }
    </script>

Answer 1

So right here:

 "<div class='icone'><img src='http://icons-ak.wxug.com/i/c/k/"+wicon+".gif' alt='"+condition+"' title='"+condition+"'/></div>"

Change it to:

 "<div class='icone'><img src='http://YourServer.com/yourIcons/"+ wicon +".gif' alt='"+condition+"' title='"+condition+"'/></div>"

And make sure you icons are named the same as they have.

Now, if you insist on having different names, you'll need to map their names to your names, which should be fairly trivial.

Answer 2

Create an object an put the url for each of the weather icons into the object with a name representing the weather condition, then get the correct url by using the correct name:

var weatherIcons = {
   snowy:"/snowyicon.jpg",
   rainy:"/rainyicon.jpg",
   sunny:"/sunnyicon.jpg"
};

...

var condition = parsed_json['current_observation']['weather'];
var iconTOUse = weatherIcons[condition];

var element = '<img src="'+iconTOUse+'" />';