Interaction of interactive map and form with checkboxes. An example of using the map API.

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.

A working example with a map and checkbox form can be tested in the new Visited States Map builder. It is a map generator of visited states, and a similar script is used there.

The following example (based on USA HTML map) creates a series of checkboxes that correspond to different states on the map. Depending on where the user clicks, the highlight is added or removed.

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 state that was clicked. This changes the color of the corresponding state 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. It locates the selected state 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.