Make an Interactive List of States | Documentation

Interactive maps are a beautiful and intuitive way of visualizing geographic information. However, you may want to complement your map with a list of state/country names. This will help users unsure of their geography as well as provide SEO and searchability benefits. Our list.js plugin makes creating an interactive list a breeze.

Below is an example. Hovering over the country name lights the corresponding up on the map. And, hovering over a country on the map highlights the country's name in the HTML list. Give it a try:

In this example, we are using the Europe map and for brevity, only showing countries in Western Europe. Keep reading to learn how to implement this plugin with your map.

Download Demo (Europe) Download list.js


Here is how you can add this to your map:

  1. Choose your map:
  2. Embed the following on your webpage:

    <script type="text/javascript" src="mapdata.js"></script>
    <script type="text/javascript" src="europemap.js"></script>
    <script type="text/javascript" src="list.js"></script>
    <script>; // tells the script which map to work with
      /* set any other options here */
  3. By default, any non-hidden states in your mapdata.js's state_specific object will be shown in the list. You can also, manually dictate the states to list by using the include option. We did this for our Western Europe example:

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

    <div id="map"></div>
  5. Place the following HTML on your webpage where you want the interactive list to appear.

    <div id="simplemaps_list"></div>
  6. That's it! Your map will now generate a list of interactive states.


The plugin supports the following input options:

map The map object the plugin should alter. Defaults to simplemaps_usmap.
div The id of the div where the list will be generated. Defaults to simplemaps_list.
include An array of state ids to show in the list. Example: simplemaps_list.include=['US'];. If not set, all non-hidden states in mapdata.state_specific will be shown.
exclude An array of state ids to exclude from the list. Example: simplemaps_list.exclude=['FR'];.
hover_color The color of list items upon hover. Defaults to mapdata.main_settings.state_hover_color.
style By default, the plugin generates CSS (discussed below). Disable this with;.
map_to_list Allow hovering over the map to trigger hover events in the list. Defaults to true.
list_to_map Allow hovering over the list to trigger hover events in the map. Defaults to true.


By default, the plugin dynamically generates the following CSS

<style type="text/css" media="screen">
  #simplemaps_list li{cursor: pointer; list-style-type: none;}
  #simplemaps_list li:hover{color: #3B729F, font-weight: bold;}
  li.simplemaps_list_over{color: #3B729F; font-weight: bold;} //class added by map

If you want to customize this CSS, you should first set;

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