CODEWITHSUNDEEP
jsonhighcharts
luftikus143
luftikus143

Reputation: 1285

How to use a custom JSON map in Highmaps

I would like to use a custom world map with Highmaps. I used mapshaper (great tool!) to reduce the number of vertices, and checked the JSON code with a JSON validator and imported it in QGIS, where it works fine. But I don't succeed in convincing Highmaps to use it:

I use:

series : [
{
    data : data,
    //mapData: Highcharts.maps['custom/world'],
    mapData: 'etc/BNDA25_CTY.json',
    ...
}

I haven't found any example (code) of custom JSON maps so far. Guess it's pretty straightforward. But how does it work? Does the JSON to be made in a specific way?

Here is the JSON code.

Upvotes: 0

Views: 892

Answers (1)

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

  1. You need to assign your JSON object as Highcharts.map('name'), where name is a value which we will use to the import.

  2. Highcharts has the option joinBy set to hc-key by default. I can't see this property in your JSON, so we need to change this value, let's say to:

     joinBy: 'ISO3CD',

API: https://api.highcharts.com/highmaps/plotOptions.series.joinBy

  1. We need to set keys for the data, to:

     keys: ['ISO3CD', 'value'],

    API: https://api.highcharts.com/highmaps/series.map.keys

Final demo: https://jsfiddle.net/BlackLabel/q34tue8a/

It will be better to reassign your JSON to the new one with defined the Highcharts.map and attach it as a script, but I left this to you ;)

Upvotes: 1

Related Questions