FusionMaps XT and JavaScript: Overview

FusionMaps XT uses FusionCharts JavaScript Class that takes care of all the products of FusionCharts Suite XT including FusionMaps XT.

FusionMaps XT offers highly enhanced JavaScript classes for better integration and control. It seamlessly binds with JavaScript and AJAX to let you do the following:

  1. Your existing Flash based implementations automatically get rendered as pure JavaScript maps in iPhone/iPad or related devices
  2. You can create pure JavaScript based maps (not Flash)
  3. You use the object oriented JavaScript implementation methods and make use of new objects, static methods, properties, constants related to FusionMaps XT
  4. You can use the static function FusionCharts to access all map instances present in a page
  5. You can make use of better and advanced JavaScript event model (using addEventListener function) to listen to all events. FusionMaps XT comes with a host of events which you can use
  6. You can configure and create LinkedCharts, a smart drill-down feature introduced in FusionMaps XT
  7. It also introduces better printing support for all Mozilla based browsers using the PrintManager class
  8. Now you can easily handle loading of data via HTTPS or secure protocol using Internet Explorer
  9. You can handle UTF-8 based multi-lingual texts more optimally
  10. It allows you support for better error management and debugging
  11. You can set properties of an existing map
  12. You can provide map data in JSON format
  13. You can update an existing map's data using map's native AJAX capabilities or browser's AJAX support
  14. It provides API to get data back from map in XML/JSON/CSV format
  15. It provides API function like isActive() to check the rendering state of a map
  16. You can clone an existing map's configurations
  17. You can dispose and clean a map object and free as much memory as possible

Note that all JavaScript integration methods implemented prior to FusionMaps XT will continue to function without any problem. Know more on the JavaScript integration introduced prior to FusionMaps XT) »
  1. Register map with JavaScript and then listen to various events like - map loaded, data loaded, map rendered, error in map etc.
  2. Get the map instance using getMapFromId() function to perform all pre-v3.1 functions listed in points below
  3. Update the map at client-side, without incurring any page refreshes, by providing XML data from functions viz - setDataXML, setDataURL
  4. Get the map's XML data using getXML()
  5. Get any attribute from map XML using getMapAttribute()
  6. Get the map's data as CSV using getDataAsCSV()
  7. Print map using print()
  8. Invoke the exporting routine for map (as image/PDF) using exportMap()
  9. Invoke JavaScript methods like signature() and hasRendered() to get information about the map
  10. Life-cycle events raised by maps: FC_Loaded, FC_Rendered, FC_DataLoaded, FC_DataLoadError, FC_DataXMLInvalid
  11. Track when mouse pointer rolls-over and rolls-out of entities using FC_Event
FusionMaps XT and JavaScript integration
FusionMaps XT is no more Flash! It's Flash + JavaScript. JavaScript, on one hand, acts as a helper class to the Flash based maps and adds more functionality to these maps. On the other hand, JavaScript acts as a renderer of pure JavaScript based maps.

Using the combination of Flash and JavaScript, you can offer a seamless experience to your end users. Here, we'll discuss how the integration of both these technologies yields the best results.

Before we move to the examples, please make sure that you have setup Flash Player Global Security settings so that you don't encounter any problems when locally implementing FusionMaps XT using JavaScript.
The First Step

Before we start with any of our examples, you need to ensure that you have the following things ready for use:

  1. Map SWF files - Present in Download Package > Maps folder
  2. FusionCharts JavaScript Class files (FusionCharts.js, FusionCharts.HC.js, FusionCharts.HC.Maps.js and jquery.min.js) - present in Download Package > Maps folder
  3. JavaScript Map Definition files - All other JavaScript files present in Download Package > Maps folder.
Implementation

In the following pages we will learn how FusionCharts JavaScript Classes integrate with FusionMaps XT. We will learn how to:

We will also go through all API Reference of FusionCharts JavaScript Classes.