Exporting Maps as PDF or Images > Batch export > Setting JavaScript callback

When exporting maps using batch export component, the component raises 3 events (calls JavaScript methods) during the total course of action:

  • FC_ExportReady(string DOMId) - This is raised when individual maps in the queue have finished capture process and have passed their data to export component. Between initiation of map export and till the time FC_ExportReady event is raised, you might show a waiting message/alert to the user that the map is in processing stage.
  • FC_Exported(Object objRtn) - This is raised when the user selects an individual map from UI to be saved on his disk (not possible when saveMode is set as batch). This method name can be changed by specifying the same in individual map's XML as exportCallback attribute.
  • FC_BatchExported (Object objRtn) - This is raised when the entire batch was saved as a single file on user's disk.

To handle these events, you need to define this function in your JavaScript code. In case of FC_Exported(objRtn) or FC_BatchExported(objRtn), objRtn contains the following parameters (returned from Export Component):

  • statusCode - Has the value of 1 in case of success, and 0 in case of failure.
  • statusMessage - In case of failure, this parameter contains a string description of the error (returned by server)
  • fileName - If saving was successful, this parameter contains the HTTP reference to the image/PDF file saved on server
  • width & height - If saving was successful, these parameters contain the width/height of saved image. Else, they contain 0.
  • DOMId - In case of Save-All, this parameter contains a list of DOMId of the maps in queue that were successfully exported separated by comma. In case of individual map saving, it contains that map's DOM Id.

Let's quickly see an example code where all the callback functions has been implemented. In this example, we just track the events and show messages using JavaScript alert.

<html>
<head>
  <script language="JavaScript" src="../../../JSClass/FusionMaps.js"></script>
  <script language="JavaScript" src="../../../JSClass/FusionMapsExportComponent.js"></script>
  <script type="text/javascript">
    //Define a function, which will be invoked when user clicks the batch-export-initiate button
    function initiateExport(){
      myExportComponent.BeginExport();
    }
    //This event is raised when the map has finished capture phase and passed the data to
    //Export Component for further processing
    function FC_ExportReady(DOMId){
      alert("The map with DOM ID as " + DOMId + " has finished capture mode. It's now ready to be downloaded individually");
    }

    //This event is raised when an individual map has been successfully saved on user's disk (post click of button)
    function FC_Exported(objRtn){
      if (objRtn.statusCode=="1"){
        alert("The map was successfully saved. Its DOM Id is " + objRtn.DOMId);
      } else{
        alert("There was an error saving the map. Error message: " + objRtn.statusMessage + ". Its DOM Id is " + objRtn.DOMId);
      }
    }

    //This event is invoked when the user clicked on Save-All button and all the maps were saved on user's disk
    //as a single file.
    function FC_BatchExported(objRtn){
    if (objRtn.statusCode=="1"){
      alert("The batch was exported and saved as a single file named '" + objRtn.fileName + "'. The maps processed were " + objRtn.DOMId);
    }else{
      alert("There was an error saving the map. Error message: " + objRtn.statusMessage);
    }
  }
</script>
</head>
<body bgcolor="#ffffff">
  <div id="map1div" align="center">The map will appear within this DIV. This text will be replaced by the map.</div>
  <script type="text/javascript">
    //Build the map. Make sure to have registerWithJS as 1
    var myMap1 = new FusionMaps("../../../Maps/FCMap_World.swf", "myMapId1", "500", "266", "0", "1");
    myMap1.setDataURL("SimpleExample.xml");
    myMap1.render("map1div");
  </script>
  <div id="map2div" align="center">The map will appear within this DIV. This text will be replaced by the map.</div>
  <script type="text/javascript">
    //Build the map. Make sure to have registerWithJS as 1
    var myMap2 = new FusionMaps("../../../Maps/FCMap_USA.swf", "myMapId2", "500", "266", "0", "1");
    myMap2.setDataURL("SimpleExample.xml");
    myMap2.render("map2div");
  </script>
  <div id="map3div" align="center">The map will appear within this DIV. This text will be replaced by the map.</div>
  <script type="text/javascript">
    //Build the map. Make sure to have registerWithJS as 1
    var myMap3 = new FusionMaps("../../../Maps/FCMap_World.swf", "myMapId3", "500", "266", "0", "1");
    myMap3.setDataURL("SimpleExample.xml");
    myMap3.render("map3div");
  </script>
  <input type='button' onClick="javascript:initiateExport();" value="Begin batch export" />
  <!-- We also create a DIV to contain the FusionMaps batch exporter component -->
  <div id="fcexpDiv" align="center">FusionMaps Export Handler Component</div></td>
  <script type="text/javascript">
    //Initialize Batch Exporter with DOM Id as fcBatchExporter
    var myExportComponent = new FusionMapsExportObject("fcBatchExporter", "../../../Maps/FCExporter.swf");

    //Add the maps to queue. The maps are referred to by their DOM Id.
    myExportComponent.sourceMaps = ['myMapId1','myMapId2','myMapId3'];

    //------ Export Component Attributes ------//
    //Set the mode as full mode
    myExportComponent.componentAttributes.fullMode='1';
    //Set saving mode as both. This allows users to download individual maps/ as well as download all maps as a single file.
    myExportComponent.componentAttributes.saveMode='both';
    //Show allowed export format drop-down
    myExportComponent.componentAttributes.showAllowedTypes = '1';
    //Cosmetics
    //Width and height
    myExportComponent.componentAttributes.width = '350';
    myExportComponent.componentAttributes.height = '140';
    //Message - caption of export component
    myExportComponent.componentAttributes.showMessage = '1';
    myExportComponent.componentAttributes.message = 'Click on button above to begin export of maps. Then save from here.';
    //Render the exporter SWF in our DIV fcexpDiv
    myExportComponent.Render("fcexpDiv");
  </script>
</body>
</html>
This code, when run, will show you all the events generated for the export.