Highlight multiple states

[mdance86]

How might I highlight multiple states, by hovering over one state? Example: hover over the state of Utah, and it subsequently highlights Utah, Idaho, Colorado and Wyoming.

[adamrubin]

@mdance86 did you ever figure this out?

[mdance86]

I did not. I had to use some images overlaying each other, instead. Not ideal - but I had a deadline that needed to be met. :)

[alirazab]

I was also finding some solution so I did it actually this way may be you can get help now, altough its too late :)

$('#map').usmap({
// $(this).css('fill', 'pink');
stateStyles: {fill: '#4ecdc4', 'stroke': '#fff'},
stateHoverStyles: {fill: '#f5b021'},
'stateSpecificStyles': {
'AL' : {fill: '#eee'},
'AK' : {fill: '#eee'},
'AR' : {fill: '#eee'},
'CO' : {fill: '#eee'},
'GA' : {fill: '#eee'},
'HI' : {fill: '#eee'},
'ID' : {fill: '#eee'},
'IN' : {fill: '#eee'},
'IA' : {fill: '#eee'},
'KS' : {fill: '#eee'},
'KY' : {fill: '#eee'},
'ME' : {fill: '#eee'},
'MD' : {fill: '#eee'},
'MA' : {fill: '#eee'},
'MS' : {fill: '#eee'},
'MO' : {fill: '#eee'},
'MT' : {fill: '#eee'},
'NH' : {fill: '#eee'},
'NM' : {fill: '#eee'},
'ND' : {fill: '#eee'},
'OH' : {fill: '#eee'},
'OR' : {fill: '#eee'},
'PA' : {fill: '#eee'},
'SC' : {fill: '#eee'},
'SD' : {fill: '#eee'},
'TN' : {fill: '#eee'},
'UT' : {fill: '#eee'},
'VT' : {fill: '#eee'},
'VA' : {fill: '#eee'},
'WA' : {fill: '#eee'},
'WY' : {fill: '#eee'}
},
'stateSpecificHoverStyles': {
'AL' : {fill: '#eee', 'cursor': 'pointer'},
'AK' : {fill: '#eee', 'cursor': 'pointer'},
'AR' : {fill: '#eee', 'cursor': 'pointer'},
'CO' : {fill: '#eee', 'cursor': 'pointer'},
'GA' : {fill: '#eee', 'cursor': 'pointer'},
'HI' : {fill: '#eee', 'cursor': 'pointer'},
'ID' : {fill: '#eee', 'cursor': 'pointer'},
'IN' : {fill: '#eee', 'cursor': 'pointer'},
'IA' : {fill: '#eee', 'cursor': 'pointer'},
'KS' : {fill: '#eee', 'cursor': 'pointer'},
'KY' : {fill: '#eee', 'cursor': 'pointer'},
'ME' : {fill: '#eee', 'cursor': 'pointer'},
'MD' : {fill: '#eee', 'cursor': 'pointer'},
'MA' : {fill: '#eee', 'cursor': 'pointer'},
'MS' : {fill: '#eee', 'cursor': 'pointer'},
'MO' : {fill: '#eee', 'cursor': 'pointer'},
'MT' : {fill: '#eee', 'cursor': 'pointer'},
'NH' : {fill: '#eee', 'cursor': 'pointer'},
'NM' : {fill: '#eee', 'cursor': 'pointer'},
'ND' : {fill: '#eee', 'cursor': 'pointer'},
'OH' : {fill: '#eee', 'cursor': 'pointer'},
'OR' : {fill: '#eee', 'cursor': 'pointer'},
'PA' : {fill: '#eee', 'cursor': 'pointer'},
'SC' : {fill: '#eee', 'cursor': 'pointer'},
'SD' : {fill: '#eee', 'cursor': 'pointer'},
'TN' : {fill: '#eee', 'cursor': 'pointer'},
'UT' : {fill: '#eee', 'cursor': 'pointer'},
'VT' : {fill: '#eee', 'cursor': 'pointer'},
'VA' : {fill: '#eee', 'cursor': 'pointer'},
'WA' : {fill: '#eee', 'cursor': 'pointer'},
'WY' : {fill: '#eee', 'cursor': 'pointer'}
},
'mouseoverState': {
'HI' : function(e, data) {
//return false;
}
},

    'click' : function(e, data) {           
        var stateName = data.name;          
        var stateText = findTextAgainstStateName(stateName);            
      $('.map-text')
        .html(stateText)
        .stop()
        .css('backgroundColor', '#F5F5F5')
        .animate({backgroundColor: '#fff'}, 1000);
    }
  }); 

[pflantzdog27]

findTextAgainstStateName()
what's this function?