Highcharts Maps

[bigalnz]

I am trying to display a map in highcharts in Angular 20. I have read the docs for angular-highcharts for maps, and it linked to a stackblitz which was using Angular 10, so I assume this is very old - and maybe not a good example to follow.

My non-working attempt so far is:

map-tile.ts
`
import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import * as Highcharts from 'highcharts';
import { HighchartsChartComponent } from 'highcharts-angular';
import mapModule from 'highcharts/modules/map';
import type { Options } from 'highcharts';

// Register the map module
mapModule(Highcharts);

// Import the actual map
import * as worldMap from '@highcharts/map-collection/custom/world.geo.json';

@component({
selector: 'app-map-tile',
standalone: true,
imports: [CommonModule, HighchartsChartComponent],
templateUrl: './map-test.html',
styleUrl: './map-test.scss'
})
export class MapTestTileComponent implements OnInit {
Highcharts: typeof Highcharts = Highcharts;
chartOptions!: Options; // Declare but initialize later

ngOnInit(): void {
this.chartOptions = {
chart: {
map: worldMap as any,
height: 500,
},
title: {
text: 'World Map',
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series: [
{
type: 'map',
name: 'Random data',
mapData: worldMap as any,
data: worldMap.features.map((f, i) => [f.properties['hc-key'], Math.random() * 100]),
}
],
credits: { enabled: false }
};
}
}
`

and html:

`
<highcharts-chart
[options]="chartOptions"
style="width: 100%; height: 100%; display: block;"

`

Any help on this would be appreciated. Thank you.

[PowerKiKi]

Docs link to obsolete StackBlitz all over the place. Don't trust them. Instead have a look a this brand new, ultra-minimum sample: https://stackblitz.com/edit/stackblitz-starters-gqh4ap7k?file=src%2Fmain.ts

If that fails, read the code of the demo app within this repo: https://github.com/highcharts/highcharts-angular/tree/master/src

[bigalnz]

Any chance of a working sample of a map please?

When I try to apply fragments of the old sample, I keep hitting errors like for this I get :

import worldMap from "@highcharts/map-collection/custom/world.geo.json";

TS2307: Cannot find module '@highcharts/map-collection/custom/world.geo.json' or its corresponding type declarations.
src/main.ts:8:21
Click outside, press Esc key, or fix the code to dismiss.

[PowerKiKi]

https://github.com/highcharts/highcharts-angular/tree/master/src/app/map-chart

I suggest you clone this repo, and then npm i && npm start to figure out how the demo app works.

[bigalnz]

https://github.com/highcharts/highcharts-angular/tree/master/src/app/map-chart

I suggest you clone this repo, and then npm i && npm start to figure out how the demo app works.

Thank you for that. I got a a demo working inside my angular project, but now I have hit another wall trying to use another provider of maps which needs me to load webtilemap - which I can get to load but doesn't seem to register as the URL for my provider is never called.

Is there a example for this too please?

Thank you

[bigalnz]

I am also thinking it would be good to write up a stackoverflow question on this to share with others - I know the question and the fix but not enough to explain it properly - if you want to contribute to that?

[PowerKiKi]

I won't contribute more, but don't let that stop you. More documentation, in any form, is always welcome

[karolkolodziej]

I got a a demo working inside my angular project, but now I have hit another wall trying to use another provider of maps which needs me to load webtilemap

Looks like you managed to run it, are you still struggling with Highcharts, or is this another provider of maps?