How to create a highlighted map with links using API

The list, sorted alphabetically, allows you to quickly select the desired state. The state highlighted by the API is defined by the ID of the corresponding link. When the user hovers over the link, the corresponding state on the map is highlighted.

Highlighting states with a JavaScript map

In the HTML code, links to the states are defined as follows:

<table width="100%">
<tr>
<td width="10%" valign="top" class="column"> 
	<a id="st1" href="javascript:void(0);">Alabama</a><br> 
	<a id="st2" href="javascript:void(0);">Alaska</a><br>
	<a id="st3" href="javascript:void(0);">Arizona</a><br>
	//
</td> 
</tr>

In the code above, a simple HTML table is created with links to each state. When you hover your cursor over a link, the corresponding state is highlighted on the map, allowing the user to locate it.

The relevant JavaScript:

<script>
	$(function() {
		map.on('mousein', function(ev, sid, map) { 
		    $('a#' + sid).addClass('map_hover');
		});
		map.on('mouseout', function(ev, sid, map) { 
		    $('a#' + sid).removeClass('map_hover');
		});
		//
		$('a').on('mouseover', function(ev) {
			var id = $(this).attr('id'); map.stateHighlightIn(id);
		})
		$('a').on('mouseout', function(ev) {
			var id = $(this).attr('id'); map.stateHighlightOut(id);
		})
	});
</script>

The first two function statements (map.on (event, handler)) handle hovering of the map area ("mousein" and "mouseout" events). They locate the link via $('#idName'), where the idName is accessible from inside the on method of this plugin via the sid parameter, and toggle the CSS map_hover class to the text links via jQuery methods addClass and removeClass.

The CSS rules provided below change the appearance of this link and highlight it turning it white on black. You can assign any CSS rules you want.

a.map_hover{
	color: #fff;
	background-color: #000;
	padding-top: 1px;
	padding-bottom:1px
}

In the last two function statements $('a').on( event, handler) the JavaScript processes hovering of the links. The states on the map are accessed with their IDs, which can be passed to plugin's methods to make changes to the map.

Here, the ID of the state associated with the link is taken via $(this).attr('id'). This ID is then passed to stateHighlightIn and stateHighlightOut methods responsible for highlighting of the state or returning it to the initial state respectively. If highlighting is being turned on, optional parameters for the highlight color and border color can be passed.

In this example, we use the demo version of the HTML5 US map.