World map paths data in react high charts

Question

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?

Answer 1

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

Answer 2

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
  }
]

Answer 3

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,