A Javascript map of the United States built with SVG/VML by using Raphael as a jQuery plugin.
You can configure the styles of the states and labels for the default, per state, and hover. You can bind to it through jQuery to capture the events of when users click on states.
<script src="js/jquery.js"></script>
<script src="js/raphael.js"></script>
<script src="js/jquery.usmap.js"></script><div id="map" style="width: 350px; height: 250px;"></div>$().ready(function(){
$('#map').usmap();
});The native dimensions of the map are 930 by 630, however the map will resize automatically into whatever dimensions are specified on the containing HTML element. The map width/height ratio will always remain the same, so it's best to keep the containing elements width/height ratio the same.
It is important that you specify the height/width of the containing HTML element with inline styles and not a separate stylesheet. Otherwise you will get a number of JS console errors and older versions of Internet Explorer will not render at all.
Hide/Show labels for the small states along the eastern seaboard (VT, NH, MA, RI, CT, NJ, DE, MD, and DC). Defaults to true.
$('#map').usmap({
showLabels: false
});Hide/Show the non-continental states (AK and HI). Defaults to false.
$('#map').usmap({
continental: true
});The time in milliseconds for the animation between styles when hovering over a state.
$('#map').usmap({
stateHoverAnimation: 300
});The time in milliseconds for the animation between styles when hovering over a map point.
$('#map').usmap({
mapPointHoverAnimation: 300
});You can add additional click-able points on a map by specifying a mapPoints hash on the configuration hash. The keys of the hash are used for identification purpose and must be unique. Each MapPoint hash value must itself be a hash that specifies an x, y, and a label value. The x and y values specify the map coordinates for the point to appear, and the label is the next put inside of the point. The hash can also take a style, hoverStyle, and textStyle hash that can be used to override the default styles using any of the valid SVG properties.
$('#map').usmap({
mapPoints: {
'CA-07': { x: '47', y: '244', label: 'CA-07' },
'CA-23': { x: '59', y: '310', label: 'CA-23' },
'CA-26': {
x: '86', y: '347', label: 'CA-26',
style: { fill: 'blue' },
hoverStyle: { fill: 'green' }
}
}
})Note that having a MapPoint ontop of a state can make it difficult to click on the underlying state.
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 data object for the state or map point.
The two letter abbreviation of the state.
The shape element (SVG or VML) for the state.
The shape element (SVG or VML) for the transparent hit area.
The shape element (SVG or VML) for the backing of the label if there is one for the state.
The vector text element (SVG or VML) for the label text if there is one for the state.
The shape element (SVG or VML) for the transparent hit area for the label if there is one for the state.
Will always be false for a state.
The identifier string used to reference the map point it the configuration hash.
The circle element (SVG or VML) for the map point.
The circle element (SVG or VML) for the transparent hit area.
The vector text element (SVG or VML) for the map point's label text.
Will always be true for a map point.
When the user clicks on a state or map point.
When the user moves their mouse over a state or map point.
When the user moves their mouse out of a state or map point.
The usmap configuration hash accepts a function at keys named after the three events. When the event is triggered an event object and appropriate data object is passed to the provided method.
$('#map').usmap({
click: function(event, data) {
// Output the abbreviation of the state name to the console
console.log(data.name);
},
mouseover: function(event, data) {
// Output the abbreviation of the state name to the console
console.log(data.name);
},
mouseout: function(event, data) {
// Output the abbreviation of the state name to the console
console.log(data.name);
}
});It is also possible to use jQuery binding to listen for events. Binding events use the event names listed above with the 'usmap' prefix.
$('#map').on('usmapclick', function(event, data) {
// Output the abbreviation of the state name to the console
console.log(data.name);
});
$('#map').on('usmapmouseover', function(event, data) {
// Output the abbreviation of the state name to the console
console.log(data.name);
});
$('#map').on('usmapmouseout', function(event, data) {
// Output the abbreviation of the state name to the console
console.log(data.name);
});It is also possible to attach events to specific states by using their identifiers in combination with the event names.
$('#map').usmap({
clickState: {
'MD' : function(event, data) {
console.log('You interacted with the state of Maryland');
}
}
});$('#map').on('usmapclickMD', function(event, data) {
console.log('You clicked on the state of Maryland');
});Manually trigger off an event and the resulting event handlers.
$('#map').usmap('trigger', state, eventType, event)The two letter abbreviation of the state.
The type of event to trigger
The original triggering event.
The styling used for the map is highly customizable. While the map comes with many good defaults, you can override those globally as well as on a state-by-state level.
The configurations listed in this section use the following set of SVG style attributes. Not all configurations accept all the attributes, mostly the font related attributes have no impact on style that does not have a font.
The fill color of the shape or text.
{'fill': '#335577'}The stroke color of the shape or text.
{'stroke': '#000'}The width of the stroke.
{'stroke-width': 2}The shape to be used at the corners of stroked paths or basic shapes.
{'stroke-linejoin': 'round'}The font-weight of the text element.
{'font-weight': 300}The size of the text.
{'font-size': '10px'}The font of the text. Will use loaded webfonts, but is ignored in some browsers.
{'font-family': 'bebas-neue,sans-serif'}The radius of a map point.
{'radius': 20}An SVG Style hash used to style all states in their default state.
$('#map').usmap({
stateStyles: {fill: 'blue'}
});An SVG Style hash used to style all states when the in the hover state.
$('#map').usmap({
stateHoverStyles: {fill: 'red'}
});A hash of states, using the state's two letter acronym as the key. The value for each key is an SVG Style hash used to style the specific state in its default state.
$('#map').usmap({
stateSpecificStyles: {
'MD': {fill: 'yellow'},
'VA': {fill: 'teal'}
}
});A hash of states, using the state's two letter acronym as the key. The value for each key is an SVG Style hash used to style the specific state in its hover state.
$('#map').usmap({
stateSpecificHoverStyles: {
'MD': {fill: 'purple'},
'VA': {fill: 'orange'}
}
});An SVG Style hash used to style all map points in their default state. Is overridden in the mapPoint configuration hash on a point-by-point basis with style.
$('#map').usmap({
mapPointStyles: {fill: 'yellow'}
});An SVG Style hash used to style all map points labels. Is overridden in the mapPoint configuration hash on a point-by-point basis with textStyle.
$('#map').usmap({
mapPointTextStyles: {font-size: '16px'}
});An SVG Style hash used to style all map points in their hover state. Is overridden in the mapPoint configuration hash on a point-by-point basis with hoverStyle.
$('#map').usmap({
mapPointHoverStyles: {fill: 'blue'}
});If you're using the small eastern seaboard state labels, you can configure most aspects of their with these configuration options.
The states to display with labels. This can be any state, regardless of its geographic location.
The width of the labels.
The height of the labels.
The distance between labels.
The radius of the rounded corners of the labels.
The default styles for the label shapes.
The default hover styles for the label shapes.
An object to override the default styles for individual label. The object keys are the state abbreviation with the value being the style object.
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.
The styling for the label text.
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.
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.
The plugin allows for rendering multiple maps on the same page, however care must be used when doing so. The most common situation when you would render multiple maps is to have a small version that you can "click to enlarge". When doing so, you will run into the rendering hidden maps issue, so be sure to read the section on how to handle that.
Rendering Hidden Maps
Modern browsers have no problem rendering a map into a hidden div for use in a modal window or perhaps a tabbed element. Unfortunately, less modern browsers (like earlier versions of IE) will fail when trying to render into a hidden div. To handle this, you should wait to invoke .us_map() until that hidden div appears in the browser. For example, if you're using jquery-ui.tabs, you would want to attach a listener on the activate event that triggers the .us_map() call, taking care to only invoke the method once the first time the tab is activated. A simple initialization boolean can help you keep track of that.
Forked from the excellent NewSignature/us-map.