Customize the appearance of the states by default or on hover. Override individual state settings to create heat maps and other features.

stateStyles style object

The default styles for the state shapes.

$('#map').usmap({
  stateStyles: {fill: 'blue'}
});

stateHoverStyles style object

The default hover styles for the state shapes.

$('#map').usmap({
  stateHoverStyles: {fill: 'red'}
});

stateHoverAnimation milliseconds

The time in milliseconds for the animation between styles when hovering over a state shape.

$('#map').usmap({stateHoverAnimation: 300});

stateSpecificStyles {<state>: <style object>}

An object to override the default styles for individual states. The object keys are the state abbrivation with the value being the style object.

$('#map').usmap({
  stateSpecificStyles: {
    'MD': {fill: 'yellow'},
    'VA': {fill: 'teal'}
  } 
});

stateSpecificHoverStyles {<state>: <style object>}

An object to override the default hover styles for individual states. The object keys are the state abbrivation with the value being the style object.

$('#map').usmap({
  stateSpecificHoverStyles: {
    'MD': {fill: 'purple'},
    'VA': {fill: 'orange'}
  } 
});

showLabels boolean

Turn on or off the display of the labels.

$('#map').usmap({showLabels: true});

labelWidth pixels

The width of the labels.

labelHeight pixels

The height of the labels.

labelGap pixels

The distance between labels.

labelRadius pixels

The radius of the rounded corners of the labels.

labelBackingStyles style object

The default styles for the label shapes.

labelBackingHoverStyles style object

The default hover styles for the label shapes.

stateSpecificLabelBackingStyles

An object to override the default styles for individual label. The object keys are the state abbreviation with the value being the style object.

stateSpecificLabelBackingHoverStyles

An object to override the default hover styles for an individual label. The object keys are the state abbreviation with the value being the style object.

labelTextStyles

The styling for the label text.

stateSpecificLabelTextStyles

An object to override the default styles for an individual label text. The object keys are the state abbreviation with the value being the style object.

stateSpecificLabelTextHoverStyles

An object to override the default hover styles for an individual label text. The object keys are the state abbreviation with the value being the style object.

Use events to connect the U.S. Map with your custom code. With events, you can allow a function to react to user interactions.

All events have a similar pattern in their arguments and ability to either target individual or all states.

The event handler is passed two arguments: the jQuery event object and a date object for the state.

As an option:

$('#map').usmap({
  <event>: function(event, data) {
    // Output the abbreviation of the state name to the console
    console.log(data.name);
  }
});

Binding it:

$('#map').on('usmap<event>', function(event, data) {
  // Output the abbreviation of the state name to the console
  console.log(data.name);
});

Instead of binding to all states, you can bind to a specific state as well. You can pass an object as the <event>State option where the key is the state abbreviation. Or instead, you can use the jQuery event API to bind to the usmap<event><state abbreviation>

As an option:

$('#map').usmap({
  <event>State: {
    'MD' : function(event, data) {
      console.log('You interacted with the state of Maryland');
    }
  }
});

Binding it:

$('#map').on('usmap<event>MD', function(event, data) {
  console.log('You clicked on the state of Maryland');
});

The order of which the events are triggered are:

1. The state specific handler set in the options
2. State specific handlers set through the jQuery event API
3. The general state handler set in the options
4. The general handlers set through the jQuery event API