Question

I am working with a pretty cool interactive us map using jquert from newsignature (http://newsignature.github.com/us-map/). I am having trouble figuring out how I can enter unique information for each state when clicked on. In other words, when a user would click on Washington they would get certain information vs. when the click on Arkansas. Perhaps even the ability to have the content styled.

The current code I am using is:

$(document).ready(function() {
  $('#map').usmap({
    'stateSpecificStyles': {
      'AK' : {fill: '#0F253F'}
    },
    'stateSpecificHoverStyles': {
      'HI' : {fill: '#0F253F'}
    },

    'mouseoverState': {
      'HI' : function(event, data) {
        //return false;
      }
    },


    'click' : function(event, data) {
      $('#alert')
        .text('Click '+data.name+'  copy ')
        .stop()
        .css('backgroundColor', '#ff0')
        .animate({backgroundColor: '#ddd'}, 1000);
    }
  });


});

What I would like to see happen is when you click on a specific state it displays information regarding that state vs. the same info for each state.

Answer 1

Well, the state that they clicked on is in the data.name property. There are many ways to go about this. What have you tried?

$('#map').usmap({
  // The click action
  click: function(event, data) {
    var description = "No state info loaded for this state.";
    switch(data.name)
    {
        case 'IL':
            description = 'You clicked on the Land of Lincoln!';
            break;
        case 'MO':
            description = 'You clicked on the Show-Me State!';
            break;
        // etc
    }
    $('#clicked-state')
      .text(description)
      .parent().effect('highlight', {color: '#C7F464'}, 2000);
  }
});

Actually, now that I look more at the documentation, you could also make state-specific methods like this:

$('#map').on('usmapclickIL', function(event, data) {
    $('#clicked-state')
      .text('You clicked on the Land of Lincoln!')
      .parent().effect('highlight', {color: '#C7F464'}, 2000);
});