Highcharts angular map chart with tiledwebmap and choropleth not working?

Question

I am trying to create a Highcharts choropleth mapchart with the Esri Tiled Web Map(background) in angular 14. both series working if loaded seperately, but if i render a map with both choropleth mapchart series and Esri Tiled Web Map series then pages getting frozen/not working.

working stackblitz -> https://stackblitz.com/edit/highcharts-angular-map-tile

Please help me to find solution.

Expected Map Output

Answer 1

you missed the tiledwebmap module in your example.

import TiledWebMap from 'highcharts/modules/tiledwebmap';
TiledWebMap(Highcharts);

Apart from that, use TopoJSON instead GeoJSON map together with TWM series.

import worldMap from '@highcharts/map-collection/custom/world.topo.json';

Working demo: https://stackblitz.com/edit/highcharts-angular-map-tile-22m1jr?file=src%2Fapp%2Fapp.component.ts