Creating JavaScript (HTML5) maps

Starting FusionMaps XT, FusionMaps XT also allows you to 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 makes use of Highcharts 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 and jquery.min.js. 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.

In case you wish to render only JavaScript based maps (and not use Flash at all), 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.

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.

Also note that we have removed the line FusionCharts.setCurrentRenderer('javascript'); from the code. This is because, FusionCharts JavaScript Class automatically switches to JavaScript rendering mode whenever JavaScript map alias is provided.

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 
});