jQuery addClass example

Change class name on click in jQuery

HTML

<script src="http://jvectormap.com/js/jquery-jvectormap-2.0.3.min.js"></script>
<link rel="stylesheet" href="http://jvectormap.com/css/jquery-jvectormap-2.0.3.css">
<script src="http://vra-oc-037/state/assets/jVectorMap/climateDivisions.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<br>

<div class="container">
  <ul class="nav nav-pills nav-justified">
    <li id="toggleData"><a href="#">Report Week vs 30-yr Normal</a></li>
    <li><a href="#">Report Week vs Prior Week</a></li>
    <li><a href="#">Daily Animation of report week and current week</a></li>
  </ul>
</div>
  
<br>

<div id="world-map-gdp">

</div>

<br>

<br>

CSS

#world-map-gdp {
  height: 700px;
  width: 700px;
  margin: 0 auto;
}

button {
  margin: 0 auto;
  
}



.range-slider {
  height: auto;
  width: 50%;
  margin: 0 auto;
}

JavaScript

var urls = ['http://vra-oc-031:82/temperature_departure_by_climate_division', 'http://vra-oc-031:82/temperature_change_by_climate_division']

$(function(){
var climateData, climateDataArray, map, currentData = 0;
$.ajax({
	url : 'http://vra-oc-031:82/temperature_departure_by_climate_division', success : function(data) {
  climateDataArray = [{},{}]
  climateData = data.data;
	for(var code in climateData) {
  	if(climateData[code] <= -20) {
    	climateDataArray[0][code] = "1";
    	climateDataArray[1][code] = "5";
    }
    else if(climateData[code] <= -15) {
    	climateDataArray[0][code] = "2";
    	climateDataArray[1][code] = "6";
    }
    else if(climateData[code] <= -10) {
    	climateDataArray[0][code] = "3";
    	climateDataArray[1][code] = "7";
    }
    else if(climateData[code] <= -5) {
    	climateDataArray[0][code] = "4";
    	climateDataArray[1][code] = "8";
    }
    else if(climateData[code] < 0) {
    	climateDataArray[0][code] = "5";
    	climateDataArray[1][code] = "9";
    }
    else if(climateData[code] == 0) {
    	climateDataArray[0][code] = "6";
    	climateDataArray[1][code] = "10";
    }
    else if(climateData[code] < 5) {
    	climateDataArray[0][code] = "7";
    	climateDataArray[1][code] = "11";
    }
    else if(climateData[code] < 10) {
    	climateDataArray[0][code] = "8";
    	climateDataArray[1][code] = "1";
    }
    else if(climateData[code] < 15) {
    	climateDataArray[0][code] = "9";
    	climateDataArray[1][code] = "2";
    }
    else if(climateData[code] < 20) {
    	climateDataArray[0][code] = "10";
    	climateDataArray[1][code] = "3";
    }
    else {
    	climateDataArray[0][code] = "11";
    	climateDataArray[1][code] = "4";
    }
  }
  
  map = $('#world-map-gdp').vectorMap({
    map: 'climate-divisions_aea_en',
    backgroundColor: '#ffffff',
    series: {
      regions: [{
        values: climateDataArray[currentData],
        attribute : 'fill',
        scale: {
        	"1":"#1d3159",
          "2":"#305194",
  ...