angularhighchartsangular14angular-highcharts

Highcharts angular map chart with tiledwebmap and choropleth not working?


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


Solution

  • 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