Sign in to follow this  
natg504

Issues With Custom Map

Recommended Posts

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 some issues. It loads when I use the FusionCharts.js, but it does not work correctly with FusionMaps.js, so I can't use some of those functions with it.

 

If I use FusionMAPS.js, it will load when I use setDataXML with a string, although the width & height & scale are not correct. If I use an external XML file and setDataURL, it will just display part of the map that is blacked-out.

 

In both cases these maps are cropped and enlarged, so it's ignoring the width & height I sent in the variables. If I use it as a FusionChart instead of FusionMap, this works and it's displayed correctly. I just have other issues in that case with not being able to use some functions I want to use.

 

 

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

MY HTML CODE

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

<HEAD>
  <TITLE>FusionMaps & JavaScript - Updating map using setDataURL() Method</TITLE>
  <script LANGUAGE="Javascript" SRC="assets/js/FusionMaps.js"></SCRIPT>
  <script LANGUAGE="JavaScript">
     function updateMap(datafile){
        //Get reference to map object using Dom ID
        var mapObj = FusionCharts("map1Id");
        //Update its URL
        mapObj.setDataURL("data/"+datafile+".xml");
        mapObj.render("map1div");

     }
  </SCRIPT>
</HEAD>
<BODY>
  <div id="map1div">
     FusionMaps
  </div>
  <script language="JavaScript">
     var map1 = new FusionMaps("assets/charts/ourdistrict.swf", "map1Id", "750", "400", "1", "1");
       map1.setDataURL("data/ourDistrict_data.xml");
   //map1.setDataXML("<map showCanvasBorder='1' canvasBorderColor='f1f1f1' canvasBorderThickness='2' borderColor='00324A' fillColor='F0FAFF' hoverColor='C0D2F8'></map>");	
     map1.render("map1div");
  </script>
  <form name='frmUpdate'>
  	  <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
  </form>
</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();

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this