Find all products for your country

Creating a Highlightable Map with Links

A map can be made more interactive with additional links to states provided as a list. That could be especially useful when a user is not familiar with geography of the country of his or her interest. Users do not need be familiar with geographic locations in order to pick a given section in the map. The state to highlight is determined by the ID of the corresponding link. When the user moves the cursor over the link, the corresponding area on the map is highlighted.

Alabama
Alaska
Arizona
Arkansas
California
Colorado
Connecticut
Delaware
D.C.
Florida
Georgia
Hawaii
Idaho
Illinois
Indiana
Iowa
Kansas
Kentucky
Louisiana
Maine
Maryland
Massachusetts
Michigan
Minnesota
Mississippi
Missouri
Montana
Nebraska
Nevada
New Hampshire
New Jersey
New Mexico
New York
North Carolina
North Dakota
Ohio
Oklahoma
Oregon
Pennsylvania
Rhode Island
South Carolina
South Dakota
Tennessee
Texas
Utah
Vermont
Virginia
Washington
West Virginia
Wisconsin
Wyoming

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. The links can lead to pages with user specified content. Mousing over a link highlights the corresponding state on the map allowing the user to discover its location.

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 mousing 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. The user can specify these CSS rules in whatever manner he desires.

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 mousing 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 area 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.


Privacy policy   |   Terms of Use

Home  |  Products  |  Showcase Gallery  |  Custom Design Service  |  Free Maps  |  Support  |  Contact
© 2006-2018 All Rights Reserved.
Fla-shop.com - Interactive Maps for Websites
Follow us Follow us on Twitter Follow us on Facebook