Results
Click on a state

HTML

<div id="map" style="width: 350px; height: 250px;"></div>
<div id="clicked-state"></div>

Javascript

$('#map').usmap({
  // The click action
  click: function(event, data) {
    $('#clicked-state')
      .text('You clicked: '+data.name)
      .parent().effect('highlight', {color: '#C7F464'}, 2000);
  }
});

Before including the U.S. Map script, include both the jQuery and Raphaël libraries.

<script src="js/jquery.js"></script>
  <script src="js/raphael.js"></script>
  <script src="js/jquery.usmap.js"></script>

Then create an element to hold the map somewhere on your page with a set width and height:

<div id="map" style="width: 300px; height: 300px;"></div>

And then write the script to turn the element into a map:

$(document).ready(function() {
    $('#map').usmap({});
  });

Style options

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.

SVG style attributes

fill color
The fill color of the shape or text.
{'fill': '#335577'}
stroke color
The stroke color of the shape or text.
{'stroke': '#000'}
stroke-width width
The width of the stroke.
{'stroke-width': 2}
stroke-linejoin miter | round | bevel | inherit
The shape to be used at the corners of stroked paths or basic shapes.
{'stroke-linejoin': 'round'}
font-weight weight
The font-weight of the text element.
{'font-weight': 300}
font-size positive length
The size of the text.
{'font-size': '10px'}

Events

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

The data object

name string
The two letter abbreviation of the state.
shape Element
The shape element (SVG or VML) for the state.
hitArea Element
The shape element (SVG or VML) for the transparent hit area.
labelBacking Element
The shape element (SVG or VML) for the backing of the label if there is one for the state.
labelText Element
The vector text element (SVG or VML) for the label text if there is one for the state.
labelHitArea Element
The shape element (SVG or VML) for the transparent hit area for the label if there is one for the state.

click function(event, data)

When the user clicks on a state. See the above information for how to attach an event handler to the general and state specific click event.

mouseover function(event, data)

When the user moves their mouse over a state. See the above information for how to attach an event handler to the general and state specific click event.

mouseout function(event, data)

When the user moves their mouse out of a state. See the above information for how to attach an event handler to the general and state specific click event.

Methods

trigger .usmap('trigger', state, eventType, event)

Manually trigger off an event and the resulting event handlers.

Parameters

state string
The two letter abbreviation of the state.
eventType string
The type of event to trigger
event Event (optional)
The original triggering event.

You can download U.S. Map from Github as well as view the source or even fork it. It is licensed under the BSD Standard License

Download View on Github

The U.S. Map plugin was developed by Seamus Leahy and the other folks at New Signature.

Check out our other free projects, or our award winning interactive and design work. You can find additional information in our blog.