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.
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.
|
|
|
|
|
$(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.
Tutorials
How to install HTML5 map on a website
Interacting with map via checkboxes
Creating a highlightable map with links
Map Interaction with drop-down list of states
How to display a lightbox on click on map
How to highlight multiple states with links
How to make an interactive heatmap
Documentation
API reference