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


    Here is how you can add this to your map:

    1. Choose your 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>; // tells the script which map to work with
        /* set any other options, for example:
    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.


    The plugin supports the following input options:

    map The map object the plugin should alter. Defaults to simplemaps_usmap.
    selected_color The color states will be when selected. Defaults to mapdata.main_settings.state_hover_color.
    on_shift If true, additional states will only be selectable if SHIFT is held down.
    max If set, the maximum number of states that can be selected. First in, first out. false by default.


    The plugin outputs the following:

    selected An array containing the ids of the currently selected states..


    The plugin outputs the following:

    select(id) Allows you to dynamically select a state by id.
    deselect(id) Allows you to dynamically deselect a state by id.
    select_all() Allows you to dynamically select all states.
    deselect_all() Allows you to dynamically deselect all states.

    Home | License | Privacy | Releases | Testimonials | Resources | Documentation | Order Lookup | All Maps | FAQs
    Formerly and is a product of Pareto Software, LLC. © 2010-2024.