CODEWITHSUNDEEP
angulartypescripthighcharts
fatimasajjad
fatimasajjad

Reputation: 601

HighMaps select map from list - Highcharts.geojson and Highcharts.mapDataIndex issues

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.

Upvotes: 0

Views: 4119

Answers (2)

Muhammad Alhrake
Muhammad Alhrake

Reputation: 46

You just need to add a new config tag in tsconfig.json and keep the import like bellow

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



chartOptions = {
  chart: {
    map: worldMap
  },
  ...
}

// in tsconfig.json
"compilerOptions": {
    
    "resolveJsonModule": true,
    ...
}

then you need to restart ts server press ctrl+shift+p and type Restart TS server

Upvotes: 0

Wojciech Chmiel
Wojciech Chmiel

Reputation: 7372

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:

Upvotes: 3

Related Questions