Add a Scrollable Navigation Bar to Your Map | Documentation

This tutorial shows you how to use the navbar.js plugin to add a scrollable navigation bar above your SimpleMaps interactive map. The bar displays clickable regions or states, with hover effects that highlight corresponding map areas. It adapts dynamically: regions are shown when zoomed out, and states appear when zoomed into a region. Scroll arrows appear when the list overflows, making it ideal for maps with many regions or states.

Below is a working example using the US map. Hover over a region name to pulse it on the map, or click to zoom in and see its states.

Interactive Demo: The example above shows a US map with a scrollable navigation bar. Try hovering over region names to see them pulse on the map, or click to zoom in and see individual states.

Download navbar.js

Installation

Here is how you can add this to your map:

1. Choose your map: HTML5 US Map HTML5 World 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="usmap.js"></script>
   <script type="text/javascript" src="navbar.js"></script>
   <script>
     simplemaps_navbar.map = simplemaps_usmap; // tells the script which map to work with
     /* set any other options here */
   </script>
   

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

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

   The plugin will automatically create the navigation bar inside the map container. No additional divs are required!

4. That's it! Your map will now have a scrollable navigation bar automatically created inside the map container that lists regions when zoomed out and states when zoomed into a region.

Customization Options

The plugin supports the following configuration options:

Example configuration:

simplemaps_navbar.map = simplemaps_usmap;
simplemaps_navbar.exclude = ['AK'];
simplemaps_navbar.list_to_map = true;
simplemaps_navbar.level_to_show = 'states';
simplemaps_navbar.apply_css = false;
simplemaps_navbar.states_label = 'Provinces';
simplemaps_navbar.regions_label = 'Areas';

Styling the Navigation Bar

The plugin includes default CSS for a clean, scrollable look. Here's a snippet of the default styles:

.map_navbar {
    display: flex;
    align-items: center;
    background-color: #f8f9fa;
    padding: 5px 10px;
}
.map_navbar_elements li {
    padding: 8px 16px;
    font-size: 16px;
    cursor: pointer;
}
.map_navbar_elements li:hover {
    color: #343a40;
    background-color: #e9ecef;
}
.map_navbar_arrow {
    font-size: 20px;
    color: #343a40;
    cursor: pointer;
}

To customize, set simplemaps_navbar.apply_css = false and add your own styles targeting these classes.

How It Works

The navigation bar operates dynamically based on the map's zoom level and user interaction:

Zoomed Out: The bar shows regions (e.g., "Northeast," "Southwest") sorted alphabetically. Click a region to zoom in.

Zoomed In: The bar switches to states within the selected region (e.g., "Texas," "Oklahoma").

Hover Effects: With list_to_map: true, hovering over a name pulses the region/state on the map.

Scrolling: Arrows appear when the list exceeds the container width, with smooth scrolling on click.

Notes

Ensure your mapdata.js includes region definitions (e.g., mapdata.regions) for region-level navigation to work. If the bar doesn't appear, check the console for warnings (e.g., missing container or map variable).

Still have questions? Search our FAQs or contact support at [email protected].