Issue
I want create a map where i can provide a drop list of all available mapDatas like this: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/maps/demo/all-maps
I have all the maps on my local system in @highcharts/map-collection (https://www.highcharts.com/docs/maps/map-collection) and i want to use them instead of downloading from https://code.highcharts.com/mapdata at runtime.
In my typescript file I use the following imports
import * as Highcharts from "highcharts/highmaps";
import * as HC_DATA from "highcharts/modules/data";
HC_DATA(Highcharts);
In series I provide mapData as:
series: [{
mapData: Highcharts.geojson(Highcharts.maps['custom/world']),
name: 'My series',
data: data,
}]
I get the following exception at runtime:
ng:///CreationModule/DashboardComponent.ngfactory.js:564 ERROR TypeError: Cannot read property 'features' of undefined at Object.a.geojson
Second issue: I want to get list of all available maps, I try to access Highcharts.mapDataIndex as it's explained in demo/all-maps, I get the error that mapDataIndex is undefined.
Please guide me how can i solve the above issues, i think im not using the required imports correctly, please guide.
Solution
The first issue is related to the wrong import of map data. Simply Highcharts.maps['custom/world']
is undefined. You can import map data as json and pass it to chart.map
property like that:
const worldMap = require('@highcharts/map-collection/custom/world.geo.json');
chartOptions = {
chart: {
map: worldMap
},
...
}
Second issue: I want to get list of all available maps, I try to access Highcharts.mapDataIndex as it's explained in demo/all-maps, I get the error that mapDataIndex is undefined.
mapDataIndex is not defined because it is not Highcharts default property and you have to load it (in the example is loaded from here: https://code.highcharts.com/mapdata/index.js?1). Check this description from highcharts-angular
official wrapper documentation of how to load it: https://github.com/highcharts/highcharts-angular#to-load-a-wrapper
mapdata.js:
(function (factory) {
if (typeof module === 'object' && module.exports) {
module.exports = factory;
} else {
factory(Highcharts);
}
}(function (Highcharts) {
...
/* map data content here */
...
}));
In a chart component:
require('./mapdata')(Highcharts);
Demo:
EDIT
Map data can be also loaded using import
:
import mapdata from "./mapdata";
import * as worldMap from '@highcharts/map-collection/custom/world.geo.json';
mapdata(Highcharts);
mapdata.js:
export default function (Highcharts) {
Highcharts.mapDataIndex = {...}
}
Demo:
Answered By - Wojciech Chmiel
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.