FusionMaps XT and JSON

FusionMaps XT can also build maps using JSON (JavaScript Object Notation) data format. JSON is a light-weight and simple data format that is easy to read and understand. Though derived from JavaScript, the data structure is language-independent, with encoders and parsers available for virtually every programming language.

Important: To use JSON data format with FusionMaps XT, you will need to embed the maps using FusionCharts JavaScript Class (FusionCharts.js), as the maps internally still use XML. The JavaScript class provides the bridge between JSON and XML.

Here are a few basic things to know about JSON data:

  • JSON data is text based data consisting of key and value pairs in format key : value . The values have data associated with them
  • You can make up your own key-value pairs like name : "John Doe" to store data
  • Every JSON data is enveloped by curly brace and key:value pairs are comma separated, like { firstName : "John" , lastName: "Doe" }. In JavaScript, this format is called an Object
  • A key can be a value within single or double-quotes e.g. { "name" : "John Doe" }
  • You can use Objects as values too. For example, { "employee" : { "name" : "John Doe" , "department" : "Project Manager" , "age" : 35 } }
  • In JSON, the basic data types are:
    • Number (integer or real)
    • String (double-quoted Unicode with backslash escaping)
    • Boolean (1 or 0 in FusionCharts JSON)
    • null
    • Array (an ordered sequence of values of Number, String, Boolean, null, Object or Array type, comma-separated and enclosed in square brackets). For example, [ "employees" : [ "Employees" , { "name" : "John Doe" } , 35 ]
    • Object (a collection of key:value pairs, comma-separated and enclosed in curly braces. Value can be of Number, String, Boolean, null, Object or Array type). For example, { "employee" : { "name" : "John Doe" , "department" : "Project Manager" , "age" : 35 } }

A map is controlled by a single JSON data source, that is, the same source contains data to plot, functional settings and cosmetic properties. There are many properties that you can define for each map type. However, it is not necessary to define all the properties for a given map. For example, if you do not want to change the default setting of the background (color, alpha, etc.), you don't have to define any property for the background - the default values will be assumed. Thus, each map can be generated using minimal properties.

All maps in FusionMaps XT pack follow a common JSON format. The JSON structure for FusionMaps XT closely follows the XML format for FusionMaps XT. All the XML nodes are represented as JSON Objects, where as all the attributes are set as properties. Here is a sample XML vs JSON that will help you understand it quickly.

XML JSON 
<map borderColor='005879' fillColor='D7F4FF' numberSuffix='M' includeValueInLabels='1' labelSepChar=':' baseFontSize='9'>
     <data>
        <entity id='NA' value='515' />
        <entity id='SA' value='373' />
        <entity id='AS' value='3875' />
        <entity id='EU' value='727' />
        <entity id='AF' value='885' />
        <entity id='AU' value='32' />
     </data>
</map>
 
{
  "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"}
  ]
}

The above comparison shows that the JSON data contains:

  • A "map" Object which is equivalent to the <map> XML Node
  • All the <map> node XML attributes are provided as properties (like "borderColor":"005879", "numberSuffix":"M")of the "map" object in the JSON
  • Similarly "data" is an Array which contains a list of Objects, each representing a <data> XML node
  • The collection of all <entity> nodes of a data reside as "entity" Array in the JSON

Since, the JSON format has close resemblance with the XML format, we will mostly use the term XML attribute (for JSON properties) and XML element/node (for JSON Object or Array) in the whole documentation. Likewise, the XML API page of each map will be the source for JSON Object and properties. Moreover, you can always use the FusionCharts Data Format Conversion Tool to convert your XML to JSON and vice-versa