I can't get to work highmaps, please help

[oomz]

Anyone give me an example in stackblitz on how to use highmaps. I followed other examples but still map is not displaying. I need this urgently so any effort would be much appreciated.

[manvfx]

please help me about implement highmaps

my module good working

import { ChartModule, HIGHCHARTS_MODULES } from 'angular-highcharts';
import * as Highcharts from 'highcharts';
import * as boostCanvas from 'highcharts/modules/boost-canvas';
import * as boost from 'highcharts/modules/boost.src';
import * as exporting from 'highcharts/modules/exporting.src';
import * as heatmap from 'highcharts/modules/heatmap.src.js';
import * as noDataToDisplay from 'highcharts/modules/no-data-to-display.src';
import * as offlineExporting from 'highcharts/modules/offline-exporting.src';
.
.
.
.
.
],
  providers: [
    {
      provide: HIGHCHARTS_MODULES,
      useFactory: () => [
        boostCanvas, boost, exporting, heatmap, noDataToDisplay, offlineExporting
      ]
    }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

export class HighchartsModule {
  constructor() {
    const globalOptions: Highcharts.GlobalObject = {
      // http://api.highcharts.com/highstock/global.timezoneOffset
      timezoneOffset: new Date().getTimezoneOffset()
    };

    Highcharts.setOptions({
      global: globalOptions
    });
  }
}

but highmaps not display no errors!

my mp component:

import { Component, OnInit } from '@angular/core';
import { MapChart } from 'angular-highcharts';
import * as iranMap from './data/ir-map';
import * as Highcharts from 'highcharts/highmaps'

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit {

  mapChart : MapChart;

  data = [
      ['ir-5428', 0],
      ['ir-hg', 1],
      ['ir-bs', 2],
      ['ir-kb', 3],
      ['ir-fa', 4],
      ['ir-es', 5],
      ['ir-sm', 6],
      ['ir-go', 7],
      ['ir-mn', 8],
      ['ir-th', 9],
      ['ir-mk', 10],
      ['ir-ya', 11],
      ['ir-cm', 12],
      ['ir-kz', 13],
      ['ir-lo', 14],
      ['ir-il', 15],
      ['ir-ar', 16],
      ['ir-qm', 17],
      ['ir-hd', 18],
      ['ir-za', 19],
      ['ir-qz', 20],
      ['ir-wa', 21],
      ['ir-ea', 22],
      ['ir-bk', 23],
      ['ir-gi', 24],
      ['ir-kd', 25],
      ['ir-kj', 26],
      ['ir-kv', 27],
      ['ir-ks', 28],
      ['ir-sb', 29],
      ['ir-ke', 30],
      ['ir-al', 31]
  ];

  constructor() {

  }

  ngOnInit() {
    //initilize map
     this.initMap();     
  }

  initMap(){    
    this.mapChart = new MapChart({      
      options:{
        chart: {
          type:'map',
          map: iranMap.default
        }, 
        title: {
          text: 'Iran Map'
        },
        credits: {
          enabled: false
        },
        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },
        colorAxis: {
            min: 0
        },
        series: [{
          mapData: iranMap.default,
          data: this.data,
          name: 'Random data',
          states: {
              hover: {
                  color: '#BADA55'
              }
          },
          dataLabels: {
              enabled: true,
              format: '{point.name}'
          }
        }]
      }

    });
  }

}

[BearandYoon]

Hi @oomz @manvfx Did you find any solution? If so, could you please share your code? I need to show a heatmap in my angular 6 project but it doesn't work.

[minahmoghadam]

Hey, did you find the solution? I have the same problem.