[PRO] How to Use Custom JSON as Data Source

You can use custom JSON as the data source for your regions. To enable this you’ll need to go to “Custom Data Source” in the regions tab and enable the “JSON Data” option.

In the “Raw JSON Data” field you can add your code. It should be an array of objects. Ideally it would have the same properties the plugin uses when building regions. But this is not mandatory. For example:

[
	{
		name: "California",
		id: "US-CA",
		tooltipContent: "United States - Hello California!",
		fill: "#6699cc",
		hover: "#660000",
		content: "https://california.com/",
		action: "open_url",
		value: "0",
		useDefaults: "0",
	},
	{
		name: "Texas",
		id: "US-TX",
		tooltipContent: "United States - Hello Texas!",
		fill: "#6699cc",
		hover: "#660000",
		content: "https://texas.com/",
		action: "open_url",
		value: "0",
		useDefaults: "0",
	}
]

However, not all fields are mandatory. In reality you only need one field to be used as the id. For example

[
    {
        "country": "Afghanistan",
        "population": "35530081"
    },
    {
        "country": "Albania",
        "population": "2930187"
    }
]

The above code will still work if we set “country” as the JSON ID property. The plugin will then populate the other values with the default region values (color, hover color, etc).

You can also add a URL to an online JSON file, instead of adding the code directly there. This is particularly useful if you’re getting your data from an external service. Consider the plugin will cache the contents of the file for some time (1 hour by default).

Remember, the data added to this field needs to be valid JSON and it should be an array of objects.

This feature of reading data from a json file is particularly useful when using it together with the heat map feature to automatically populate your map.

View Example Map

For the above map I used this JSON data.

Video Example

To top

[PRO] How to Create Heat-maps (choropleth maps)

How to Manipulate Data with the Available Filters

[PRO] How to Sanitize Data – Callback Function

[PRO] Best Practices when Using the Tooltip Content and Design

[PRO] Tooltip Content and Design