For practice i started Highcharts map project in Angular, and i have a issue with data processing and probably thanks to that showing nothing in page. Data relatively large (3 MB) and coming from a API, so when page is loaded it will be not load the map part right away. The data is automatically converting to JSON and loading to a variable.
I share my code:
map.service.ts:
Code: Select all
import { Injectable } from '@angular/core';
import { Subject,firstValueFrom } from 'rxjs';
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
import { JsonConvert, OperationMode, ValueCheckingMode } from 'json2typescript';
const headers= new HttpHeaders()
.set('Content-Type', 'text/html;charset=UTF-8')
//.set('Access-Control-Allow-Origin', "*")
@Injectable({
providedIn: 'root'
})
export class MapService {
jsonConvert: JsonConvert;
mapSubject: Subject<any> = new Subject();
constructor(private httpClient: HttpClient) {
this.jsonConvert = new JsonConvert();
this.jsonConvert.operationMode = OperationMode.ENABLE;
this.jsonConvert.ignorePrimitiveChecks = false;
this.jsonConvert.valueCheckingMode = ValueCheckingMode.DISALLOW_NULL;
}
getMap(){
var result = "";
let params = new HttpParams().set('inputdate', '2023-02-03')
.set('currpage', 'machine_map.jsp');
firstValueFrom(this.httpClient.get<string>('url',{params:params}))
.then(res=>{
/*let data=res;
console.log(data)*/
this.mapSubject.next(res);
})
}
}
Code: Select all
import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts/highmaps';
import {Subscription } from 'rxjs';
import { MapService } from 'src/app/map.service';
var worldMap = require("@highcharts/map-collection/custom/world.geo.json");
@Component({
selector: 'app-map',
templateUrl: './map.component.html',
styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit {
isHighcharts = typeof Highcharts === 'object'; // new
title = 'test';
Highcharts: typeof Highcharts = Highcharts;
chartConstructor: string = 'mapChart';
chartOptions: Highcharts.Options = {};
private subscriptions: Subscription = new Subscription();
data: any;
constructor(private mapService: MapService) { }
ngOnInit(): void {
this.mapService.getMap();
this.mapService.mapSubject.subscribe(response => {
this.data = response;
this.showMap(this.data);
},
);
}
showMap(data: any): void {
console.log(data);
this.chartOptions = {
/*chart: {
map: worldMap
},*/
title: {
text: "Highmaps basic demo"
},
subtitle: {
text:
'Source map: <a href="http://code.highcharts.com/mapdata/custom/world.js">World, Miller projection, medium resolution</a>'
},
mapNavigation: {
enabled: true,
buttonOptions: {
alignTo: "spacingBox"
}
},
legend: {
enabled: true
},
colorAxis: {
min: 0
},
series: data
};
}
}
Code: Select all
<highcharts-chart
id="container"
[Highcharts]="Highcharts"
[constructorType]="chartConstructor"
[options]="chartOptions"
style="width: 100%; height: 100%; display: block;"
></highcharts-chart>
