You are viewing documentation for an older version. For current documentation - click here.
Creating JavaScript (HTML5) maps

Starting FusionMaps XT, you can create JavaScript based maps (sometimes also referred to as HTML5 or Canvas maps). This feature allows you to create maps in Web browsers where Flash Player is not supported or not installed or is disabled, for example, in iPhone/iPad. FusionCharts internally uses a modified version of Raphaël library to generate JavaScript based maps. This feature works seamlessly with the current implementation mode of FusionMaps XT, which means you do not have to write any additional code to implement this. FusionCharts JavaScript Class automatically detects devices where Flash is not supported and renders JavaScript based maps instead. You can also ignore Flash and only use JavaScript to create maps.

Code examples discussed in this section are present in Download Package > Code > MyFirstMap folder.

First, let's look at the default code, which enables rendering of both Flash and JavaScript based maps - with JavaScript rendering coming into effect, only when Flash Player is not available.

<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( "Maps/FCMap_World.swf", "myMapId", "750", "400", "0");
      myMap.setXMLUrl("Data.xml");
      myMap.render("mapContainer");      
    // -->  
    </script> 	   
  </body> 
</html>

See it live in your iPad or iPhone or any browser where Flash Player is not supported.

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.
Click here to see the code using the Data String method » 
<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( "Maps/FCMap_World.swf", 
		    "myMapId", "750", "400", "0");

      myMap.setXMLData("<map 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("mapContainer");      
    // -->  
    </script> 	   
  </body> 
</html>

See it live in your iPad or iPhone or any browser where Flash Player is not supported.

As you can see, the code has not changed a bit from our first sample - FirstMap.html This is exactly our point! If you open this page in your iPad or iPhone or any browser where Flash Player is not supported, you will see that the maps have been rendered using JavaScript. FusionCharts JavaScript framework automatically does this for you.

JavaScript notes: For rendering JavaScript maps, FusionMaps XT make use of FusionCharts.HC.js, FusionCharts.HC.Maps.js, jquery.min.js and the map definition file FusionCharts.HC.world.js (in case you are creating a world map). These files are present in the Maps folder of the Download Pack. It is very important that you keep these files in the same folder as FusionCharts.js. You do not need to load these files explicitly in HTML. FusionCharts.js automatically takes care of the loading.
Explicitly render JavaScript only maps

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>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" );
      myMap.setXMLUrl("Data.xml");
      myMap.render("mapContainer"); 
    // --> 
    </script>
  </body> 
</html>

See it live!

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 map.

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

 var myMap = new FusionCharts( { 
	type: 'World',   
	width: '750',    
	height: '400',   
	debugMode : false 
});

You may also opt to render JavaScript maps using the SWF file name along with its path. For this, you just have to add a line of code as shown below: 

FusionCharts.setCurrentRenderer('javascript').

This code will ask FusionMaps XT renderer to skip Flash rendering and create pure JavaScript based maps.

The modified code will look like the following:

<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"><!--

      FusionCharts.setCurrentRenderer('javascript');

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

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

See it live!

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.
Click here to see the code using the Data String method » 
<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"><!--
	
	  FusionCharts.setCurrentRenderer('javascript');

      var myMap = new FusionCharts( "Maps/FCMap_World.swf", 
		    "myMapId", "750", "400", "0");

      myMap.setXMLData("<map 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("mapContainer");      
    // -->  
    </script> 	   
  </body> 
</html>

See it live in your iPad or iPhone or any browser where Flash Player is not supported.

When you open this page, you will see that even in regular browsers, the map comes in pure JavaScript form as shown below.