FusionCharts v3 Documentation

FusionMaps, JavaScript and setDataURL Method

In this section, we'll see how to update the map by providing it the new URL for XML Data. Using this method, we just provide the URL of the XML data document to map. It then becomes the job of the map to request data from that URL, parse it and finally render it.

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

To show an example of this, we've created a physical XML data file named as NewData.xml, which contains the following code to display Population Density on the map:

<map animation='0' borderColor='005879' fillColor='D7F4FF' numberSuffix=' per sq. mile' includeValueInLabels='1' labelSepChar=': ' baseFontSize='9'>

   <data>

      <entity id='NA' value='32' />

      <entity id='SA' value='73' />

      <entity id='AS' value='203' />

      <entity id='EU' value='134' />

      <entity id='AF' value='65' />

      <entity id='AU' value='6.4' />

   </data>

</map>

We'll now create an HTML page ChangeDataURL.html, which will use the setDataURL() method of map to make the map read new data from the above XML file. It contains the following code:

<HTML>

      <HEAD>

   <TITLE>FusionMaps & JavaScript - Updating map using setDataURL() Method</TITLE> 

   <SCRIPT LANGUAGE="Javascript" SRC="../JSClass/FusionMaps.js"></SCRIPT>

   <SCRIPT LANGUAGE="JavaScript">

      //updateMap method is called whenever the user clicks the button to

      //update the map. Here, we get a reference to the map and update it's

      //data using setDataURL method.

      function updateMap(DOMId){

         //Get reference to map object using Dom ID

         var mapObj = getMapFromId("map1Id");

         //Update its URL

         mapObj.setDataURL("NewData.xml"); 

         //Disable the button

         this.document.frmUpdate.btnUpdate.disabled = true;

      }

   </SCRIPT>

</HEAD>

<BODY>

   <div id="map1div">

      FusionMaps

   </div>

   <script language="JavaScript"> 

      var map1 = new FusionMaps("../Maps/FCMap_World.swf", "map1Id", "750", "400", "0", "1");

      map1.setDataXML("<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>");

      map1.render("map1div");

   </script>

   <form name='frmUpdate'>

      <input type='button' value='Show Population Density' onClick='javaScript:updateMap();' name='btnUpdate'>

   </form>

</BODY>

</HTML>

In the above code, we're first creating a World Map with DOM Id as map1Id. We also register it with JavaScript. We initially provide the following data to the map and ask it to render:

Thereafter, we're creating a button, which when clicked would update the map with new XML data. The button calls the updateMap() JavaScript function when clicked.

The updateMap() JavaScript function has the following code to update the map:

function updateMap(DOMId){

          //Get reference to map object using Dom ID

          var mapObj = getMapFromId("map1Id");

          //Update its URL

          mapObj.setDataURL("NewData.xml"); 

          //Disable the button

          this.document.frmUpdate.btnUpdate.disabled = true;

    }

Here, we first get a reference to the map using its DOM Id. We use the getMapFromId() JavaScript function to get the reference. Once we've got the reference, we simply call setDataURL method and pass the URL of XML data document to this function. This method forces the map to load the new data, read it and then redraw accordingly. Finally, we disable the button, as it has already been clicked once.

When you now view this page, you'll first see a World Map showing Population of different continents:

When you click on the button, you'll get the "Population Density" map as under. Also, the button is now disabled:

The entire thing happens at client side, without any page refreshes.