CODEWITHSUNDEEP
javascriptreactjstypescripthighchartsreact-highcharts
Zhihar
Zhihar

Reputation: 1428

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)

enter image description here

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

Upvotes: 0

Views: 1153

Answers (2)

elaheh mohebali
elaheh mohebali

Reputation: 11

you should install proj4 and dont foget to add this code to series joinBy: ['hc-key','hcKey']

an example for react highchart map with geo point : https://github.com/elahehmohebali/react-highchart-map-iran

enter image description here

Upvotes: 1

magdalena
magdalena

Reputation: 3718

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.

Related threads: https://github.com/highcharts/highcharts/issues/17192 https://www.highcharts.com/forum/viewtopic.php?f=14&t=48802

Upvotes: 1

Related Questions