Interacting with Maps via Checkboxes

If you need to select multiple regions, adding checkboxes makes interaction easier.

This can be useful to be able to quickly select various areas of a map from a list. A user need not to be familiar with geographic locations in order to locate a given section. It can also be a significantly faster way to highlight areas of a map, if the areas of interest are only in specific sections. This results in a more organized visual look presented to the user. Checkboxes are also useful on sites which allow advanced searches for their users, such as for jobs, accommodation, or media.

The following example (from our US demo version) creates a series of checkboxes that correspond to different areas on the map. Depending on where the user clicks, the highlight is added or removed.

Alabama Alaska Arizona Arkansas California Colorado Connecticut Delaware 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

The relevant JavaScript:

$(function() {
	map.on('click', function(ev, sid, map) { 
		if(document.getElementById(sid).checked) {
			document.getElementById(sid).checked = false;
			map.stateHighlightOff(sid);
		} else {
			document.getElementById(sid).checked = true;
			map.stateHighlightOn(sid, '#3CB371', '#ffffff');
		}
		
	});
	
	$('input:checkbox').click(function() {
		if(this.checked == false) {
			map.stateHighlightOff(this.id);
		} else {
			map.stateHighlightOn(this.id, '#3CB371', '#ffffff');
		}
	});
});

In this example, we use jQuery to create two click event handlers, the first function for the map, and the second for checkboxes.

In the second function statement (input:checkbox), JavaScript handles a click to a checkbox by toggling it on or off, depending on its state. Then, it calls stateHighlightOn or stateHighlightOff and passes in a reference to the area that was clicked. This changes the color of the corresponding area on the map, whether to add or remove highlighting. If highlighting is being turned on, optional parameters for the highlight color and border color may be passed.

The first function statement handles a click to the map area. It locates the selected area via getElementById, and checks or unchecks the corresponding checkbox. It then handles highlighting via stateHighlightOn or stateHighlightOff as in the other function.

The checkboxes themselves should be inserted using HTML:

<table width="100%">
<tr>
<td width="20%" valign="top" class="column"> 
	<label><input type="checkbox" id="st1">Alabama</label><br> 
	<label><input type="checkbox" id="st2">Alaska</label><br> 
	<label><input type="checkbox" id="st3">Arizona</label><br> 
	<label><input type="checkbox" id="st4">Arkansas</label><br> 
	<label><input type="checkbox" id="st5">California</label><br> 
	<label><input type="checkbox" id="st6">Colorado</label><br> 
	<label><input type="checkbox" id="st7">Connecticut</label><br> 
	<label><input type="checkbox" id="st8">Delaware</label><br> 
	<label><input type="checkbox" id="st9">D.C.</label><br> 
	<label><input type="checkbox" id="st10">Florida</label><br> 
</td>

The id of each checkbox must be specified according to the region code in settings.js. You can use any HTML layout to place these elements to a form on the page.
Your map is now much more dynamic!

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