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

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. 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>
     simplemaps_list.map=simplemaps_europemap; // tells the script which map to work with
     /* set any other options here */
   </script>
   

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:

   //Optional
   simplemaps_list.include=["GB","FR","ES","IT","LU","BE","NL","DE","PT","DK","CH","IE","AT"];
   

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.

Inputs

The plugin supports the following input options:

Styling

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
</style>

If you want to customize this CSS, you should first set simplemaps_list.style=false;