[SOLVED] react: show a Highcharts map with geo points

react: show a Highcharts map with geo points

Please tell me how to indicate geo-points (i.e. objects with latitude and longitude) on the map.

I use React and HighchartsReact. I created this code:

import Highcharts from 'highcharts'
import * as HighchartsMap from 'highcharts/highmaps';
import HighchartsReact from 'highcharts-react-official'

//import mapDataWorld from 'https://code.highcharts.com/mapdata/custom/world.geo.json';
import mapDataWorld from '../jsons/maps/world.json';

const options: HighchartsMap.Options = {        
            title: undefined,
            legend: {
                enabled: false
            },
            tooltip: {
                enabled: false
            },
            series: [{
                type: 'map',
                mapData: mapDataWorld,
                name: 'Great Britain',
                borderColor: '#a0a0a0',
                nullColor: 'rgba(255, 255, 255, 0.3)',
                showInLegend: false
            }, {
                type: 'mappoint',
                name: 'Cities',
                dataLabels: {
                    format: '{point.id}'
                },
                data: [{
                    id: 'London',
                    lat: 51.507222,
                    lon: -0.1275
                }, {
                    id: 'Birmingham',
                    lat: 52.483056,
                    lon: -1.893611
                }]
            }]
        };

        return (
<div className="mymap">
    <HighchartsReact
        options = {options}
        highcharts = {HighchartsMap}
        constructorType = {'mapChart'}
    />
</div>);

But the geo-point (London) is not correctly displayed on the map (ie just set to the coordinate (0,0), rather than the correct location on the map)

Please tell me what the error may be and how to fix it

Solution

In case of using geoJSONyou need to also inlcude proj4js library.

Demo: https://codesandbox.io/s/highcharts-react-demo-forked-bb8f8z

However, currently there is an issue related to the proj4js using. See the following threads to get an information about possible workarounds.