Getting map reference

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

After a map renders, you might want to do a lot of things with it, like, update data, get data from it, print it, export it as an image or a PDF, add event listener to it, change its setting or resize it. You may even want to clone it, remove it or obtain certain information, such as, map type, id, width, height, version signature, etc. You might be interested to know whether the map has rendered or not, whether the map is visible or see if it is active. To achieve all these, first, you must get the reference to the map object i.e., handler of the map. Next, you do the desired operation on it.

Here, in this page, we will learn how to get the reference to a map object.
Get reference to the map object

There are numerous ways of getting the reference to a map object. On a broader level, you can get two types of references:

  1. the reference to the JavaScript Object that acts as a wrapper of the map (that is, JavaScript variable)
  2. the reference to map HTML Object which is embedded in the web page (that is, map SWF Object)

Get JavaScript Object reference

To get the reference to the JavaScript object you can do one of the following:
1. Using JavaScript global variable name

If you have declared the JavaScript object in global-scope when instantiating the map, you can use the JavaScript object's name as the reference.

Click here to see full code » 
<html>
  <head>
    <title>Get map reference from variable in JS Global Scope</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");

    // -->
    </script>
    <input type="button" onclick="myMap.print();" value="Print">

  </body>
</html>

2. Using FusionCharts.items[] static Array

FusionCharts.items[] is an associative array that stores all the maps rendered in a page. The DOMId is represented by the key and the JavaScript map object is the respective value. If you pass the DOMId of the map to this array, you will get the reference to the JavaScript Object of the related map.

var map = FusionCharts.items["myMapId"];

3. Using FusionCharts() function

You can also pass the map's DOMId to FusionCharts(). Like FusionCharts.items[], FusionCharts() also returns the JavaScript Object of the map.

var map = FusionCharts("myMapId");

It is recommended to use one of the above mentioned methods to get JavaScript Object reference of the maps.

The other methods, as explained below, of getting the reference of the map HTML Object are not recommended as HTML Object provides limited interactive features.

4. Using legacy function: getMapFromId(DOMId)

The legacy function getMapFromId() still works. It is a global function (that is, it can be accessed from global/window scope) that returns the map's Object (reference to map SWF object). 

var map = getMapFromId( DOMId );

getMapFromId() has been deprecated

Get HTML Object reference

To get the reference to the map HTML object you can use the following function:

1. FusionCharts.getObjectReference(DOMId)

getObjectReference() is static function of FusionCharts class. Like getMapFromId() it also returns the map's HTML Object when map's DOMId is passed to it as parameter. 

var map = FusionCharts.getObjectReference( DOMId );
Complete Reference to all the properties, functions and events of FusionCharts classes is provided in API Reference section.