Using XML data embedded in HTML page

In our previous examples, we had created maps by providing map data through an external XML file. Here, we will show you how to embed the XML directly into an HTML page.

In our previous examples, we had used the JavaScript function setXMLUrl() to provide the URL of the XML file to the map. Hence, the term Data URL method is used for referring to the technique used earlier.

Here, we'll use the setXMLData()function which takes XML embedded as string from the JavaScript. We call it the Data String method.

Create a copy of FirstMap.html and save it as FirstMap-xml-embed.html. Next, modify the code as shown below:

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

 
<html>
  <head>
    <title>My First map using FusionMaps XT  - 
          using XML data embedded in the page</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='M' 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>

Existing users: You might be wondering what happened to the functions like setDataURL() and setDataXML() which you have already been using in your application. Yes - although deprecated, these will continue to work without any problem.

See it live!

In the above code, we have provided the entire XML data as a string inside the code itself and passed it to the map using the setXMLUrl() method.

There are certain pointers to be kept in mind when using Data String method:

  • Depending on your coding practice, you'd be enclosing the entire XML string using either single quotation marks (') or double quotation marks ("). So, if you are enclosing the entire XML in double quotes, then the XML attributes must be encapsulated in single quotes or vice-versa. Using single quotes for encapsulation of the entire XML string and also for individual attributes, or vice-versa, will lead to a conflict. Conflict arising due to improper use of quotes is most likely to cause a JavaScript error and the map will not render.
  • If an XML attribute has single quotation mark (') or double quotation marks (") as part of its value, you need to encode them as XML entities. The encoded form of single quotation mark (') is &apos; and the encoded form of double quotation marks (") is &quot;.
  • If you have special characters like &, < and > in your XML, you must encode them as &amp;, &lt; and &gt; (respectively) in your XML String.

Existing Users: Prior to FusionMaps XT, while using this method, you need to encode various characters. Since FusionMaps XT, except for a few characters listed in Using Currency Symbols and Using Special Punctuation pages (from Advanced Topics > Using Special Characters section), no character is required to be encoded while using this process. The new FusionCharts JavaScript Class takes care of everything.