Capturing Mouse events

FusionMaps XT uses FusionCharts JavaScript Class that takes care of all the products of FusionCharts Suite XT including FusionMaps XT.

Starting FusionMaps XT, you can capture the following mouse events:

  • Click on legend items (in icon based legend) using LegendItemClicked event
  • Click on markers using MarkerClicked event
  • Hover on marker using MarkerRollover event
  • Hover out from markers using MarkerRollout event
  • Click on connectors using ConnectorClicked event
  • Hover on connectors using ConnectorRollover event
  • Hover out from connectors ConnectorRollout event
  • Hover on entities using EntityRollover event
  • Hover out from entities using EntityRollout event

Existing users: Prior to FusionMaps XT, entity roll over/out events could be captured through a single event - FC_Event. Although deprecated, you can continue to use this event in your existing code without any problem.

These events can be particularly useful if you want to show additional information or perform additional processing for mouse click or hover on respective objects. In this section we will see how to capture and make use of these events.

Note: Before you go further with this page, we recommend you to please see the previous section, Listening to events, as we start off from concepts explained in that page.

Using LegendItemClicked event

LegendItemClicked event is raised when any of the legend items are clicked. The event can be listened using advanced event registration model. In the argumentsObject it provides the minimum (minRange) and maximum (maxRange) values of the color range represented by the legend item.

The following example listens to LegendItemClicked event and shows the minimum and maximum values (of the color range associated with the clicked legend item) in a message box:

<html>
  <head> 	
    <title>FusionMaps XT - listen to LegendItemClicked event</title> 	
    <script type="text/javascript" src="Maps/FusionCharts.js">
    </script>
  </head>   
  <body>     
    <div id="mapContainer">FusionMaps XT will load here!</div>          
    <script type="text/javascript"><!-- 	

      var myMap = new FusionCharts( "Maps/FCMap_World.swf", "myMapId", "400", "300", "0" );
      myMap.setXMLUrl("Data.xml");
      myMap.render("mapContainer");
					
      function myChartListener(eventObject, argumentsObject){
         alert( "You have clicked the legend representing the color range having "  + argumentsObject.minRange + " as minimum value and "  + argumentsObject.maxRange + " as the maximum value." );
      }

      FusionCharts("myMapId").addEventListener ("LegendItemClicked" , myChartListener );

    // -->     
    </script> 	   
  </body> 
</html>

Note: LegendItemClicked event is not applicable in Gradient Legend.

Using MarkerClicked event

MarkerClicked event is raised when a marker is clicked. The event can be listened using advanced event registration model. In the argumentsObject it provides the data and position of the marker through the following properties:

  • id: ID of the marker
  • label: Marker label
  • x and y: The original x and y positions of the marker. This x and y positions are the values set through the marker definition in XML/JSON data.
  • scaledX and scaledY: Scaled x and y positions of the marker. These scaled values proportionate to the scaled dimension of the map.

    Each map is created using a specific width and height. These dimensions are specified as original dimensions in the Map Specification Sheet of the respective map. Marker's x and y positions are defined in the XML/JSON with respect to the original dimensions of the map. However, a map's dimensions are scaled based on the map size set while rendering the map. Accordingly, the x and y positions of the markers also get scaled.

  • chartX and chartY: The x and y positions of the marker with respect to the top-left corner of the map canvas (that is, 0,0 position).

You can use this event to create external HTML based elements (like panels, information balloons etc.) having information related the marker, over/near the marker. For example, when clicked, you can show a big callout box on top of a city marker with detailed weather data (possibly fetched from web services etc.).

The following example listens to MarkerClicked event and shows all the properties passed by the argumentsObject  in a message box:

<html>
  <head> 	
    <title>FusionMaps XT - listen to LegendItemClicked event</title> 	
    <script type="text/javascript" src="Maps/FusionCharts.js">
    </script>
  </head>   
  <body>     
    <div id="mapContainer">FusionMaps XT will load here!</div>          
    <script type="text/javascript"><!-- 	

      var myMap = new FusionCharts( "Maps/FCMap_World.swf", "myMapId", "400", "300", "0" );
      myMap.setXMLUrl("Data.xml");
      myMap.render("mapContainer");
					
      function myChartListener(eventObject, argumentsObject){
			alert([ 
				"ID: ", argumentsObject.id, "; Label: ", argumentsObject.label,
				"; x: ", argumentsObject.x, ", y: ", argumentsObject.x,
				"; scaledX: ", argumentsObject.scaledX, ", scaledY: ", argumentsObject.scaledY,
				"; chartX: ", argumentsObject.chartX, ", chartY: ", argumentsObject.chartY
			].join(""));
      }

      FusionCharts("myMapId").addEventListener ("MarkerClicked" , myChartListener );

    // -->     
    </script> 	   
  </body> 
</html>

Using MarkerRollover event

MarkerRollover event is raised when mouse hovers over a marker. The event can be listened using advanced event registration model. In the argumentsObject it provides the data and position of the marker through the following properties:

  • id: ID of the marker
  • label: Marker label
  • x and y: The original x and y positions of the marker. This x and y positions are the values set through the marker definition in XML/JSON data.
  • scaledX and scaledY: Scaled x and y positions of the marker. These scaled values proportionate to the scaled dimension of the map.

    Each map is created using a specific width and height. These dimensions are specified as original dimensions in the Map Specification Sheet of the respective map. Marker's x and y positions are defined in the XML/JSON with respect to the original dimensions of the map. However, a map's dimensions are scaled based on the map size set while rendering the map. Accordingly, the x and y positions of the markers also get scaled.

  • chartX and chartY: The x and y positions of the marker with respect to the top-left corner of the map canvas (that is, 0,0 position).

You can use this event to create external HTML based elements (like information balloons, quick callouts etc.) having information related the marker, over/near the marker. For example, when hovered, you can show a big callout on top of a city marker with detailed weather data (possibly fetched from web services etc.).

The following example listens to MarkerRollover event and shows the label and the ID of the hovered marker in an HTML element:

<html>
  <head> 	
    <title>FusionMaps XT - listen to MarkerRollover event</title> 	
    <script type="text/javascript" src="Maps/jquery.min.js">
    <script type="text/javascript" src="Maps/FusionCharts.js">
    </script>
  </head>   
  <body>     

    <div id="details"></div>          
    <div id="mapContainer">FusionMaps XT will load here!</div>          
    <script type="text/javascript"><!-- 	

      var myMap = new FusionCharts( "Maps/FCMap_World.swf", "myMapId", "400", "300", "0" );
      myMap.setXMLUrl("Data.xml");
      myMap.render("mapContainer");
					
      function myChartListener(eventObject, argumentsObject){
			$("#details").text( "You rolled over marker with label: " + argumentsObject.label + " and ID : " + argumentsObject.id );
      }

      FusionCharts("myMapId").addEventListener ("MarkerRollover" , myChartListener );

    // -->     
    </script> 	   
  </body> 
</html>

Using MarkerRollout event

MarkerRollout event is raised when mouse leaves a marker. The event can be listened using advanced event registration model. In the argumentsObject it provides the data and position of the marker through the following properties:

  • id: ID of the marker
  • label: Marker label
  • x and y: The original x and y positions of the marker. This x and y positions are the values set through the marker definition in XML/JSON data.
  • scaledX and scaledY: Scaled x and y positions of the marker. These scaled values proportionate to the scaled dimension of the map.

    Each map is created using a specific width and height. These dimensions are specified as original dimensions in the Map Specification Sheet of the respective map. Marker's x and y positions are defined in the XML/JSON with respect to the original dimensions of the map. However, a map's dimensions are scaled based on the map size set while rendering the map. Accordingly, the x and y positions of the markers also get scaled.

  • chartX and chartY: The x and y positions of the marker with respect to the top-left corner of the map canvas (that is, 0,0 position).

You can use this event in conjunction with MarkerRollover event to un-do all actions done through MarkerRollover event. For example, removing a callout detailed description box which was created using MouseRollover event.

The following example listens to MarkerRollout event and shows the label and the ID of the hovered-out marker in an HTML element:

<html>
  <head> 	
    <title>FusionMaps XT - listen to MarkerRollout event</title> 	
    <script type="text/javascript" src="Maps/FusionCharts.js">
    <script type="text/javascript" src="Maps/FusionCharts.js">
    </script>
  </head>   
  <body>     
    <div id="pastdetails"></div>          
    <div id="mapContainer">FusionMaps XT will load here!</div>          
    <script type="text/javascript"><!-- 	

      var myMap = new FusionCharts( "Maps/FCMap_World.swf", "myMapId", "400", "300", "0" );
      myMap.setXMLUrl("Data.xml");
      myMap.render("mapContainer");
					
      function myChartListener(eventObject, argumentsObject){
			$("#pastdetails").text( "You rolled out of marker with label: " + argumentsObject.label + " and ID : " + argumentsObject.id );
      }

      FusionCharts("myMapId").addEventListener ("MarkerRollout" , myChartListener );

    // -->     
    </script> 	   
  </body> 
</html>

Using ConnectorClicked event

ConnectorClicked event is raised when marker connectors are clicked. The event can be listened using advanced event registration model. In the argumentsObject it provides the IDs of the connecting markers (fromMarkerId,toMarkerId).

The following example listens to ConnectorClicked event and shows the IDs of the connecting markers in a message box:

<html>
  <head> 	
    <title>FusionMaps XT - listen to ConnectorClicked event</title> 	
    <script type="text/javascript" src="Maps/FusionCharts.js">
    </script>
  </head>   
  <body>     
    <div id="mapContainer">FusionMaps XT will load here!</div>          
    <script type="text/javascript"><!-- 	

      var myMap = new FusionCharts( "Maps/FCMap_World.swf", "myMapId", "400", "300", "0" );
      myMap.setXMLUrl("Data.xml");
      myMap.render("mapContainer");
					
      function myChartListener(eventObject, argumentsObject){
			alert( "From marker ID: "+ argumentsObject.fromMarkerId + ", To marker ID: " + argumentsObject.toMarkerId);
      }

      FusionCharts("myMapId").addEventListener ("ConnectorClicked" , myChartListener );

    // -->     
    </script> 	   
  </body> 
</html>

Using ConnectorRollover event

ConnectorRollover event is raised when mouse hovers over marker connectors. The event can be listened using advanced event registration model. In the argumentsObject it provides the IDs of the connecting markers (fromMarkerId,toMarkerId).

The following example listens to ConnectorRollover event and shows the IDs of the connecting markers in an HTML element:

<html>
  <head> 	
    <title>FusionMaps XT - listen to ConnectorRollover event</title> 	
    <script type="text/javascript" src="Maps/jquery.min.js">
    <script type="text/javascript" src="Maps/FusionCharts.js">
    </script>
  </head>   
  <body>
	  <div id="details">&nbsp;</div>     
    <div id="mapContainer">FusionMaps XT will load here!</div>          
    <script type="text/javascript"><!-- 	

      var myMap = new FusionCharts( "Maps/FCMap_World.swf", "myMapId", "400", "300", "0" );
      myMap.setXMLUrl("Data.xml");
      myMap.render("mapContainer");
					
      function myChartListener(eventObject, argumentsObject){
			$("#details").text( "You rolled over Connector which draws from marker with ID: "+ argumentsObject.fromMarkerId + ", To marker with ID: " + argumentsObject.toMarkerId );
      }

      FusionCharts("myMapId").addEventListener ("ConnectorRollover" , myChartListener );

    // -->     
    </script> 	   
  </body> 
</html>

Using ConnectorRollout event

ConnectorRollout event is raised when mouse leaves marker connectors. The event can be listened using advanced event registration model. In the argumentsObject it provides the IDs of the connecting markers (fromMarkerId,toMarkerId).

The following example listens to ConnectorRollout event and shows the IDs of the connecting markers:

<html>
  <head> 	
    <title>FusionMaps XT - listen to ConnectorRollout event</title> 	
    <script type="text/javascript" src="Maps/jquery.min.js">
    <script type="text/javascript" src="Maps/FusionCharts.js">
    </script>
  </head>   
  <body>
	  <div id="pastdetails">&nbsp;</div>     
    <div id="mapContainer">FusionMaps XT will load here!</div>          
    <script type="text/javascript"><!-- 	

      var myMap = new FusionCharts( "Maps/FCMap_World.swf", "myMapId", "400", "300", "0" );
      myMap.setXMLUrl("Data.xml");
      myMap.render("mapContainer");
					
      function myChartListener(eventObject, argumentsObject){
			$("#pastdetails").text( "You rolled out from Connector which draws from marker with ID: "+ argumentsObject.fromMarkerId + ", To marker with ID: " + argumentsObject.toMarkerId );
      }

      FusionCharts("myMapId").addEventListener ("ConnectorRollout" , myChartListener );

    // -->     
    </script> 	   
  </body> 
</html>

Using EntityRollover event

EntityRollover event is raised when mouse hovers over entities. The event can be listened using advanced event registration model. In the argumentsObject it provides the following properties:

  • id: ID of the entity. In general it is the internal ID specified in the Maps Specification Sheet of the respective map. However, if custom ID is defined, it provide the custom ID.
  • originalId: When custom ID is defined for an entity, it provide the original internal ID of the map, as per Map Specification Sheet of the respective map.
  • value:  Value of entity.
  • label: Long name of entity.
  • shortLabel: Short name of entity.

The following example shows an HTML element getting updated with entity data and label when that entity is rolled over:

<html>
  <head> 	
    <title>FusionMaps XT - listen to EntityRollover event</title> 	
    <script type="text/javascript" src="Maps/jquery.min.js">
    <script type="text/javascript" src="Maps/FusionCharts.js">
    </script>
  </head>   
  <body>
	  <div id="details">&nbsp;</div>     
    <div id="mapContainer">FusionMaps XT will load here!</div>          
    <script type="text/javascript"><!-- 	

      var myMap = new FusionCharts( "Maps/FCMap_World.swf", "myMapId", "400", "300", "0" );
      myMap.setXMLUrl("Data.xml");
      myMap.render("mapContainer");
					
      function myChartListener(eventObject, argumentsObject){
			$("#details").text( "You are over entity named: "+ argumentsObject.label + " with value: " + argumentsObject.value );
      }

      FusionCharts("myMapId").addEventListener ("EntityRollover" , myChartListener );

    // -->     
    </script> 	   
  </body> 
</html>

Using EntityRollout event

EntityRollout event is raised when mouse hovers out of entities. The event can be listened using advanced event registration model. In the argumentsObject it provides the following properties:

  • id: ID of the entity. In general it is the internal ID specified in the Maps Specification Sheet of the respective map. However, if custom ID is defined, it provide the custom ID.
  • originalId: When custom ID is defined for an entity, it provide the original internal ID of the map, as per Map Specification Sheet of the respective map.
  • value:  Value of entity.
  • label: Long name of entity.
  • shortLabel: Short name of entity.

The following example updates an HTML element with entity name and its value when mouse moves out of an entity:

<html>
  <head> 	
    <title>FusionMaps XT - listen to EntityRollout event</title> 	
    <script type="text/javascript" src="Maps/jquery.min.js">
    <script type="text/javascript" src="Maps/FusionCharts.js">
    </script>
  </head>   
  <body>
	  <div id="pastdetails">&nbsp;</div>     
    <div id="mapContainer">FusionMaps XT will load here!</div>          
    <script type="text/javascript"><!-- 	

      var myMap = new FusionCharts( "Maps/FCMap_World.swf", "myMapId", "400", "300", "0" );
      myMap.setXMLUrl("Data.xml");
      myMap.render("mapContainer");
					
      function myChartListener(eventObject, argumentsObject){
			$("#pastdetails").text( "You are out of entity named: "+ argumentsObject.label + " with value: " + argumentsObject.value );
      }

      FusionCharts("myMapId").addEventListener ("EntityRollout" , myChartListener );

    // -->     
    </script> 	   
  </body> 
</html>

Using FC_Event (deprecated) to capture roll over/out events on entities

To track entity roll over/out through FC_Event, you need to do the following:

  • Set exposeHoverEvent attribute to 1 in <map> element of the XML (or in map Object of the JSON)
  • Define a function named FC_Event (in the global scope)  that can accept the following parameters:
    • DOMId: 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: A text value representing the event generated by map. Currently, two events are supported - namely rollOver and rollOut.
    • objParams: An object containing the required parameters. In case of rollOver and rollOut on each entity, the following entity related properties are passed:
      • id: Entity Id
      • sName: Short name of entity
      • lName: Long name of entity
      • value: value of the entity

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

<head>
<head>
    <title>FusionMaps XT and JavaScript - Entity Hover Capture</title> 
    <script type="text/javascript" src="../Maps/FusionCharts.js"></script>
    <script type="text/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 XT and JavaScript - Entity Hover Capture Example</h2>

    <div id="map1div">FusionMaps XT</div>

    <script type="text/javascript"> 
        var myMap = new FusionCharts("../../Maps/FCMap_World.swf", "map1Id", "750", "400", "0");
        myMap.setXMLData("<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>");
        myMap.render("map1div");
    </script>

    <br /><div id='content'>Please roll over an entity to see details.</div>

    </center>
</body>
</html>

The above code does the following:

  • Create a world map with DOM Id as map1Id.
  • Enable map's hover events setting exposeHoverEvent='1'.
  • Create a function FC_Event to track the events generated from this map. This function gets invoked whenever the user rolls over a map entity.
  • This function gets the properties of the entity and displays them in a DIV  (with content as id).