Find all products for your country

How to highlight multiple states with 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.

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.


Privacy policy   |   Terms of Use

Home  |  Products  |  Showcase Gallery  |  Custom Design Service  |  Free Maps  |  Support  |  Contact
© 2006-2018 All Rights Reserved.
Fla-shop.com - Interactive Maps for Websites
Follow us Follow us on Twitter Follow us on Facebook