Exporting maps as PDF/Images > Exporting from JavaScript

In this section, we will discuss how we can export maps using JavaScript. First we will start with the simplest of examples and then move on to the harder ones.

Important:
The JavaScript method will only work when the map has been fully rendered in the client browser. You can use the FC_Rendered method to track the same.
 
Due Adobe Flash Player's default security system, the JavaScript method does not work from local filesystem. It only works when hosted on a server (localhost or remote) unless configured otherwise.

Simple JavaScript-Triggered Export

In this example, we would first require you to create a map on your page. Then use an HTML button to initiate the export process on that map.

To achieve this, we will have to do the following:

  1. Create an HTML page with a map in it.
  2. Setup the XML of the map to enable exporting.
  3. Create a JavaScript function to initiate exporting of the map.
  4. Insert an HTML button to call the above JavaScript.

 

Create your page with a map in it:

The process involves including the FusionMaps.js file within the <head> section of your newly created HTML page. Then follow the standard process to load a map using the FusionMaps JavaScript object. (You may refer to JavaScript Embedding article under "Creating your First Map" section.)

The JavaScript code to create a map will appear like below:

var myMap = new FusionMaps('FusionMaps/FCMap_World.swf', 'myMap', '400', '300', '0', '1');

myMap.setDataURL('Data.xml');

myMap.render('mapContainerDiv');
Note that the registerWithJS parameter while initializing your map must be set to '1' for the maps to respond to your JavaScripts.

 

Adjust your Data XML to enable exporting:

For this example, we will be export at a PHP server, with a default action of "Download". For more information on server-side exporting, refer to our Server-side exporting section. The XML to do so will be like below (the attributes pertinent to exporting is marked in bold) and the file will be saved as "Data.xml" beside your HTML file:

<map borderColor='005879' fillColor='D7F4FF' numberSuffix=' Mill.' includeValueInLabels='0' labelSepChar=': ' baseFontSize='9'  
exportEnabled='1' exportAtClient='0' exportAction='download' 
exportHandler='http://www.domain.com/ExportHandlers/FCExporter.php' exportFileName='MyFileName'>
	<colorRange>
		<color minValue='0' maxValue='500' displayValue='Sparsely Populated' color='A7E9BC' />
		<color minValue='500' maxValue='1000' displayValue='Well Populated' color='FFFFCC' />
		<color minValue='1000' maxValue='5000' displayValue='Densely Populated' color='FF9377' />
	</colorRange>
	<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>
The exporting procedure to export at client-side is almost similar, except that additional steps are required to setup the client-side Export Component. For more information, refer to the Client-side exporting section.

 

Now, we write our JavaScript function to initiate exporting on that map:

The JavaScript function uses the simple unction provided within FusionMaps.js to locate the map SWF from its id. Then it calls the new "exportMap()" function on the map. Note that we have first verified whether the map has fully rendered by calling the new hasRendered() function of the map.

<script type="text/javascript">
    function ExportMyMap() {
         var mapObject = getMapFromId('myMap');
         if( mapObject.hasRendered() ) mapObject.exportMap();
    }
 </script>

Now that we have all our codes ready, we assemble them within one HTML file and see the results...

The Final code will look like this:

<html>
<head>
    <title>My Map</title>
    <script type="text/javascript" src="FusionMaps/FusionMaps.js"></script>
    <script type="text/javascript">
        function ExportMyMap() {
            var mapObject = getMapFromId('myMap');
            if( mapObject.hasRendered() ) mapObject.exportMap();
 
    }
    </script>
</head>
<body>
    <div id="mapContainerDiv">FusionMaps loaded here...</div>
    <script type="text/javascript">
        var myMap = new FusionMaps('FusionMaps/FCMap_world.swf', 'myMap', '400', '300', '0', '1');
        myMap.setDataURL('Data.xml');
        myMap.render('mapContainerDiv');
    </script>
    <input type="button" value="Export My Map" onclick="ExportMyMap()" />
</body>
</html>

After this, we open this file in a browser and click on the "Export My Map" button and the map will start exporting all by itself! In case you face any error, refer to "Debug Mode" section under "JavaScript Reference"

 

Providing Export Parameters (Overriding XML Export Attributes) using JavaScript:

The new FusionMaps (v3.1 and above) allows you to provide values for XML attributes via JavaScript as well. The exportMap() function also takes in a parameter that accepts these XML attributes in a JSON object notation.

Not all XML attributes are overridable. The list of export-related XML attributes that can be overridden, can be found under the "Export Attributes" section under "JavaScript Reference." You can provide export attributes in {key1: 'value1', key2: 'value2', ...} format as shown below:

<script type="text/javascript">
    function ExportMyMap() {
         var mapObject = getMapFromId('myMap');
         mapObject.exportMap( { exportAtClient: '1',  exportFormat: 'PDF' } );
    }
 </script>