I sh для реализации карты мира HighChart, например: https://www.highcharts.com/maps/demo/data-class-ranges
app.component.ts
Импорт
import { Component, OnInit } from '@angular/core';
import * as Highcharts from 'highcharts';
import DataModule from 'highcharts/modules/data';
import MapModule from 'highcharts/modules/map';
import ExportingModule from 'highcharts/modules/exporting';
DataModule(Highcharts);
MapModule(Highcharts);
ExportingModule(Highcharts);
Contructor
constructor() {
Highcharts.data({
googleSpreadsheetKey: '1WBx3mRqiomXk_ks1a5sEAtJGvYukguhAkcCuRDrY1L0',
// Custom handler when the spreadsheet is parsed
parsed: (columns) => {
// Read the columns into the data array
var data = [];
Highcharts.each(columns[0], function (code, i) {
data.push({
code: code.toUpperCase(),
value: parseFloat(columns[2][i]),
name: columns[1][i]
});
});
Highcharts.mapChart(this.createMapOptions(data));
return true
},
});
}
Метод createMapOptions:
createMapOptions(mapData): Highcharts.Options {
return {
chart: {
map: 'custom/world',
borderWidth: 1,
renderTo: 'container-map', // added div id
},
colors: ['rgba(19,64,117,0.05)', 'rgba(19,64,117,0.2)', 'rgba(19,64,117,0.4)',
'rgba(19,64,117,0.5)', 'rgba(19,64,117,0.6)', 'rgba(19,64,117,0.8)', 'rgba(19,64,117,1)'],
title: {
text: 'Population density by country (/km²)'
},
mapNavigation: {
enabled: true
},
colorAxis: {
dataClasses: [{
to: 3
}, {
from: 3,
to: 10
}, {
from: 10,
to: 30
}, {
from: 30,
to: 100
}, {
from: 100,
to: 300
}, {
from: 300,
to: 1000
}, {
from: 1000
}]
},
legend: {
title: {
text: 'Individuals per km²',
style: {
color: ( // theme
Highcharts.defaultOptions &&
Highcharts.defaultOptions.legend &&
Highcharts.defaultOptions.legend.title &&
Highcharts.defaultOptions.legend.title.style &&
Highcharts.defaultOptions.legend.title.style.color
) || 'black'
}
},
align: 'left',
verticalAlign: 'bottom',
floating: true,
layout: 'vertical',
backgroundColor: ( // theme
Highcharts.defaultOptions &&
Highcharts.defaultOptions.legend &&
Highcharts.defaultOptions.legend.backgroundColor
) || 'rgba(255, 255, 255, 0.85)',
symbolRadius: 0,
symbolHeight: 14
},
series: [{
data: mapData,[![enter image description here][1]][1]
joinBy: ['iso-a3', 'code'],
animation: true,
name: 'Population density',
states: {
hover: {
color: '#a4edba'
}
},
tooltip: {
valueSuffix: '/km²'
},
shadow: false,
type: "area",
}]
}
}
app.component. html - это просто HTML с тегом div с идентификатором контейнера-карты. Я добавил этот идентификатор createMapOptions
<div id="container-map"></div>
См. Прикрепленное изображение, чтобы увидеть проблему 
, с которой я столкнулся.
Ждем ваших предложений.
Заранее спасибо.