| FusionMaps, JavaScript and saveAsImage() Method |
If you've configured your maps to allow export to images (see section Saving as Image), you can invoke this functionality using JavaScript too, using the saveAsImage() method of each map. The first step is to set registerWithJS flag of map as 1, as shown under: |
<div id="map1div"> |
Next, in your XML data configure the parameters required for map saving (imageSave, imageSaveURL etc.). Thereafter, you can invoke the saveAsImage() method of the map object to invoke the map saving routine. |
| <HTML> <HEAD> <TITLE>FusionMaps & JavaScript - Saving Map Example</TITLE> <SCRIPT LANGUAGE="Javascript" SRC="../../FusionMaps/FusionMaps.js"></SCRIPT> <SCRIPT LANGUAGE="JavaScript"> function saveMap(){ //Get map from its ID var mapToPrint = getMapFromId("map1Id"); mapToPrint.saveAsImage(); } </SCRIPT> </HEAD> <BODY> <CENTER> <h2>FusionMaps and JavaScript - Basic Example</h2> <div id="map1div"> FusionMaps </div> <script language="JavaScript"> var map1 = new FusionMaps("../../FusionMaps/FCF_World.swf", "map1Id", "400", "300", "0", "1"); map1.setDataXML("<map imageSave='1' imageSaveURL='http://<<Path to your script>>/FusionChartsSave.aspx'>...</map>"); map1.render("map1div"); </script> <center><input type='button' value='Save Map as Image' onClick='javascript:saveMap();'></center> </CENTER> </BODY> </HTML> |
In the above code, we're first creating a world map with DOM Id as map1Id. We also register it with JavaScript. Thereafter, we've created a HTML button, which when clicked invokes the local saveMap() function. This function just gets the reference to the map using getMapFromId() function and finally invokes the saveAsImage() method on the map. If you intend to save the map soon after the map has loaded, make sure to put the saveAsImage() command in FC_Rendered event; otherwise, the exporting will get invoked before the map has started rendering, and you'll get a blank image output. |