Embedding Maps Using <object>/<embed> HTML Tags

FusionMaps XT can also be embedded in web pages using plain HTML and without using FusionCharts JavaScript Class.

Note: Only Flash maps can be rendered using <object>/<embed> tags.

For this, you need to use the <object>/<embed> HTML tags. This method can be implemented in applications that do not support JavaScript. You can also use this method where the entire map embedding code is fetched using an AJAX request (e.g., ASP.NET UpdatePanel) and the AJAX response should contain the <object>/<embed> tags.

We always recommend that you use FusionCharts JavaScript Class method for embedding the maps in an HTML page. This is the only way to get JavaScript (HTML5) fallback for the maps. When embedding using <object>/<embed> method, only Flash maps will show up. Additionally, the following features will not be supported as they are dependent on the FusionCharts JavaScript Class:
  • JSON data support
  • Managed printing in Mozilla based browsers
  • Enhanced browser-specific error handling

Code examples discussed in this section are present in Download Package > Code > MyFirstMap folder.
HTML embedding with XML data provided as URL

We modify our first sample FirstMap.html and rename it as FirstMap-html-embed-xml-url.html, and copy the following code into it: 

<html>
   <head>
	<title>My First Map using FusionMaps XT - 
          Using HTML embedding method - XML from URL</title>
	</head>
   <body>
    <object width="750" height="400" id="World" 
            classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
            codebase="http://fpdownload.macromedia.com
              /pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" >

         <param name="movie" value="Maps/FCMap_World.swf" />

         <param name="FlashVars" value="&dataURL=Data.xml
                    &chartWidth=750&chartHeight=400
                    &DOMId=myMapId&registerWithJS=1&debugMode=0">

         <param name="quality" value="high" />

         <embed src="Maps/FCMap_World.swf" flashVars="&dataURL=Data.xml
                    &chartWidth=750&chartHeight=400
                    &DOMId=myMapId&registerWithJS=1&debugMode=0" 
            
              width="750" height="400" name="World" 
              quality="high" 
              type="application/x-shockwave-flash" 
              pluginspage="http://www.macromedia.com/go/getflashplayer" />

      </object>

	</body>
</html>

See it live!

The HTML code in bold is responsible for embedding Flash maps into the HTML page.

In the above code, we have done the following:

  • Used the <object> and <embed> tags to embed the World Map (FCMap_World.swf) within the HTML page. We set the tags' ID and name, set the width (750 pixels) and height (400 pixels).
  • Loaded the map SWF file using movie parameter of <object> tag and src attribute of <embed> tag.
  • Passed map external data to FlashVars parameter/attribute using &dataUrl=Data.xml. Here, we indicate the path of the data source (XML file) relative to the HTML page – Data.xml in this case.
  • Passed the width and height to the map by means of chartWidth and chartHeight variables through FlashVars.
  • Provided other required FlashVars like DOMId which is the DOM id of the map and FlashVars like debugMode, registerWithJS.

To render a Flash movie in a browser, the HTML page must contain certain tags for initiating the Flash movie. <object> and <embed> tags are used for this purpose. The <object> tag is recognized by Internet Explorer under Microsoft Windows and the <embed> tag is recognized by other browsers.

Even though both <object> and <embed> tags have similar functionality, it is essential to use both the tags for the sake of cross browser compatibility. For optimum compatibility, the <embed> tag must be nested within the <object> tag (as shown in the code above). This way, Active X-enabled browsers like Internet Explorer can ignore the <embed> tag (as it is inside the <object> tag), and other browsers that do not recognize the <object> tag can carry on with the <embed> tag.

HTML embedding using XML data embedded in HTML page

You can also embed the XML in the <object>/<embed> tag itself without depending on the external source.
We modify our first sample FirstMap-html-embed-xml-url.html and rename it as FirstMap-html-embed-xml-embed.html.

<html>
   <head>
	<title>My First map using FusionMaps XT - 
     Using HTML embedding method - XML from URL</title>
	</head>
   <body>
    <object width="750" height="400" id="World" 
            classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
            codebase="http://fpdownload.macromedia.com/pub/
              shockwave/cabs/flash/swflash.cab#version=8,0,0,0" >

         <param name="movie" value="Maps/FCMap_World.swf" />

         <param name="FlashVars" value="&chartWidth=400&chartHeight=300
                    &DOMId=myMapId&registerWithJS=1&debugMode=0
                    &dataXML=<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>"
         >

         <param name="quality" value="high" />

         <embed src="Maps/FCMap_World.swf"
                flashVars="&chartWidth=750&chartHeight=400
                    &DOMId=myMapId&registerWithJS=1&debugMode=0
                    &dataXML=<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>" 
            
              width="750" height="400" name="World" 
              quality="high" 
              type="application/x-shockwave-flash" 
              pluginspage="http://www.macromedia.com/go/getflashplayer" />

      </object>

	</body>
</html>

See it live!

As you can note from the bold text in the code above, we have only replaced &dataURL FlashVars variable with &dataXML and to this variable we have passed the map XML data. The resultant map will be the same.

Depending on your coding practice, you’d be enclosing the entire XML string either using single 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. Using, single quotes for encapsulation of the entire XML string and also for individual attributes, will lead to a conflict. Conflict arising due to improper use of quotes does not raise an error, but shows an empty space in place of map (or sometimes a JavaScript error).
FusionMaps XT FlashVars details

When using HTML embedding, all variables to the map are passed using FlashVars. The table below lists all such variables supported:

Variable Description
dataURL This variable takes the path of the XML data file or stream as value. This method is called Data URL method. It is mutually exclusive to dataXML variable.

* In case both &dataURL and &dataXML are set to blank or not provided, the map will search for the default Data.xml file in the same path as the HTML file.
dataXML This variable passes the XML embedded in <object> or <embed> tag. This method is called the Data String method. It is mutually exclusive to dataURL variable.

* In case both &dataURL and &dataXML are set to blank or not provided, the map will search for default Data.xml file in the same path as the HTML file.
DOMId ID for the map using which it will be recognized in the HTML page. Each map on the page needs to have a unique ID.
chartWidth Intended width for the map (value in pixels without any px suffix or value in percent with %25 as suffix. %25 is the UrlEncoded form of % sign)
chartHeight Intended height for the map (values in pixels without any px suffix or value in percent with %25 as suffix. %25 is the UrlEncoded form of % sign)
debugMode Whether to start the map in debug mode which shows a Debug Window over the map. Set it to 1 to show the Debug Window (for Flash maps). Please see Debugging your Maps section for more details on Debug Mode.
registerWithJS Whether to register the map with JavaScript. This value should always be set to 1 to get maximum possible access to JavaScript APIs of the map. But when using the object/embed method, only minimal JavaScript functions are available to map (e.g., setDataURL, setDataXML, print, exportChart etc.) .

If you are running the maps from local file system, you need to configure the Flash Player Global Security settings.

scaleMode Scaling option of the map. It can take any value out of the four: "noscale", "exactfit", "noborder" and "showall". FusionMaps XT works best in "noScale" mode.
lang (optional) Preferred language for map messages. For example, EN. The present supported language is EN, that is, English. Other languages can be added by adding to source code of map and then compiling it.
Limitations of using HTML embed method

There are some limitations of HTML embedding method. Let us get a comprehensive list of the limitations:

  • It does not support JSON data format. So the only data format that you can pass to map using this method is XML.
  • It is not fully compatible with FusionCharts JavaScript framework; hence, many of the advanced features (like Print Manager, LinkedCharts, Advanced Event management, etc.) will not work.
  • It does not support rendering of JavaScript (HTML5) map.