usa map Raphel plugin auto update and dynamic Fill color

Question

I am using US map to show data state wise , Extension

Map is working fine On hover I provide the value to each state successfully. But using loop.

 "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);
                      }
                    });
                   },

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 :

"stateSpecificStyles": {
                         "VA": {fill: "teal"}
                      } ,

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.

JS :

'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 > -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)
                      });
                   });'

HTML

<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"></div>
                            <div id="mapparentrange">                 
                                <div id="map-range" style="width:100%; height: 240px;display: block">
                                            </div>
                            </div>

What is the map format? Why not using SVG? it is easier to work — Mohammad Kermani, Feb 25 '16 at 09:47
And what is the problem with` "stateSpecificStyles": { "VA": {fill: "teal"} } ,` and why not using a loop for it? you can set an data-name for each state like VA, MD and then by loop set color and ... for it — Mohammad Kermani, Feb 25 '16 at 10:17

score 1 · Accepted Answer · edited May 23 '17 at 12:15

If your map is SVG, you can change the state color using css. for example each state (path) has its own class or id, then you can change its color, for example VA has a class of .id_va, here can be your css (here I use a map from here):

path:hover{
fill:orange;
}

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" fill="#656565"
  width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path d="M512,224H122.562L301.281,45.281L256,0L0,256l256,256l45.281-45.281L122.562,288H512V224z"/>
</svg>

You can use your class or id instead of path and change the fill color, and even you can have click and more options and easy to do by JQuery (working with svg and JQuery)

yes it is working but i want dynamic , i have state and it value cumming from database in php i want to use that value in to color it just like i did on hover. — Amitesh Kumar, Feb 25 '16 at 10:09

usa map Raphel plugin auto update and dynamic Fill color

1 Answers1