Make States Selectable | Documentation

Our maps are often used for website navigation. For example, a user clicks on a state (or country) and is sent to a webpage with related information. In some cases, you may want your user to select more than one state. This is easy to do with our select.js plugin. Below is an example. Click on a state to select it, click again to deselect it:

The selected states are stored in the array simplemaps_select.selected. This allows you to use JavaScript to use this information in dynamic ways, such as displaying a list of selected states:

Selected States:

Download Demo (U.S) Download select.js

Installation

Here is how you can add this to your map:

1. Choose your map: HTML5 World Map HTML5 US Map HTML5 Canada Map HTML5 North America Map HTML5 County Map HTML5 Congress Map HTML5 State Map HTML5 Custom Map HTML5 Europe Map HTML5 UK Map HTML5 Australia Map HTML5 Country Map
   
2. Adjust the main_settings of the mapdata.js file so that:

   all_states_zoomable: 'no',
   state_url: '',
   

   
   

3. Embed the following on your webpage:

   <script type="text/javascript" src="mapdata.js"></script>
   <script type="text/javascript" src="usmap.js"></script>
   <script type="text/javascript" src="select.js"></script>
   <script>
     simplemaps_select.map=simplemaps_usmap; // tells the script which map to work with
     /* set any other options, for example:
     simplemaps_select.selected_color='red';
     */
   </script>
   

4. Place the following HTML on your webpage where you want your map to appear.

   <div id="map"></div>
   

5. That's it! Your map now has selectable states.

Inputs

The plugin supports the following input options:

Output

The plugin outputs the following:

Methods

The plugin outputs the following: