This section is meant for users who have implemented v3.x.y (e.g., 3.0.5, 3.0.6, 3.1.0 etc.) of FusionMaps in their applications and are now upgrading to FusionMaps XT (v3.3.1).

Here, we will discuss the following:

1. Steps to upgrade to FusionMaps XT from FusionMaps v3.x.y
2. How to make use of the features introduced and changed in FusionMaps XT v3.3.0 »
   • Render JavaScript Maps
   • Save to server option of JavaScript maps
   • Configuring export menu of JavaScript maps
3. How to use the new features available in FusionMaps XT ?
4. API introduced in FusionMaps XT
5. API deprecated in FusionMaps XT
6. Changes and updates made in maps

All the features of FusionMaps XT (v3.3.1) are backward compatible with FusionMaps v3.2 or earlier. Hence, upgrading is as easy as copy-pasting files. Listed below are the things that you need to take care of while upgrading:

• Copy all SWF files from Download Pack > Maps folder and replace your existing map SWF files in your deployed folder
• Copy FusionCharts.js, Fusioncharts.HC.js, FusionCharts.HC.Maps.js and jquery.min.js from Download Pack > Maps folder to your deployed folder
  
  IMPORTANT NOTE:
  

  • Starting FusionMaps XT , use of FusionMaps.js is deprecated. Use FusionCharts.js instead. But, although deprecated, to ease your upgrade process to FusionMaps XT, we have provided a new FusionMaps.js in Download Pack > Maps folder. This FusionMaps.js will help in loading FusionCharts.js (located in the same folder as FusionMaps.js) and all related JavaScript files in your application. However, we recommend that you replace all references to FusionMaps.js to FusionCharts.js in your code.
  • Starting FusionMaps XT, use of FusionMapsExportComponent.js is deprecated. Use FusionChartsExportComponent.js instead. It is recommended that you replace all references FusionMapsExportComponent.js to FusionChartsMapsExportComponent.js in your code.
• Clear your browser cache (very important step)
  

In case, you are also using charts from FusionCharts XT v3.2.2 SR-5 or earlier version, you need to download or update to the latest FusionCharts XT pack and copy FusionCharts.HC.Charts.js from the Charts folder of the downloaded FusionCharts XT pack.

Moreover, if you are using charts from PowerCharts XT v3.2.1 SR-1 or earlier version, you need to download or update to the latest PowerCharts XT pack and copy FusionCharts.HC.PowerCharts.js from the Charts folder of the downloaded PowerCharts XT pack.

Moreover, if you are using charts from FusionWidgets XT v3.2 SR-2 or earlier version, you need to download or update to the latest FusionWidgets XT pack and copy FusionCharts.HC.Widgets.js from the Charts folder of the downloaded FusionWidgets XT pack.

The above steps will convert all your v3.2 or earlier maps to FusionMaps XT. You don't have to modify any code, as all the maps are backward compatible. However, if you wish to make use of any new features, then you will have to modify your code to include the same. Given below are details of code changes required for implementing the new features introduced in FusionMaps XT (v3.3.0) .

To get you started with FusionMaps XT, we will show you how to build a World Map to show the Population Distribution across continents. Once completed, the map will look as under (with animation and interactivity, which is not reflected by the image below):

Follow the steps below to get started:

1. Create a folder LearningFusionMapsXT on your hard-drive. We will use this folder as the root folder for building all FusionMaps XT examples.
2. Create a folder named MyFirstMap inside the above folder. Inside the MyFirstMap folder, create a folder named Maps.
3. Copy FusionCharts.js, FusionCharts.HC.js, FusionCharts.HC.Maps.js and jquery.min.js files from Download Pack > Maps folder to MyFirstMap > Maps folder.
4. Specify the name of the map, that is the JavaScript alias. In this case we will use World.
5. If you render Flash maps, copy FCMap_World.swf from Download Pack > Maps folder to MyFirstMap > Maps folder. This SWF file is required to render the chart in Flash.
6. Create an XML file » (Creating an XML file is as easy as creating a text file using Windows Notepad or any other text editor. It is actually a plain text file with extension - xml) in MyFirstMap folder with name Data.xml.
7. Copy the code given below (left) to Data.xml file. It is the XML-lized form of the Population data shown in the table (right).
   
   

   <map borderColor='005879' fillColor='D7F4FF' numberSuffix='M' 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>

   Continents Population (in Millions) North America 515 South America 373 Europe 727 Asia 3875 Africa 885 Australia 32



8. Create an HTML file (using a text editor like Notepad, TextMate etc. or the Web Development software you use) in MyFirstMap folder and copy-paste the code given below and save it as FirstMap.html:
   
   

   <html>
     <head> 
       <title>My First map using FusionCharts JavaScript Class</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 ("World", "MyMapId", "750", "400", "0");
         myMap.setXMLUrl ("Data.xml");
         myMap.render("mapContainer"); 
       // --> 
       </script>
     </body> 
   </html>

Open the file FirstMap.html in a Web Browser » Internet Explorer, Firefox, Opera or Safari (Mac/iPhone/iPad/Windows) and you will see an animated World Map similar to the one below:

See it live!

Back to top

Starting FusionMaps XT v3.3.0, JavaScript maps can be exported and saved to a server disk. To do so, you need to configure your own server. The sever should support PHP and JAVA (1.3 or above). Also, you need to place the FusionCharts PHP export handler and Apache Batik SVG Rasterizer library in your server.

The XML or JSON data will be as shown under:

<map... exportAction='save' >
...
</map>

"map": { 
      ...
      "exportAction" : "save"
    },
...
);

Back to top

FusionMaps XT v3.3.0 also allows you to customize the labels of the export context menu. By default, the labels appear as Download as PNG, Download as JPG, Download as PDF and Download as SVG. To achieve this, you need to use the exportFormats attribute. The attribute value should be a delimiter separated key-value pair. The delimiter character to be used is '|' (pipe character). The syntax for the attribute value exportFormats='KEY=Value|KEY=Value'. The XML or JSON data will look as under:

<map... exportFormats='PNG=Export as High Quality Image|JPG|PDF=Export as PDF File|SVG' >
...
</map>

"map": { 
      ...
      "exportFormats" : "PNG=Export as High Quality Image|JPG|PDF=Export as PDF File|SVG"
    },
...
);

In the above data, the labels of PNG and PDF has been customized. Since, no value has been set to JPG and SVG they will appear with its default label, which is Download as JPG and Download as SVG. The order of the options will appear as set in this attribute.

Note:If you do skip any export option in this attibute the context menu will not display that option. For example, if you set exportFormats='PNG=Export as High Quality Image|JPG|PDF=Export as PDF File' the context menu will appear without the SVG option since it is not mentioned in the attribute.

Back to top

FusionMaps XT boasts of a plethora of enhancements. To make use of the new and modified features, you will have to modify your code to include the same. Here, we will discuss the following:

• Enabling your maps to run on iPad and iPhone and in devices where Flash Player is not available
• Converting all your maps from Flash rendering to JavaScript rendering
• Rendering pure JavaScript maps
• Creating dynamically re-sizable maps
• Using FusionCharts JavaScript Class
• Making use of new JavaScript events
• Mouse events introduced for legend, markers and connectors
• Changing individual map attribute at run-time using JavaScript API
• Enabling managed printing in Firefox/Chrome/Safari/Opera
• Adding support for JSON data
• Using FusionCharts jQuery plugin to render map
• Using interactive legend
• Using gradient legend
• Setting display modes of background image
• Alignment of background image
• Recursive number scaling
• Configuring thousand separator position

After you have made the above changes and copied all the JavaScript files, your maps are automatically ready for iPad and iPhone and for all devices where Flash Player is disabled, not-installed or not-supported. This has been made possible by the new FusionCharts JavaScript Class, which provides automatic fallback to JavaScript maps (using FusionCharts.HC.js, FusionCharts.HC.Maps.js and respective JavaScript map file). FusionCharts JavaScript Class can automatically decide whether to render JavaScript maps or Flash maps.FusionCharts JavaScript class is capable of detecting whether the browser is running in iPad, iPhone, or iPod or in devices where Flash Player is disabled, not-installed, or not-supported and it switches to pure JavaScript rendering architecture.

Click here to see a live sample in your iPad or iPhone.

Back to top

If you wish to use JavaScript maps only (and not use Flash at all), you can convert your existing maps to pure JavaScript maps (HTML5) by adding a single line of code. All you need to do is write FusionCharts.setCurrentRenderer('javascript') before you call FusionMaps constructor in your existing implementation.

<html>
  <head> 
    <title>My First map</title> 
    <script type="text/javascript" src="FusionCharts.js"></script>
  </head> 
  <body> 
    <div id="mapContainer">FusionMaps XT will load here!</div> 
    <script type="text/javascript"><!--
	 
      FusionCharts.setCurrentRenderer('javascript');
	 
      var map = new FusionMaps ("FCMap_World.swf", "MapId", "750", "400", "0");
      map.setDataURL ("FirstMap.xml");		 
      map.render("mapContainer"); 
    // --> 
    </script>
  </body> 
</html>

See it live!

<html>
  <head> 
    <title>My First map using FusionCharts JavaScript Class</title> 
    <script type="text/javascript" src="FusionCharts.js"></script>
  </head> 
  <body> 
    <div id="mapContainer">FusionMaps XT will load here!</div> 
    <script type="text/javascript"><!--
	 
      FusionCharts.setCurrentRenderer('javascript');
	 
      var myMap = new FusionCharts ("FCMap_World.swf", "MapId", "750", "400", "0");
      myMap.setXMLUrl ("FirstMap.xml");
      myMap.render("mapContainer"); 
    // --> 
    </script>
  </body> 
</html>

Note : Many browsers restrict JavaScript from accessing local file system owing to security reasons. The JavaScript maps, when running locally, will not be able to access data provided as a URL. If you run the files from a server, it will run absolutely fine, though. When running locally, however, if you provide the data as string (using the Data String method), it works fine.

Back to top

Starting FusionMaps XT, you can specify the JavaScript map alias (as listed in the List of Maps page) instead of the map SWF filename to create a pure JavaScript map. The code snippet below demonstrates how this is achieved:

<html>
  <head> 
    <title>Creating Pure JavaScript map</title> 
    <script type="text/javascript" src="FusionCharts/FusionCharts.js"></script>
  </head> 
  <body> 
    <div id="mapContainer">FusionMaps XT will load here!</div> 
    <script type="text/javascript"><!--
	 
      var myChart = new FusionCharts( "World", "myChartId", "400", "300", "0" );
      myChart.setXMLUrl("Data.xml");
      myChart.render("mapContainer"); 
    // --> 
    </script>
  </body> 
</html>

In the above code, instead of FCMap_World.swf we have specified World, the JavaScript map alias. Based on the JavaScript map alias provided, FusionCharts JavaScript Class renders the respective JavaScript chart.

You can also specify JavaScript map alias while using the Object as Constructor parameter through the type property as shown below:

 var myChart = new FusionCharts( { 
	type: "World",   
	width: '400',    
	height: '300',   
	debugMode : false 
});

Back to top

All maps in FusionMaps XT can now resize automatically as per the changed size of the container element. The maps can accept width and height in percent (%) and scale in percent with respect to the containers' size. Whenever a container's size changes, the map automatically resizes itself with respect to the new size of the container element. To achieve this, all you need to do is set the dimensions of map in percentage. Rest is taken care by the map itself. A sample map constructor might look like this:

Using FusionMaps constructor :

new FusionMaps ("FCMap_World.swf","myMapId", "80%", "100%", "0");

Using FusionCharts constructor :

new FusionCharts ("FCMap_World.swf","myMapId", "80%", "100%", "0");

In the example below, we have created a very basic sample where a map fills up the entire space of the Web browser. When the browser's dimensions are changed, the map resizes itself. Note the width and height declared for BODY and DIV elements using CSS.

<html>
  <head> 	
    <title>My First map - Using dynamically re sizable map</title>
    <script type="text/javascript" src="FusionCharts.js"></script>   
  </head>   
  <body style="height:100%;"> 
    <div id="mapContainer" style="height:100%;" >
        FusionMaps XT will load here</div>          
		
    <script type="text/javascript"><!-- 		  
			
      var myMap = new FusionCharts ("FCMap_World.swf", 
          "myMapId", "100%", "100%", "0");       
      myMap.setXMLData ("<map/>");         
      myMap.render ("mapContainer");          	  
      // -->     
    </script>
  </body> 
</html>

See it live!

In the above code we have:

1. Set the height of the body to be 100%
2. Set the height of the container DIV to 100%, which means that it will vertically fill up the body space of the HTML
3. Set the map's width and height to 100%

The whole page or the HTML BODY element dynamically resizes itself as and when the browser resizes. The map container (DIV with id - "mapContainer"), being a direct child of the whole page, changes its dimensions as per the change of its parent. Subsequently, the map, being the direct child of the map container and set with 100% width and height, resizes itself to fit to the resize dimensions of its parent.

Back to top

Starting FusionMaps XT, the use of FusionMaps.js is deprecated. FusionMaps XT comes with FusionCharts JavaScript Class that takes care of the rendering and management of maps. It also provides a large set of APIs to work with. Using these APIs you can do the following:

1. Render Flash maps
2. Render pure JavaScript maps (not Flash)
3. Use the object oriented JavaScript implementation methods
4. Make use of new data providing functions like setXMLUrl, setXMLData, setChartData, setChartDataUrl
5. Use the static function FusionCharts to access all maps instances present in a page
6. Configure and create LinkedCharts, which is a smart drill-down feature
7. Make use of the better printing support for all non-Internet Explorer based browsers using the PrintManager class
8. Debug and manage errors
9. Set properties of an existing map using the setChartAttribute() function
10. Provide data in JSON format using setJSONUrl, setJSONData, setChartData, setChartDataUrl functions
11. Update an existing map's data using Flash map's native AJAX capabilities or browser's AJAX support
12. Use API to get data back from map in XML/JSON/CSV format
13. Check the rendering state of a map using function like isActive()
14. Duplicate an existing map's configurations using the clone() function
15. Remove and clean a map object and free as much memory as possible using the dispose() function
16. Make use of better and advanced JavaScript event model (using the addEventListener function) to listen to all events

Existing implementations using FusionMaps.js, APIs like setDataURL()and setDataXML() functions and FC_Rendered event will continue to function without any problem.

Back to top

FusionCharts JavaScript library provides an option to set a map attribute at run-time. This is as easy as calling a simple function. You just need to get the map object and call setChartAttribute() function. Let's see a sample code where we change the fill color of all the entities of a map:

var weekly_sales_map = FusionCharts('JanuaryMapId');
weekly_sales_map.setChartAttribute( "fillColor", "A9C2CA" );

In the code above, we get the map object from FusionCharts collection passing the DOMId of the map. Next, we call setChartAttribute() function and pass two parameters to it. The first parameter is the name of the attribute that needs to be changed. The second parameter provides the new value of the attribute that needs to be set.

In FusionMaps XT, whenever an attribute of a map is changed, the entire map is re-drawn without animation.

Back to top

FusionMaps XT provides a feature that correctly prints Flash maps from Firefox, Safari or other Mozilla, WebKit, and Gecko based browsers. We call it Managed Printing. This is managed by adding a single line of code in the page:

FusionCharts.printManager.enabled(true);

This feature, when enabled, prepares the charts in the page for printing. Once preparation is complete, you can print the page with all maps in the page either using File > Print menu of the browser or using code :

FusionCharts.printManager.managedPrint();

The Print Manager internally does the following to achieve this :

• Once a map is rendered, it silently gathers all aspects of the image data of the present state of the map
• It converts the image data into image using canvas HTML object
• It hides the canvas image below the map
• When print is invoked, a parallel CSS based print media layout using @media print is created
• In this print media layout, the Flash map is hidden and the canvas image is displayed
• This layout with the canvas image is sent to the printer for print

Note: Print Manager works only in browsers that supports canvas object.

Print Manager also fires events when it has all the maps ready for managed print. The code below shows how it works:

FusionCharts.addEventListener ( 
          FusionChartsEvents.PrintReadyStateChange , 
          function (identifier, parameter) {
            if(parameter.ready){ 
               alert("Map is now ready for printing.");
               document.getElementById('printButton').disabled = false;
            }
        });

Note that the PrintReadyStateChange event is a global event. Thus, this event cannot be listened from individual map instance. Only FusionCharts static class can listen to this event.

The parameters event argument contains a property - ready. This property returns true when the Print Manager is ready to print all maps in a page. Once true is returned by the event, we show a JavaScript alert message-box.The button which was disabled earlier is now enabled.

Now you can try printing from File → Print menu. You can also use a button or any function that calls the window.print() function.

You can also use the following code to print the whole page using FusionCharts JavaScript class:

FusionCharts.printManager.managedPrint();

Back to top

Apart from XML, FusionMaps XT can also accept JSON data format. This functionality is provided by FusionCharts JavaScript Class. You can pass map JSON data in one of the three forms:

1. As JSON URL/feed
2. As JSON Object (in JavaScript)
3. As JSON String

The functions that help in accepting JSON data are setJSONUrl, setJSONData, setChartData, setChartDataUrl. Below are some examples of passing JSON data:

  myMap.setJSONUrl("Data.json");
	 ...
  myMap.setJSONData { 
    "map": { 
      "numberPrefix" : "$"
    },
	"data": [
    	{ "id": "AL", "value": "70"  },
    	{ "id": "AK", "value": "100" },
    	{ "id": "AZ", "value": "90"  },
    	{ "id": "AR", "value": "72"  }
      ]
    }
 );
  

When running from a local file system, maps may not be able to load JSON data from URL/file on certain browsers due to security limitations of AJAX. You will need to run the maps on a server (localhost or remote) to make it work.

Back to top

Starting FusionMaps XT, you can create maps using jQuery syntax. This has been made possible using the introduction of FusionCharts jQuery plugin. This plugin allows you to render maps anywhere within a Web page, update and retrieve map data, update cosmetic and functional settings and use all existing features of FusionMaps XT.

Setting it up:

Setting up of FusionCharts jQuery plugin is as simple as putting an additional reference to the plugin file (FusionCharts.jqueryplugin.js) as shown below:

<script type="text/javascript" src="../Charts/jquery.min.js"></script>
<script type="text/javascript" src="../Charts/FusionCharts.js"></script>
<script type="text/javascript" src="../Charts/FusionCharts.jqueryplugin.js"></script>

For more details of setting up and using FusionCharts jQuery plugin, please go through the FusionMaps XT and jQuery section.

Back to top

In FusionMaps XT color range names appear in a legend. Each legend items consists of a color box or icon with the color represented by the color range and the name of the color range.

Starting XT, the legend is interactive. That is, when you click each legend icon, it hides the entities corresponding to the color range represented by the legend item.

In the example below, "High Sales" icon was clicked that resulted in the map as under. Note how the "High Sales" icon has also been converted to gray-scale. To show the area back, click on this icon again.

See it live!

You can disable the interactive feature setting interactiveLegend attribute 0 in the <map> element.

FusionMaps XT offers another mode of displaying color ranges - using gradient legend. Gradient legend is an interactive pane of blended colors derived from the <colorRange> definitions. A linear scale is drawn with two drag-able pointers. Each color defined for a color range blends with the next color, thus forming a gradient strip. Each point on the gradient scale represents a unique color and value. So, entities with different values will appear in unique colors as per the position of the value on the gradient scale.

See it live!

The above map shows a gradient legend with range of 70 to 100. The map entities are colored based their values. Each value represents a color on the gradient legend scale.

To enable gradient legend you need to do the following:

• Set gradient="1"  in  the <colorRange> element
• Set the starting value of the gradient color range using the minValue attribute of the <colorRange> element
• Set the starting color of the gradient legend using the code attribute of the <colorRange> element
• Optionally, set start label and end label of the legend using the startLabel and the endLabel attributes of the <colorRange> element
• Set maxValue and color in each <color> element of the <colorRange> element

The data to define the gradient legend shown in the above map is given below:

<map ...>

   <colorRange gradient="1" minValue="70" code="CC0001" startlabel="Bad" endLabel="Very Good">
      <color maxValue="80" displayValue="Poor" code="FF0000" />
      <color maxValue="90" displayValue="Average" code="FFCC33" />
      <color maxValue="100" code="069F06" />
   </colorRange>

				 
   <data>
   ...
   </data>
</map>   

{
  "map": {
   ...
  },
  "colorrange": {
    "gradient": "1",
    "minvalue": "70",
    "code": "CC0001",
    "startlabel": "Bad",
    "endlabel": "Very Good",
    "color": [
      {
        "maxvalue": "80",
        "displayvalue": "Poor",
        "code": "FF0000"
      },
      {
        "maxvalue": "90",
        "displayvalue": "Average",
        "code": "FFCC33"
      },
      {
        "maxvalue": "100",
        "code": "069F06"
      }
    ]
  },
  "data": [
    ...
  ]

}

Gradient legend is highly interactive and allows you to show entities having values of a certain range and hide rest of the entities. Click and hold the any of the pointers on the gradient legend and drag it to a particular point on the scale to set the numeric range that is to be shown.

The map below shows a gradient legend with pointers dragged to create a range of 85 to 95. Accordingly, the entities not having values in this range are hidden on the map.

It is now possible to display the map's background images using stretch, tile, center, etc. display modes. To apply a display mode to the background image, you need to use the bgImageDisplayMode attribute in the <map> element. For example,

<map bgImageDisplayMode='Stretch' ...>

There are six different modes namely none, stretch, tile, center, fit and fill. Sample maps showcasing each mode along with the name and a brief definition are given below:

Stretch - Expands the image to fit the entire map area, without maintaining original image constraints

Fit - Fits the image proportionately on the map area

Fill -Proportionately fills the entire map area with the image

Tile - The image is repeated as a pattern on the entire map area

Center - The image is positioned at the center of the map area

none - the original image is placed at the top-left corner of the map background (default)

Additionally you can also increase or decrease the magnification of the background image. To customize the magnification of the background image use the attribute bgImageScale. The value of this attribute can be anything between 0-300. The default value of the attribute is 100. Any value less than 100 will reduce the size of the background image and any value more than 100 will increase the size of the background image. You can use this attribute in combination with all display modes other than stretch.

The example below shows a map with bgImageScale set to 150 and bgImageDisplayMode set to none:

The map below shows background image with bgImageScale set to 40 and bgImageDisplayMode set to tile:

Try all the possible combinations of background image settings from here.

Note: The bgSWF and bgSWFAlpha attributes are deprecated. Use bgImage and bgImageAlpha instead.

It is now possible to configure the vertical and horizontal alignment of map's background image. The attributes used to apply the alignments are bgImageVAlign (possible values are - top, middle and bottom) and bgImageHALign (possible values are left, middle and right) in the <map> element. You can use this attribute in combination with all display modes other than center and stretch.

<map bgImageHAlign='top' bgImageVAlign='middle' ...>

The maps below show how the combination of alignments works in a map:

bgImageVAlign='top' bgImageHAlign='left'	bgImageVAlign='top' bgImageHAlign='middle'	bgImageVAlign='top' bgImageHAlign='right'
bgImageVAlign='middle' bgImageHAlign='left'	bgImageVAlign='middle' bgImageHAlign='middle'	bgImageVAlign='middle' bgImageHAlign='right'
bgImageVAlign='bottom' bgImageHAlign='left'	bgImageVAlign='bottom' bgImageHAlign='middle'	bgImageVAlign='bottom' bgImageHAlign='right'

Try all the possible combinations of background image settings from here.

Note: The bgSWF and bgSWFAlpha attributes are deprecated. Use bgImage and bgImageAlpha instead.

FusionMaps XT introduces the Recursive Number Scaling feature. Recursive number scaling comes into the picture when you have number scales defined for your map. It helps you display the map data better by breaking-up the predefined number scale into smaller sections. For example, in a map where time is being plotted, you can display 3.87 days as 3 days, 20 hours, 52 minutes and 25 seconds.

Let us jump to an example straightaway to understand this better.

Let us build a map which indicates the shipment time taken for various continents. Each shipment time can take time ranging from a few days to a few months. And we have the data for each continent in hours itself. Now, if we were to show all the data on the map in hours only, it will not appear too legible. What we can do is build a scale indicating time and then specify it to the map. This scale will look something as under:

24 hours = 1 day
7 days = 1 week
4 weeks = 1 month
3 months = 1 quarter
4 quarters = 1 year

We can define the same in our map using:

<map defaultNumberScale='h' numberScaleValue='24,7,4,3,4'   numberScaleUnit='d,w,m,q,y'  ... >

Please see the Number Scaling page for more details on how to build a number scale. Now let us consider the data below:

Notice how 1.32 months is converted to 1 month, 1 week, 1 day and 21 hours. This map makes use of recursive number scaling and after converting the time in hours to say, months, whatever is left over is not converted into decimals. It is rather converted into smaller units of time and broken down as far as possible - so the remaining hours are first converted to weeks and again the remaining hours to days and when the hours are too few to be converted into days, they are displayed in hours itself. This gives us a fair idea of how much time was used for each shipment.

To use recursive number scaling, all you have to do is set <map ... scaleRecursively='1' .. >.

The entire XML/JSON for the map above is:

You can also control the levels of recursion. Suppose in the above map, instead of 1 month, 1 week, 1 day and 21 hours, you are pretty happy with showing 1 month, 1 week itself either for space constraints or some other good reason. You can control the levels of recursion for all the numbers on your map using the maxScaleRecursion attribute. Suppose you want only two levels of recursion, then set <map ... maxScaleRecursion='2'>. This will convert the above map to:

Notice how all the numbers on the map are using a maximum of two time units - the rest have been truncated. When you want all the units of a number to be shown on the map, you can either omit the maxScaleRecursion attribute or set it to -1.

By default, all the units of a number are separated by a space. You can customize the separator using the scaleSeparator attribute. For example, setting scaleSeparator=', ' will separate each unit with a comma as shown below:

Back to top

FusionMaps XT automatically decides the position of the thousand separator. By default, the thousand separator is placed after every three digits from the decimal place. A map with default thousand separator position will look as under:

Starting FusionMaps XT, you can customize the position of the thousand separator and place it as required. To place the thousand separator in custom positions you need to use the thousandSeparatorPosition attribute. Shown below is a map with the thousand separator placed after four digits from right:

For the above map, the attribute thousandSeparatorPosition is set to '4'. So, the thousand separator (,) is placed after every four digits starting from right.

You can also set multiple values (separated by comma) to this attribute, instead of a single value. Thus, you can specify complex thousand separator positions. For example, setting multiple values you can display numbers in Indian currency format, where the first thousand separator (for thousand) is placed after three digits from right and then onwards the thousand separator is placed after every two digits. Shown below is an example map displaying Indian currency format:

In the above map, we have set thousandSeparatorPosition='2,3'. So, the thousand separator is first placed after 3 digits starting from right and then onwards after every two digits. Given below are some sample combinations of values which can be set to this attribute:

Note: Any negative value set to this attribute will be converted to a positive value. For example, thousandSeparator="-2" will be converted to thousandSeparator="2".

Back to top

FusionMaps XT introduces a large number of XML API and JavaScript API as discussed below:

Starting FusionMaps XT (v3.2.0) a few of the XML API and the JavaScript API are deprecated as listed below:

Starting FusionMaps XT the changes and updates that have been incorporated are listed below:

• Change in map SWF file names
• Newly introduced map packs
• Change in existing map packs
• Newly introduced maps
• Changes in map definitions
• Change in original dimensions

Starting FusionMaps XT (v3.2.0), the following changes have been incorporated for the following map SWF file names in the Core Pack.

Starting FusionMaps XT (v3.3.0), the following changes have been incorporated for the following map SWF file names in the Additional America Map Pack.

Note: Starting FusionMaps XT (v3.3.0), Additional Americas and India Map Pack has been modified to Additional America Map Pack. The entities of India (States) which was existing within the Additional Americas and India Map Pack have been shifted under the newly introduced Asia Map Pack.

Starting FusionMaps XT (v3.3.0), the following map packs have been introduced.

• Additional Asia Map Pack
• Additional Africa Map Pack
• Additional Oceania Map Pack
• Additional USA Map Pack

Starting FusionMaps XT (v3.3.0), Additional Americas and India Map Pack has been modified to Additional America Map Pack. The entities of India (States) which was existing within the Additional Americas and India Map Pack have been shifted under the newly introduced Asia Map Pack.

Starting FusionMaps XT (v3.2.0), the following maps have been introduced in the core pack.

Starting FusionMaps XT (v3.3.0), the following maps have been introduced.

• Additional Europe Map Pack

Note: Starting FusionMaps XT (v3.3.0), Additional Americas and India Map Pack has been modified to Additional America Map Pack. The entities of India (States) which was existing within the Additional Americas and India Map Pack have been shifted under the newly introduced Asia Map Pack.

• Additional Asia Map Pack
• Additional Africa Map Pack
• Additional Oceania Map Pack
• Additional USA Map Pack

Back to top

Back to top

Back to top

Back to top

Back to top

Starting FusionMaps XT (v3.2.0), the following changes have been made in the map definitions as given in the list below.

• Core Map Pack
• Additional Asia Map Pack

Note: Starting FusionMaps XT (v3.3.0), Additional Americas and India Map Pack has been modified to Additional America Map Pack. The entities of India (States) which was existing within the Additional Americas and India Map Pack have been shifted under the newly introduced Asia Map Pack.

Back to top

Starting FusionMaps XT (v3.2.0), the following changes have been made in the map dimensions as given in the list below.

• Core Map Pack
• Additional Europe Map Pack
• Additional America Map Pack
• Additional Asia Map Pack

Note: Starting FusionMaps XT (v3.3.0), Additional Americas and India Map Pack has been modified to Additional America Map Pack. The entities of India (States) which was existing within the Additional Americas and India Map Pack have been shifted under the newly introduced Asia Map Pack.

Back to top

Back to top

Back to top

Back to top