FusionCharts v3 Documentation

FusionMaps and Flash > Loading Multiple Maps

In our previous example, we had seen how to load a single map in a Flash movie. Here, we'll see how to load two maps in a single Flash Movie.

Loading two (or n maps) in your Flash movie is as simple and straight-forward as loading a single movie. You just need to create instances of each map class, provide it the right XML data and then ask it to render.

For this example, we create MultipleMaps.fla under FlashExamples folder. Copy "World Map" and "USA Map" folder from FCMap_World.fla and FCMap_USA.fla (or MapLibrary.fla if you've a license other than Enterprise license) respectively to this .fla.

Now, like in previous example, create a layer "Graphic Elements" in this file too and add two oval backgrounds instead of one, as we'll now be loading two maps. Shown below is a reference image:

Now, in the Actions Layer of this movie, punch the following code:

/**
* This keyframe contains the Actions required to load a FusionMaps
* map in your Flash movie.
*
* We've set the FPS of this movie to 120 for smooth animations.
* Depending on your requirements, you can set any FPS. FusionMaps
* renders time based animations, so the length of animation would stay
* same. Only the smoothness would vary.
*/
//You first need to include the following two files in your movie.
//These two files contain pre-loading functions and application
//messages for the map.

//Note: If you're loading multiple maps in your Flash movie, you
//do NOT need to include these files for each each. You can put these
//lines in the main timeline, so that it gets loaded only once.
#include "com/fusionmaps/includes/LoadingFunctions.as"
#include "com/fusionmaps/includes/AppMessages.as"

//Import the Class of the map which you want to create.
//All maps are present in the package
//com.fusionmaps.maps (Download Package > MapSource folder)
import com.fusionmaps.maps.WorldMap;
import com.fusionmaps.maps.USAMap;

// ------------- XML Data for the map -------------- //
//FusionMaps necessarily needs its data in XML format.
//So, if you've data in arrays, forms, recordsets, etc., you
//first need to convert it into XML. Only then would you be able
//to use the maps.

//Here, we're hard-coding an XML data document for demo.
//In your applications, this XML data could be dynamically
//built at run time using string concatenation or XML
//Object.

// --------------- Data for World Map -----------------//
//Generate the XML data. We hide the border of map, set background
//alpha as 0 (for transparency), set legend at bottom, hide its shadow
var strXML1:String = "<map bgAlpha='0' showCanvasBorder='0' includeNameInLabels='0' includeValueInLabels='1' numberSuffix=' Mn.' labelSepChar=': ' baseFontSize='9' legendPosition='BOTTOM' legendShadow='0'>";
//Define color range
strXML1 = strXML1 + "<colorRange>";
strXML1 = strXML1 + "<color minValue='0' maxValue='500' displayValue='Sparsely Populated' color='A7E9BC' />";
strXML1 = strXML1 + "<color minValue='500' maxValue='1000' displayValue='Well Populated' color='FFFFCC' />";
strXML1 = strXML1 + "<color minValue='1000' maxValue='5000' displayValue='Densely Populated' color='FF9377' />";
strXML1 = strXML1 + "</colorRange>";
//Add simple data for demo.
strXML1 = strXML1 + "<data>";
strXML1 = strXML1 + "<entity id='NA' value='515' />";
strXML1 = strXML1 + "<entity id='SA' value='373' />";
strXML1 = strXML1 + "<entity id='AS' value='3875' />";
strXML1 = strXML1 + "<entity id='EU' value='727' />";
strXML1 = strXML1 + "<entity id='AF' value='885' />";
strXML1 = strXML1 + "<entity id='AU' value='32' />";
strXML1 = strXML1 + "</data>";
strXML1 = strXML1 + "</map>";

// ------------ Data for US Map ---------- //
var strXML2:String = "<map bgAlpha='0' showCanvasBorder='0' labelSepChar=': ' baseFontSize='9' legendPosition='BOTTOM' legendShadow='0'>";
//Color Range
strXML2 = strXML2 + "<colorRange>";
strXML2 = strXML2 + "<color minValue='0' maxValue='1000000' displayValue='Sparsely Populated' color='A7E9BC' />";
strXML2 = strXML2 + "<color minValue='1000000' maxValue='5000000' displayValue='Well Populated' color='FFFFCC' />";
strXML2 = strXML2 + "<color minValue='5000000' maxValue='100000000' displayValue='Densely Populated' color='FF9377' />";
strXML2 = strXML2 + "</colorRange>";
//Actual Data
strXML2 = strXML2 + "<data>";
strXML2 = strXML2 + "<entity id='Al' value='4557808' />";
strXML2 = strXML2 + "<entity id='Ak' value='663661' />";
strXML2 = strXML2 + "<entity id='Az' value='5939292' />";
strXML2 = strXML2 + "<entity id='Ar' value='2779154' />";
strXML2 = strXML2 + "<entity id='Ca' value='36132147' />";
strXML2 = strXML2 + "<entity id='Co' value='4665177' />";
strXML2 = strXML2 + "<entity id='Ct' value='3510297' />";
strXML2 = strXML2 + "<entity id='De' value='843524' />";
strXML2 = strXML2 + "<entity id='DC' value='550521' />";
strXML2 = strXML2 + "<entity id='Fl' value='17789864' />";
strXML2 = strXML2 + "<entity id='Ga' value='9072576' />";
strXML2 = strXML2 + "<entity id='Hi' value='1275194' />";
strXML2 = strXML2 + "<entity id='Id' value='1429096' />";
strXML2 = strXML2 + "<entity id='Il' value='12763371' />";
strXML2 = strXML2 + "<entity id='In' value='6271973' />";
strXML2 = strXML2 + "<entity id='Io' value='2966334' />";
strXML2 = strXML2 + "<entity id='Ks' value='2744687' />";
strXML2 = strXML2 + "<entity id='Ky' value='4173405' />";
strXML2 = strXML2 + "<entity id='La' value='4523628' />";
strXML2 = strXML2 + "<entity id='Me' value='1321505' />";
strXML2 = strXML2 + "<entity id='Md' value='5600388' />";
strXML2 = strXML2 + "<entity id='Ma' value='6398743' />";
strXML2 = strXML2 + "<entity id='Mi' value='10120860' />";
strXML2 = strXML2 + "<entity id='Mn' value='5132799' />";
strXML2 = strXML2 + "<entity id='Ms' value='2921088' />";
strXML2 = strXML2 + "<entity id='Mo' value='5800310' />";
strXML2 = strXML2 + "<entity id='Mt' value='935670' />";
strXML2 = strXML2 + "<entity id='Ne' value='1758787' />";
strXML2 = strXML2 + "<entity id='Nv' value='2414807' />";
strXML2 = strXML2 + "<entity id='Nh' value='1309940' />";
strXML2 = strXML2 + "<entity id='Nj' value='8717925' />";
strXML2 = strXML2 + "<entity id='Nm' value='1928384' />";
strXML2 = strXML2 + "<entity id='Ny' value='19254630' />";
strXML2 = strXML2 + "<entity id='Nc' value='8683242' />";
strXML2 = strXML2 + "<entity id='Nd' value='636677' />";
strXML2 = strXML2 + "<entity id='Oh' value='11464042' />";
strXML2 = strXML2 + "<entity id='Ok' value='3547884' />";
strXML2 = strXML2 + "<entity id='Or' value='3641056' />";
strXML2 = strXML2 + "<entity id='Pa' value='12429616' />";
strXML2 = strXML2 + "<entity id='Ri' value='1076189' />";
strXML2 = strXML2 + "<entity id='Sc' value='4255083' />";
strXML2 = strXML2 + "<entity id='Sd' value='775933' />";
strXML2 = strXML2 + "<entity id='Tn' value='5962959' />";
strXML2 = strXML2 + "<entity id='Tx' value='22859968' />";
strXML2 = strXML2 + "<entity id='Ut' value='2469585' />";
strXML2 = strXML2 + "<entity id='Vt' value='623050' />";
strXML2 = strXML2 + "<entity id='Va' value='7567465' />";
strXML2 = strXML2 + "<entity id='Wa' value='6287759' />";
strXML2 = strXML2 + "<entity id='Wv' value='1816856' />";
strXML2 = strXML2 + "<entity id='Wi' value='5536201' />";
strXML2 = strXML2 + "<entity id='Wy' value='509294' />";
strXML2 = strXML2 + "</data>";
strXML2 = strXML2 + "</map>";

//FusionMaps map classes accept XML data as XML Object
//and not XML String.
//So, if you've an XML string, first create an XML object from it
//and then pass to the map. We do the same.
var xmlData1:XML = new XML(strXML1);
var xmlData2:XML = new XML(strXML2);
// --------------------------------------------------- //

// -------------- Actual Code to create the map ------------//
//Create movie clip holders for the map.
var mapContainerMC1:MovieClip = this.createEmptyMovieClip("MapHolder1",1);
var mapContainerMC2:MovieClip = this.createEmptyMovieClip("MapHolder2",2);
//Now, instantiate the map using Constructor functions.
var myWorldMap:WorldMap = new WorldMap(mapContainerMC1, 1, 380, 320, 20, 15, false, "EN", "noScale", false, "");
var myUSAMap:USAMap = new USAMap(mapContainerMC2, 1, 380, 320, 440, 15, false, "EN", "noScale", false, "");

//Convey the XML data to maps.
myWorldMap.setXMLData(xmlData1);
myUSAMap.setXMLData(xmlData2);
//Draw the maps
myWorldMap.render();
myUSAMap.render();
//Stop
stop();

In the above code, we're:

First including com/fusionmaps/includes/LoadingFunctions.as & com/fusionmaps/includes/AppMessages.as - required files for pre-loading map.
Thereafter, we import the WorldMap class and USAMap Class as we'll be plotting two maps in this example.
We now create the XML data for both the maps. In this example, again, we've hard-coded the XML data. You can create the XML data dynamically based on your data sources.
We convert the XML data into XML Objects.
We now create two empty movie clips - one for each map.
Next, we create instances of both the map and pass the required parameters. We set the x and y offset of USA Map so that it draws on the right of World Map.
Moving on, we convey the XML data of each map using setXMLData method.
Finally, we draw both the maps by calling the render() method for each map's instance object.

When you now view the application, you'll get the following output.

In this example, we've included just the World Map and USA Map. You can include any map in your application in the same way.

Also, here we've shown just 2 maps together. You can include any number of maps in your application (on a single screen too).

Now that you're fairly convinced of the power of FusionMaps in conjunction with Flash, let's move ahead and see an advanced example that will illustrate a few advanced features like updating map data at run-time, hiding map, re-initializing map etc.