I am looking at the react highmaps documentation and it seems like they have hardcoded/saved the map data.

Link 1

Link 2

I see in a lot of little tutorials though that the data comes from high maps itself by just passing a key like this

mapData: Highcharts.maps['custom/world'],

See example here

But given that I am writing a pure reactJS/ nodeJS app, I was wondering if there is a way in pure react to pull in the path data for world maps? Is this deployed to react high maps somewhere?

I am looking at the react highmaps documentation and it seems like they have hardcoded/saved the map data.

Link 1

Link 2

I see in a lot of little tutorials though that the data comes from high maps itself by just passing a key like this

mapData: Highcharts.maps['custom/world'],

See example here

But given that I am writing a pure reactJS/ nodeJS app, I was wondering if there is a way in pure react to pull in the path data for world maps? Is this deployed to react high maps somewhere?

• javascript
• node.js
• reactjs
• highcharts
• npm

• I am not sure if I understand your question. Data for a map in highcharts react is just an object, ready to import if it necessary. So if you need it, import it as a regular module. – morganfree Commented Jan 26, 2017 at 11:34
• When I use npm to install highcharts the Highcharts.maps object is empty. – es3735746 Commented Jan 30, 2017 at 18:27
• It's confirmed by HighSoft from June 6, 2018 that their map collection is not available on npm. For further reference read comments of the following the link: highcharts.com/blog/frameworks/react/… The only solution of your case is given below by @Jordan Enev. – user732456 Commented Jun 12, 2018 at 13:29
• the maps are now available on npm. npm i @highcharts/map-collection – jEremyB Commented Apr 24, 2019 at 20:16

3 Answers 3

According the official Highcharts documentation you have to manualy include the map script:

In short, the GeoJSON version of the map is loaded in a script tag in the page. This GeoJSON object is then registered to the Highcharts.maps object, and applied to the mapData option in the chart setup.

As you can see in the fiddle you mentioned, they included the map with the script tag:

<script src="https://code.highcharts.com/mapdata/custom/world.js"></script>

Because of the above script include, the map is available in Highcharts.maps['custom/world'].

So in the React module you have to manually add the desired maps, like in the demo you mentioned. For example, if you want to add the World map, then:

1. Get it from here: https://code.highcharts.com/mapdata/custom/world.js
2. Replace Highcharts.maps["custom/world"] = with module.exports = in the above file.
3. Load the map in your component const map = require('./maps/world');
4. Then you can reference it in the config mapData: map

I understand that you want to skip the above process, but currently there isn't any React module that includes the map.

Actually there is a hackish way you can do it ... In your html file, where the react scripts are included, there you can include world.js script tag, but first you have to make sure that Highcharts.maps object array exist. In that fashion you'll use the maps externally.

However this is a bad practice, because of your React's components will be dependend on that map script.

Good practice is to manage your vendor modules via package manager and reference the modules in the components. In that way the components are self-descriptive

The maps are now available from npm. You can import them directly into your component and pass it to Highcharts through the options object.

npm i @highcharts/map-collection

import mapDataWorld from '@highcharts/map-collection/custom/world.geo.json'

series: [
  {
    mapData: mapDataWorld,
    name: "Asia",
    data: data
  }
]

I find another ways to render the map.

series: [{
          data: Highcharts.geojson(Highcharts.maps['https://code.highcharts.com/mapdata/cou ... /us-all.js']),
          name: 'USA',
          dataLabels: {
            enabled: true,
            format: '{point.properties.postal-code}'
          }
}]

From highcharts forum example

Basically call the js source url to create the map, but I prefer use Jordan Enev's way.

After I take a look, highcharts already gave the map collection, you can install the dependency @highcharts/map-collection example

After that you can try

import React, { Component } from 'react';
import Highcharts from 'highcharts/highmaps';
import exporting from 'highcharts/modules/exporting';
...
...
exporting(Highcharts);
window.Highcharts = Highcharts;
require('@highcharts/map-collection/countries/id/id-all');
...
...
class Choroplethmap extends Component {
...
...
...
}
export default Choroplethmap;

This issue already raise on this issue

Cheers,