Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

0

Custom Map

Started by natg504, Jul 25 2012 08:55 PM

Please log in to reply

1 reply to this topic

#1 natg504

Junior Member

Members
18 posts

Posted 25 July 2012 - 08:55 PM

I would like to create a map of our company's district, which includes parts of 4 states. Using the example provided in MyFirstMap.fla, I have created a customized map, but I am still having one issue. I'd like to create a form with radio buttons to change the xml data file source. I have tested this with other maps and charts, and it works correctly, but my custom map is having some issues. My code is below...

I have tested it by adding an 'alert(chartReference.getXMLData());' call at the end of updateMap, and I can see that the xml file is actually updating correctly, but the new data is not updating on the screen. I have tried to add "chartReference.render('chartContainer');" at the end of the updateMap function as well, and the chart does refresh, but only with generic data, not my data file.

Please let me know if you need any more information or if you have any suggestions.

============================================
MY HTML CODE
============================================

<html>
  <head>
    <title>Update Chart data</title>
   <script LANGUAGE="Javascript" SRC="assets/js/FusionCharts.js"></SCRIPT>
  </head>
  <body>
    <div id="chartContainer">FusionCharts will load here!</div>
    <script type="text/javascript"><!--

      var myChart = new FusionCharts( "assets/Charts/OurDistrict.swf", "myChartId", "400", "300", "0", "1" );
      myChart.setDataURL("data/OurDistrict_population.xml");
      myChart.render("chartContainer");

		function updateMap(datafile){	
			var chartReference = FusionCharts( "myChartId" );
			chartReference.setDataURL("data/"+datafile+".xml");
		}
    // -->
    </script>

   
   	  <input name="mapOpt" type="radio" value="OurDistrict_data" onchange="javaScript:updateMap(this.value);" />OurDistrict_data 
      <input name="mapOpt" type="radio" value="OurDistrict_population" onchange="javaScript:updateMap(this.value);" />OurDistrict_population  
  </body>
</html>

============================================
MY ACTIONSCRIPT CODE IN THE .FLA FILE
============================================

#include "com/fusionmaps/includes/LoadingFunctions.as"
#include "com/fusionmaps/includes/AppMessages.as"

//initialize variables
var stageWidth = 600;
var stageHeight = 450;
var chartX = 0;
var chartY = 0;
var chartDebugMode = false;
var xmlFile = "";
var xmlString = "";

//flashVars
chartWidth = _root.chartWidth;
chartHeight = _root.chartHeight;
if (_root.debugMode == "1"){
	chartDebugMode = true;
}
xmlFile = _root.dataURL;
xmlString = _root.dataXML;

//set chart position
var chartX = (stageWidth - chartWidth)/2;
var chartY = (stageHeight - chartHeight)/2;

// -------------- Actual Code to create the map ------------//
//To create a map, you first need to create an empty movie clip to act as map holder.
var mapContainerMC:MovieClip = this.createEmptyMovieClip("MapHolder", 1);

// ------------- XML Data for the map -------------- //

if (xmlString != ""){
	var OurDistrict_Data:XML = new XML(xmlString);
	loadMap();
}else{
	var OurDistrict_Data:XML = new XML();
	OurDistrict_Data.ignoreWhite = true;
	OurDistrict_Data.load(xmlFile);
}
// --------------------------------------------------- //


OurDistrict_Data.onLoad = function(success) {
	if (success) {
		loadMap();		
	}
};

function loadMap(){
	//Now, instantiate the map using Constructor function of the map.
		
	//Convey the XML data to map.
	var myMap:OurDistrictMap = new OurDistrictMap(mapContainerMC, 1, chartWidth, chartHeight, chartX, chartY, chartDebugMode, "EN", "exactFit", false, "");
	myMap.setXMLData(OurDistrict_Data);
	
	//Draw the map
	myMap.render();
}

//Stop
stop();

============================================
============================================