Using JSON as data source

Apart from XML, FusionMaps XT can also accept JSON data format. It can use a JSON URL or feed, a JSON Object (in JavaScript) or JSON String. This functionality is provided by FusionCharts JavaScript Class.

In this page, we will see how to pass JSON data to map in various forms. We will again convert our first sample FirstMap.html to implement this.

Code examples discussed in this section are present in Download Package > Code > MyFirstMap folder.
Providing JSON data using Url method

Create a copy of FirstMap.html and rename it to FirstMap-json-url.html. Then punch in the following code:

 
<html>
  <head> 	
    <title>My First map using FusionMaps XT - JSON data URL</title> 	
    <script type="text/javascript" src="Maps/FusionCharts.js"></script>
  </head>   
  <body>     
    <div id="mapContainer">FusionMaps XT will load here!</div>          
    <script type="text/javascript"><!-- 	

      var myMap = new FusionCharts( "Maps/FCMap_World.swf", 
		   "myMapId", "750", "400", "0" );
      myMap.setJSONUrl("Data.json");
      myMap.render("mapContainer");
      
    // -->     
    </script> 	   
  </body> 
</html>

See it live!

Many web servers like IIS6, do not serve .json (no wildcard MIME type) files by default. You need to setup your web server to serve json files. In IIS6 you can do this using these steps:
  • Open the properties for the server in IIS Manager and click MIME Types
  • Click New. Enter "JSON" for the extension and "application/json" for the MIME type
Many browsers restrict JavaScript from accessing local file system owing to security reasons. The JavaScript maps, when running locally, will not be able to access data provided as a URL. If you run the files from a server, it will run absolutely fine, though. When running locally, however, if you provide the JSON data as JSON object (embedded in the same page or in a JavaScript file) or JSON as String, it works fine. We call this Data String method.
Click here to see the code using the Data String method » 
<html>
  <head> 	
    <title>My First map using FusionMaps XT - JSON data</title> 	
    <script type="text/javascript" src="Maps/FusionCharts.js"></script>
  </head>   
  <body>     
    <div id="mapContainer">FusionMaps XT will load here!</div>          
    <script type="text/javascript"><!--

		var myMap = new FusionCharts( "Maps/FCMap_World.swf", 
		    "myMapId", "750", "400", "0" );

		myMapsetJSONData({
  "map": {
    "bordercolor": "005879",
    "fillcolor": "D7F4FF",
    "numbersuffix": "M",
    "includevalueinlabels": "1",
    "labelsepchar": ":",
    "basefontsize": "9"
  },
            
     "data": [
    		{"id": "NA", "value": "515"},
    		{"id": "SA", "value": "373"},
    		{"id": "AS", "value": "3875"},
    		{"id": "EU", "value": "727"},
    		{"id": "AF", "value": "885"},
    		{"id": "AU", "value": "32"}
  ]
});

		myMap.render("mapContainer");      
    // -->  
    </script> 	   
  </body> 
</html>
See it live!

In the above code, we have provided a JSON data (compatible with World map) to the map using the setJSONUrl() function. The data stored in the JSON file is as follows:

 
{
  "map": {
    "bordercolor": "005879",
    "fillcolor": "D7F4FF",
    "numbersuffix": "M",
    "includevalueinlabels": "1",
    "labelsepchar": ":",
    "basefontsize": "9"
  },
  "data": [
    {"id": "NA", "value": "515"},
    {"id": "SA", "value": "373"},
    {"id": "AS", "value": "3875"},
    {"id": "EU", "value": "727"},
    {"id": "AF", "value": "885"},
    {"id": "AU", "value": "32"}
  ]
}

To know more on FusionMaps XT JSON data format, please go through FusionMaps XT data formats > JSON section. You can take help of FusionMaps XT Data Converter tool to convert map XML to JSON (or vice-versa) and use it.
Providing JSON Object embedded in HTML

You can also provide JSON embedded in the HTML itself. Since JSON format is derived from JavaScript, you can also pass a JavaScript Object as data for the map. This is possible using the setJSONData() function as shown below: 

...   
		myMap.setJSONData(
		{
  "map": {
    "bordercolor": "005879",
    "fillcolor": "D7F4FF",
    "numbersuffix": "M",
    "includevalueinlabels": "1",
    "labelsepchar": ":",
    "basefontsize": "9"
  },
  "data": [
    {"id": "NA", "value": "515"},
    {"id": "SA", "value": "373"},
    {"id": "AS", "value": "3875"},
    {"id": "EU", "value": "727"},
    {"id": "AF", "value": "885"},
    {"id": "AU", "value": "32"}
  ]
}
	);
...

See it live!
Providing JSON String embedded in HTML

Additionally, you can also pass JSON data, stored as a String. In many cases, AJAX feed comes as JSON String, so you do not have to convert the string to JSON. FusionMaps XT takes care of that as shown below:

 
...
   
myMap.setJSONData ( '{ '+
' "map": { '+
   ' "bordercolor": "005879", '+
   ' "fillcolor": "D7F4FF", '+
   ' "numbersuffix": "M", '+
   ' "includevalueinlabels": "1", '+
   ' "labelsepchar": ":", '+
   ' "basefontsize": "9" '+
 ' }, '+
  ' "data": [ '+
  ' {"id": "NA", "value": "515"}, '+
  ' {"id": "SA", "value": "373"}, '+
  ' {"id": "AS", "value": "3875"}, '+
  ' {"id": "EU", "value": "727"}, '+
  ' {"id": "AF", "value": "885"}, '+
  ' {"id": "AU", "value": "32"} '+
 ' ] '+
' }'
    );
...

See it live!