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?