How to show content next to the map when a state is clicked? (When the content you want to show is in the file itself)

This functionality is already built into the WordPress plugin, and does not require coding. If you're using the HTML5 version of the map, the detailed instructions are below.

Setting up the map data

Let’s start by downloading the example project from this link.

In the settings.js file you will find the settings for our clickable map. This contains the data for our map of the United States. You can find the individual states defined in the map_data object:

    "st3": {
        "id": 3,
        "name": "Arizona",
        "shortname": "AZ",
        "link": "",
        "class": "pointer",
        "comment": "",
        "image": "",
        "content_data_id": "div3",
        "color_map": "#0098BA",
        "color_map_over": "#366CA3"
    },
	

Each state object contains obvious properties such as the name and shortname to be shown. The color of the item and what color is shown when you hover over a state are also defined here.

There is also a property "content_data_id", which will determine the identifier of the corresponding <div>.

Creating the lists

We will create our lists using <div> elements. These <div> elements will contain the content for our lists. This content can take different forms. For example, the list for Washington does not certain images, only text:

	<DIV id="div1" class="divclass">
                <b>Washington</b><br><br>

                <b>Sample Art & Design, Ltd.</b><br>
                1234 Sample Road<br>
                City, Washington, 12345<br>
                123-456-7890<br>
                <a href="#">https://www.domain.com</a>
                <br><br>
	…
	</DIV>
	

For other states, the HTML content for the list also includes image tags.

This flexible approach allows you to create the exact style of list you would like. You may have noticed that each list is styled using the same CSS class, class="divclass". This plays a vital role in how we will display these lists when each state is clicked. Let’s learn how!

Making the list appear when a state is clicked using <div> elements

As we have mentioned, each list we created is belongs to the class of class="divclass". For example:

• <DIV id="div1" class="divclass"> <!--Washington -->
• <DIV id="div2" class="divclass"> <!--Illinois -->
• <DIV id="div3" class="divclass"> <!--Arizona -->
• <DIV id="div4" class="divclass"> <!--Arkansas -->

Also, in the HTML code of the page, you will find the following style tags at the top of the page:

 <style>
        .divclass {
            display: none;
        }
        .active {
            display: block;
        }
 </style>
	

This defines two classes. Anything of class “divclass” will have the property of display: none. The display property is the most important CSS property for controlling layout. Usually display: none is used with JavaScript to hide and show elements without deleting and recreating them. In our case, this will hide the lists we have created.

The other class is “active”. Any objects belonging to this class will have the property display: block. When display: block is active it will display an element as a block element. It will start on a new line and take up the entire width.

Let’s look at the method that handles the event when a user clicks on a state.

<div id="map-container" class="map__content">
            <script>
                var map = new FlaMap(map_cfg);
                map.drawOnDomReady('map-container', function(map) {

                    var selected = null;

                    map.on('click', function(ev, sid, map) {
                        var was_selected = !!selected;
                        if (selected && selected != sid) {
                            map.stateHighlightOff(selected);
                            selected = null;
                        }
                        if (sid !== selected) {
                            map.stateHighlightOn(sid, '#ff0000');
                            selected = sid;
                            $(".divclass").removeClass("active");
                            var div = map.fetchStateAttr(sid, "content_data_id");
                            if (div) {
                                $("#content_container").hide();
                                $("#" + div).addClass("active");
                            } else {
                                $("#content_container").show();
                            }
                        }
                    });
                });
            </script>
</div>
	

You can see how the map gets created using the data we configured for map_cfg in our settings.js file:

var map = new FlaMap(map_cfg);

The page will render the map when the page DOM has been loaded:

map.drawOnDomReady('map-container');

We have handled the creation and rendering of our map, but how do we get the list to appear when a state is clicked?

The function map.on('click', function(ev, sid, map) acts as a toggle for each state. The <div> element of that state (<DIV id="div1" class="divclass"> <!--Washington -->) will either get the class of “divclass” or “active”. Remember it is these classes that determine whether the list becomes visible:

 <style>
        .divclass {
            display: none;
        }
        .active {
            display: block;
        }
 </style>
	

State-specific lists of information at your fingertips

What else could you use this functionality for? Do you have a use case where your users would benefit from being shown information that varied from state to state? Have fun building an interactive map of your own using Fla-shop.com!