Changing map properties

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

The FusionCharts JavaScript Class allows you to change various settings and properties of an existing map. You can dynamically update map's root properties (also known as "map attributes" which are passed through the <map> element in map XML data or through map property in map's JSON data) on-the-fly. This feature will come handy when you wish to change the map titles, theme colors, number formatting or scaling setup and other functional and cosmetic features of an existing map. While the API allows you to update selective properties, internally, FusionCharts re-draws the entire map.

Moreover, you can also change map's width and height at run-time.

All the map attributes are listed in the XML Sheet section under FusionMaps XT Data formats.

You need to use the setChartAttribute() function to set a map attribute. All you need to do is pass the name of the attribute and its new value to this function. This function is available in all the instances of FusionCharts JavaScript Class. If you wish to change more than one map attributes at one go, you can pass multiple attributes and their respective values as an Object. Each property name of the Object will take the name of the attribute. Value of each property will take the new value of the attribute.

Let's take some samples to illustrate the working of the function:

Change entity color

myMap.setChartAttribute( "fillColor" , "A9C2CA" );

In the above code we pass the attribute name as the first parameter and the new value as the second parameter.

Let us create a small sample that changes background color of an existing map as shown in the images below:


The map after rendered for the first time	Map with changed theme

<html>
  <head>
    <title>Update Map data</title>
    <script type="text/javascript" src="../../Maps/FusionCharts.js">
    </script>
  </head>
  <body>
    <center>
    <div id="mapContainer">FusionMaps XT will load here!</div>
    <script type="text/javascript"><!--

      var myMap = new FusionCharts( "../../Maps/FCMap_World.swf", 
        "myMapId", "750", "400", "0" );
      myMap.setXMLUrl("Data.xml");
      myMap.render("mapContainer");

	  function changeAttribute()
	  {
		  // get map reference
		  var mapReference = FusionCharts( "myMapId" ); 
		  
		  // change palette, palette colors and set glass effect to map
		  mapReference.setChartAttribute( { "bgColor" : "ACBF72", bgAlpha : "50" } );
	  }
    // -->
    </script>

    <input type="button" onClick="changeAttribute();" value="Change Map Background color" >
    </center>
  </body>
</html>

In the above code, we do the following:

Create a map
Place a button that calls the changeAttribute()function
Get map reference using the FusionCharts("myMapId")function
Pass an object containing new attribute values to the setChartAttribute()function. The object contains two attributes as three properties - bgColor, bgAlpha. If you have to update multiple properties of the map at once, it is recommended to use the object notation as used in this code and pass all of them at once. This eliminates the need for multiple re-draws.

Note: If you've to update multiple properties of the map at once, it is recommended to use the object notation as used in the above code and pass all of them at once. This eliminates the need for multiple re-draws.

In case you wish to remove an attribute from the data, you can pass null as the value of the attribute. For example, setChartAttribute( "bgAlpha" , null ) will remove the bgAlpha attribute from the data.

Change map border color

var mapReference = FusionCharts("myMapId"); 
mapReference.setChartAttribute({"borderColor" : "353840"});

In the above code, we pass an object as the parameter.

Change number formatting settings

var mapReference = FusionCharts("myMapId"); 
mapReference.setChartAttribute({formatNumberScale : 1, decimals : 2, yAxisForceDecimals : 1});

Display legend

var mapReference = FusionCharts("myMapId"); 
mapReference.setChartAttribute({"showLegend",1});

Set tooltips off

var mapReference = FusionCharts("myMapId"); 
mapReference.setChartAttribute("showTooltip",0);

Set off shadow

var mapReference = FusionCharts("myMapId"); 
mapReference.setChartAttribute({"showShadow" : "0"});

Limitations:

Listed below are the few limitations of the setChartAttribute()function:

setChartAttribure() works only using FusionCharts JavaScript Object reference. This function is not available if you use FusionCharts HTML Object reference.
You can update only those attribute which are available in <map> element of a map's XML data or "map" property of a map's JSON data.

Please note that the map reloads itself with changed data when new attribute is set. During re-draw the map forces animation='0'. If you wish to re-animate after property change, explicitly specify "animation": "1" in JSON update.

FusionCharts JavaScript Class allows you to resize an existing map using the resizeTo() function. You can pass the new width and height of the map in pixels or percent parameters of the resizeTo()function. You can also change the width and height properties of the map object and then call the resizeTo()function. The code samples below shows how you can do this:

Please note that the resizeTo()function, width and height properties only work using FusionCharts JavaScript object. It is not available in FusionCharts HTML Object.

Resize map using pixel values

var mapReference = FusionCharts( "myMapId" ); 
mapReference.resizeTo( "500", "350" );

Resize map using percent values

var mapReference = FusionCharts( "myMapId" ); 
mapReference.resizeTo( "80%", "75%" );

Resize map setting width and height properties

var mapReference = FusionCharts( "myMapId" ); 
mapReference.width = "500";
mapReference.height = "80%";
mapReference.resizeTo();