Creating maps using various methods

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

FusionCharts JavaScript Classes now provide various methods of rendering maps. You render maps using either of the following methods:

Normal rendering method: using three or more lines of code with a highly polymorphic constructor
Compact rendering method: using one-liner highly polymorphic static function

Let's discuss how each of the methods works.

In normal rendering method, you need to perform at least 3 steps to render a map :

Instantiate a FusionCharts JavaScript object using the constructor » var myMapJSObj = new FusionCharts( MapSWF, MapDOMId, width, height, ...); of FusionCharts class.
Provide map data (XML or JSON as string or URL) » myMapJSObj.setXMLUrl( 'myxml.aspx' ); You can use one from the 8 data providing functions viz. setChartData, setChartDataUrl, setXMLData, setXMLUrl, setJSONData, setJSONUrl, setDataXML or setDataURL
Render the map in an HTML container » myChartJSObj.render("myDivId");

Additionally you can set more optional settings like set renderer type, set a map transparent » myMapJSObj.setTransparent(true);etc.

Following sample code illustrates the implementation of this method: Note » We have already learnt this method in the weekly sales sample in Creating your first map page. This method is fully backward compatible.

<html>
  <head>
    <title>My First map using FusionMaps XT</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", "1" );
      myMap.setXMLUrl("Data.xml");
      myMap.render("mapContainer");

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

In the above code we have:

Included FusionCharts.js class file. This file automatically loads the other class files ( FusionCharts.HC.js, FusionCharts.HC.Maps.js and jquery.min.js) if the maps are to be rendered as JavaScript on devices like iPad/iPod.
Instantiated a JavaScript object from FusionCharts class passing required parameters » (MapSWF, DOMId, width, height, debugMode, registerWithJS ). Details on all required parameters is provided in API >> Methods page
Provided map data using setXMLUrl() function through a URL
Rendered the map in mapContainer DIV element

The code will render a map like the one shown below:

Object as Constructor parameter

You can pass all the parameters as a single JavaScript Object to the constructor. The Object will have all the parameters needed to be passed to the constructor as its properties (key-value pairs). An example will illustrate this:

var myMap = new FusionCharts( { 
  swfUrl: 'Maps/FCMap_World.swf',
  width: '400', 
  height: '300',
  debugMode : false
});

In the above snippet, all the parameters of the FusionCharts constructor have been passed as properties of an Object. Please note that these property names are case-sensitive. To know about all the parameters that you can pass as property using this Object please click here.

Mixed parameters

You can also use a mix of standard parameters and Object based parameters. You can pass first few parameters in order and then provide the rest of the parameters as Object. Some examples are as follows:

var myMap = new FusionCharts( "Maps/FCMap_World.swf" , "myMapId" ,
  { 
    registerWithJS : true,
    width: '400', 
    debugMode : false,
    height: '300'
  }
);

In the above samples the first two parameters are passed individually in proper order. An object containing other parameters as key-value pairs is passed at the end. The two sets of parameters combine to yield the same result. You can pass any number of ordered parameters first and then provide the rest of the parameters as object.

Another example can be:

var myMap = new FusionCharts( "Maps/FCMap_World.swf", 
  "myMapId", "400", "300", {debugMode : false }
);

In the above samples the first four parameters are passed individually in proper order. An object containing the rest of the parameters is passed at the end.

Since v3.2 FusionCharts can be rendered using a compact one line code. This reduces two lines of code for each map and makes the implementation easy and seamless. This is achieved using the static render function of FusionCharts class. A typical example is as follows:

var myMap = FusionCharts.render( "Maps/FCMap_World.swf", "myMapId",
  "400", "300", "mapContainer", "Data.xml" , "xmlurl" );

In this mode you need to make sure that you have:

Provided the HTML container (here, mapContainer ) where the map will be rendered.
Provided the SWF and map data.

The last parameter which declares the type of the data (xmlurl) is optional. If skipped, the function will take xmlurl as the default data format.

Object as Constructor parameter

You can pass all the parameters as a single JavaScript Object to the function. The Object will have all the parameters needed to be passed to the function as its properties (key-value pairs). An example will illustrate this:

var myMap = FusionCharts.render( { 
    swfUrl : "Maps/FCMap_World.swf",  
    id : "myMapId",
    width : "400",
    height : "300",
    renderAt : "mapContainer", 
    dataSource : "Data.xml" 
  }
);

Mixed parameters

Like FusionCharts constructor, you can mix the type of parameters in this function too. You can opt to pass first few parameters and then pass the rest of the parameters as an object to the last parameter of the function. The object will contain the rest of the parameters as key-value pairs. For example:

var myMap = FusionCharts.render( "Maps/FCMap_World.swf", "myMapId",
  "400", "300", "mapContainer", {dataFormat : "xmlurl", dataSource : "Data.xml" });

For details on FusionCharts constructor, render() function and the property-names for the object-based parameter, please read API > Methods.

Complete Reference to all the properties, functions and events of FusionCharts classes is provided in API Reference section.