Capturing entity roll over/out events using JavaScript

FusionMaps allows you to capture roll over/out events in your JavaScript code whenever entity in map has been hovered upon. This feature can be particularly useful if you want to show additional information for each entity on roll over.

To enable this, the first step is to set registerWithJS flag of map as 1 and then add exposeHoverEvent='1' attribute to <map> element, as shown under:

<div id="map1div">
   FusionMaps
</div>
<script language="JavaScript">
   var map1 = new FusionMaps("../../FusionMaps/FCF_World.swf", "map1Id", "400", "300", "0", "1");
   map1.setDataXML("<map exposeHoverEvent='1'>...</map>");
   map1.render("map1div");
</script>

Now, whenever an entity in the map is rolled over, FC_Event method is called with following parameters: FC_Event(DOMId, eventType, objParams), where:

  • DOMId is the Id of the map (string) in the page. You can use this to track events generated from multiple maps in the same page.
  • eventType is a text value representing the event generated by map. Currently, two events are supported - namely rollOver and rollOut.
  • objParams is an object containing the required parameters. In case of rollOver and rollOut, the following parameters are passed for each entity: id, sName (short name), lName (long name) and value.

The following code shows an example of how to track roll-over events and display information about the entity in a DIV below the chart.

<HTML>
<HEAD>
    <TITLE>FusionMaps & JavaScript - Entity Hover Capture</TITLE>
    <SCRIPT LANGUAGE="Javascript" SRC="../../JSClass/FusionMaps.js"></SCRIPT>
    <SCRIPT LANGUAGE="JavaScript">
        function FC_Event(DOMId, eventType, objParams){
            if (eventType=="rollOver"){
                document.getElementById("content").innerHTML = "You rolled over entity with id as " + objParams.id + " having name as " + objParams.lName + " ("+ objParams.sName + ") and value as " + objParams.value;
            }else{
                document.getElementById("content").innerHTML = "Please roll over an entity to see details.";
            }
        }
    </SCRIPT>
</HEAD>
<BODY>
    <CENTER>
    <h2>FusionMaps and JavaScript - Entity Hover Capture Example</h2>

    <div id="map1div">
        FusionMaps
    </div>
    <script language="JavaScript">
        var map1 = new FusionMaps("../../Maps/FCMap_World.swf", "map1Id", "750", "400", "0", "1");
        map1.setDataXML("<map exposeHoverEvent='1' borderColor='005879' fillColor='D7F4FF' numberSuffix=' Mill.' includeValueInLabels='1' labelSepChar=': ' baseFontSize='9'><data> <entity id='NA' value='515' /><entity id='SA' value='373' /><entity id='AS' value='3875' /><entity id='EU' value='727' /><entity id='AF' value='885' /><entity id='AU' value='32' /></data></map>");
        map1.render("map1div");
    </script>
    <br><center><div id='content'>Please roll over an entity to see details.</div></center>
    </CENTER>
</BODY>
</HTML>

In the above code, we're first creating a world map with DOM Id as map1Id. We also register it with JavaScript and set it to expose hover events. Thereafter, we've created a function FC_Event to track the events generated from this map. This function gets invoked whenever the user rolls over a map entity. In this function, we just get the parameters of the entity and display it in content DIV.