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 display 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:
    2. Adjust the main_settings of the mapdata.js file so that:
      all_states_zoomable: 'no',
      state_url: '',
      auto_load: 'no',
      

    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:

    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.

    Output

    The plugin outputs the following:

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

    Methods

    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.

    © Simplemaps.com 2010-2017 | Home | License | Privacy Policy | Releases | Testimonials | Resources | Documentation
    Formerly FlashUSAmap.com and Flashworldmap.com