Create custom maps for Highcharts Maps (Angular v8+)

recently I had to use a custom map for Highcharts module in angular v8 project. And faced some difficulties. So I decided to write a document for it here so if anybody faced it too, use this article.

To create a custom map and use in Angular projects, You should follow these steps:

1- You should have generated SVG output of your map provided with inkspace application. if you don’t have it yet. Please follow instructions in this link and create a SVG version of your map with it.

2- Convert map svg to highcharts format to use in js codes.

3- load modules required in Angular

Now I will describe each of these steps precisely:

1- Create SVG of your map with Inkspace soft

As mentioned earlier you need to create the SVG version of your map with this link provided with highcharts community. remember to follow to step 13 just. There is a bug in provided link in step 13. skip it and just go to below section.

2- convert Inkspace svg output to highcharts format

As i said earlier there is a bug in link provided with highcharts official website. And I couldn’t make it work in moment. So I asked a question in stackoverflow and after a day one of highcharts developers responded.

convert svg to Highcharts Map

It seems there is a bug in provided link, So he sent me another link which is working fine. (By the way, don’t know why they didn’t fix the link after this!)

Now you will have a json data for your map link below picture:

3- Use new Map data in Angular

Now you just need to load Highcharts required modules in your .ts file.

And here is the sample .ts file:
import * as Highcharts from 'highcharts';
import MapModule from 'highcharts/modules/map';
const myMap = require('../my-map.json');
MapModule(Highcharts);


@Component({
  // tslint:disable-next-line:component-selector
  selector: 'kt-mymap',
  templateUrl: './mymap.component.html',
  styleUrls: ['./mymap.component.scss']
})
export class MyMapComponent implements OnInit {
  Highcharts: typeof Highcharts = Highcharts;
chartMap: Highcharts.Options = {
  chart: {
    map: myMap,
  },
  mapNavigation: {
    enabled: false,
  },
  navigator : {
    enabled : false
  },
  exporting: {
    enabled: false
  },
  title: {
    text: ''
  },
  subtitle: {
    text: ''
  },
  legend: {
    enabled: false
  },
  colorAxis: {
    min: 0
  },
  // @ts-ignore
  series: [
    // @ts-ignore
    {
      type: 'map',
      joinBy: 'id',
      mapData: [
        {
          'id': '13',
          'name': 'city name',
          // tslint:disable-next-line:max-line-length
          'path': 'M115,-166C115,-166,111,-164,106,-163,102,-162,100,-162,98,-162,97,-162,92,-168,91,-169,89,-170,83,-161,81,-160,79,-159,76,-156,68,-161,60,-166,29,-189,29,-189,29,-189,23,-189,21,-192,19,-196,24,-202,21,-204,19,-206,0,-232,0,-234,0,-236,0,-239,3,-244,6,-248,6,-256,12,-257,19,-258,36,-258,40,-256,44,-255,52,-256,52,-256,52,-256,80,-233,83,-235,86,-237,93,-248,97,-247,101,-246,106,-244,107,-241,108,-238,105,-227,108,-224,112,-221,121,-213,121,-203,121,-194,116,-189,116,-185,116,-180,115,-166,115,-166z'
        },
        {
          .... <rest of map data>
}
      ],
      data: [
        {
          'id': '13',
          'y': 0
        },
        {
          'id': '81',
          'y': 1
        },
        {
          .... <rest of map data>
        }
      ],
      dataLabels: {
        enabled: true,
        format: '{point.name}'
      },
      point: {}
    },
  ]
};

And in your .html file simply import below code:

<highcharts-chart
        [Highcharts]="Highcharts"
        [constructorType]="'mapChart'"
        [options]="chartMap"
        id="baseMap"
        style="width: 100%; height: 650px; display: block;">
</highcharts-chart>

Now you have successfully imported your map in highcharts. From now on everything is like using map of highcharts. For example you can change color of cities, add series data to it and …

Hope this article was useful. peace :)