I need help with getting my highmap in angular4 app. I installed highcharts using npm.
I included highcharts in my app.component.ts like this because I had some errors that this way solves (maybe it is the wrong way) :
const Highcharts = require('highcharts');
require('highcharts/highcharts-more')(Highcharts);
require('highcharts/modules/solid-gauge')(Highcharts);
require('highcharts/modules/map')(Highcharts);
require('highcharts/modules/data')(Highcharts);
require('highcharts/js/modules/world')(Highcharts);
After that I can use Highcharts for creating the charts without any problems but the problem is that when I want to create a map using Highcharts.js + map.js I can't seem to get the 'world.js' from map collection included or imported or am I missing something? I tried getting the file the same way above require('.../world.js')(Highcharts) and I tried using the "<script src=""> tag in index.html and using the link from highcharts as source, both ways I get the error (link provided down). I also tried copying the data from the 'world.js' directly into chart options under 'mapData: Highcharts.maps['custom/world'] = {...},' and it works that way. So what could I do to use it instead of copy-pasting the data?
To load a map for Highmaps
A map is JSON type file containing mapData code used when a chart is created. Download a map from official Highcharts map collection in Javascript format or use a custom map and add it to your app. Edit the map file, so it could be loaded like a module by adding to beginning and end of a file code below:
(function (factory) {
if (typeof module === 'object' && module.exports) {
module.exports = factory;
} else {
factory(Highcharts);
}
}(function (Highcharts) {
...
/* map file data */
...
}));
In case of using a GeoJSON map file format you should add the above code and additionally, between the added beginning and the map file data, the below code:
Highcharts.maps["myMapName"] =
Where "myMapName" is yours map name that will be used when creating charts. Next, you will be loading a local .js file, so you should add in tsconfig.json in your app allowJs: true:
...
"compilerOptions": {
"allowJs": true,
...
The map is ready to be imported to your app.
import * as Highcharts from 'highcharts/highmaps';
import * as HC_myMap from './relative-path-to-the-map-file/map-file-name';
HC_myMap(Highcharts);
Where relative-path-to-the-map-file should be relative (for the module importing the map) path to the map file and map-file-name should be the name of the map file.