How to highlight multiple states on interactive map when hovering over links

In one of the previous tutorials we have learned how to create a highlightable map with links. In this tutorial we will complicate the task and show how to create multiple regions and make them highlightable with links.

How to implement highlighting for HTML5 map?

For this purpose we will need to create links and write corresponding handlers for mouseover and mouseout events. The handlers will make sure the appropriate states are highlighted on hover.

<div id = "links">
    <a href = "javascript:void(0)" onmouseover = "highlightIn('AL', 'GA', 'MS')" onmouseout = "highlightOff()">AL/GA/MS</a><br/>
    <a href = "javascript:void(0)" onmouseover = "highlightIn('KY', 'WV', 'TN')" onmouseout = "highlightOff()">Appalachian</a><br/>
    <a href = "javascript:void(0)" onmouseover = "highlightIn('AZ', 'NM')" onmouseout = "highlightOff()">Arizona/New-Mexico</a><br/>
    ...
</div>

The <a> tags are provided with onmouseover and onmouseout attributes. This makes sure the highlightIn and highlightOff handlers are called on hover.

function highlightIn(){
    if (arguments.length !== 0){
        var sid;
        for (var i = 0; i < arguments.length; i++){
            sid = getStateIdByShortName(arguments[i]);
            if (sid){
                map.stateHighlightIn(sid, '#000', '#fff');
            }
        }
    }
    return false;
}

function highlightOff(){
    var data = map_cfg.map_data;
    for (var st_obj in data){
        if (data.hasOwnProperty(st_obj)){
            map.stateHighlightOut(st_obj);
        }
    }
    return false;
}

The highlightIn handler uses a built-in object called the arguments object. The argument object contains an array of the arguments used when the function is called (invoked). This way you can simply pass as many arguments as you need (i.e. as many states per region as needed) and highlight them using the well known stateHighlightIn method.

The highlightOff handler removes the highlight from all regions by calling the stateHighlightOut method. The state IDs to pass to the method can be taken from the map_cfg.map_data property. Just loop through it taking its properties names. Use the hasOwnProperty method to avoid looping through the standard built-in object properties.

In this example, we use the demo version of the HTML5 US map.