title: usa map Raphel plugin auto update and dynamic Fill color
body: <p>I am using US map to show data state wise , <a href="https://newsignature.github.io/us-map/#usage-style-options" rel="nofollow">Extension</a></p>
  
  <p>Map is working fine On hover I provide the value to each state successfully.
  But using loop.</p>
  
  <pre><code> "mouseover" : function(event, data) {    
                       $.each(__obj, function(key, value){
                         if(data.name === value.state_name){
                           var count = data.name +" : "+value.cnt;
                           $("#state_tooltip_map").show();
                           $("#state_tooltip_map").html(count);
                        }
                      });
                     },
  </code></pre>
  
  <p>the code is working fine , same this I want for state color: mean highest value state  have darker color and lowest have light color.But I am not able to do it in here : </p>
  
  <pre><code>"stateSpecificStyles": {
                           "VA": {fill: "teal"}
                        } ,
  </code></pre>
  
  <p>another problem is I want to update the whole map on click of submit without refreshing the page , I tried it but it is always giving me same value no updates.</p>
  
  <p><strong>JS :</strong> </p>
  
  <pre><code>'var jsArray = '.json_encode($data_map_range).'; 
         var __obj =  jsArray; 
         var post_count = [];
         $.each(__obj, function(key, value){
              post_count.push(value.cnt);
           });
           alert(post_count.sort(function(a, b){return a-b}));
         var stateColor = $("h2").css("color");
                      $("#map-range").usmap({
                       "showLabels": true,
                        "stateHoverStyles": {
                           fill: stateColor
                       },
                       "labelBackingHoverStyles": {
                           fill: stateColor,
                           "stroke": stateColor
                       },
                        "stateSpecificStyles": {
                           "VA": {fill: "teal"}
                        } ,
  
                      "click" : function(event, data) {
                       var selected_state_obj              = $("#" + data.name);
                       var selected_label_obj              = $("#label_" + data.name);
  
  
                       if(selected_state_obj.attr("rel") == "enabled")
                       {
                           selected_state_obj.css("fill", "#A0A0A0");
                           selected_label_obj.css("fill", "#A0A0A0");
                           selected_state_obj.attr("rel", "disabled");
                           var index = myArray.indexOf(data.name);
                           if (index &gt; -1) {
                               myArray.splice(index, 1);
                           }            
                       }
                       else
                       {
                           selected_state_obj.attr("rel", "enabled");
                           selected_state_obj.css("fill", stateColor);
                           selected_label_obj.css("fill", stateColor);
                           myArray.push(data.name);
                            $(selected_state_obj).attr("stateStyles","stroke: #000");
                        }
                     },
                     "mouseover" : function(event, data) {    
                       $.each(__obj, function(key, value){
                         if(data.name === value.state_name){
                           var count = data.name +" : "+value.cnt;
                           $("#state_tooltip_map").show();
                           $("#state_tooltip_map").html(count);
                        }
                      });
                     },
                     "mouseout" : function(event, data) {
                       $("#state_tooltip_map").hide();
                       $("#state_tooltip_map").html("");
                     },
                      });
  
                      $("#mapparentrange").mousemove(function(e){
                        $("#state_tooltip_map").css({
                           left:  (parseInt(e.pageX)-$("#location_search1").offset().left + 15),
                           top:   (parseInt(e.pageY)-$("#location_search1").offset().top + 15)
                        });
                     });'
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div style="z-index:9999; position:absolute; color:#000000; background:#FFFFFF; font-weight:bold; padding:2px; display:none; -webkit-box-shadow: 1px 1px 4px 1px rgba(145,145,145,1);-moz-box-shadow: 1px 1px 4px 1px rgba(145,145,145,1);
                                   box-shadow: 1px 1px 4px 1px rgba(145,145,145,1);" id="state_tooltip_map"&gt;&lt;/div&gt;
                              &lt;div id="mapparentrange"&gt;                 
                                  &lt;div id="map-range" style="width:100%; height: 240px;display: block"&gt;
                                              &lt;/div&gt;
                              &lt;/div&gt;
  </code></pre>