How to draw points with highcharts-react?

Question

I'm using highcharts-react , this a wrapper of highcharts. what I expect is like: https://jshare.com.cn/highmaps/hhhhAf I need a map , and draw some point in the map. quite simple for now. the difference is I want use a USA map. so far I got here: a pure USA map , and I try to add some points into the map . but it doesn't work.

the code is here:

import React from "react";
import { Component } from "react";
import { render } from "react-dom";
import Highcharts from "highcharts";
import HC_map from "highcharts/modules/map";
import HighchartsReact from "highcharts-react-official";
import mapData from "./mapdata.js";
import usaMapData from "./UsaMapData.js";
import usaBubbleData from "./usaBubbleData";

HC_map(Highcharts);

const mapOptions = {
    title: {
        text: "Map-Demo"
    },
    tooltip: {
        formatter: function() {
            return (
                this.point.capital +
                ", " +
                this.point.parentState +
                "<br>Lat: " +
                this.point.lat +
                " Lon: " +
                this.point.lon +
                "<br>Population: " +
                this.point.population
            );
        }
    },
    mapNavigation: {
        enabled: false
    },
    series: [
        {
            name: "Basemap",
            mapData: usaMapData,
            borderColor: "#606060",
            nullColor: "rgba(200, 200, 200, 0.2)",
            showInLegend: false
        },
        {
            type: "mappoint",
            name: "Cities",
            color: "#7cb5ec",
            data: [
                {
                    name: "Montgomery",
                    lat: 32.38012,
                    lon: -86.300629
                },
                {
                    name: "Juneau",
                    lat: 58.29974,
                    lon: -134.406794
                },
                {
                    name: "Phoenix",
                    lat: 33.44826,
                    lon: -112.075774
                },
                {
                    name: "Little Rock",
                    lat: 34.748655,
                    lon: -92.274494
                }
            ]
        }
        // {
        //   type: "mappoint",
        //   dataLabels: {
        //     enabled: true,
        //     format: "{point.capital}"
        //   },
        //   name: "Cities",
        //   data: usaBubbleData,
        //   maxSize: "15%",
        //   color: "#7cb5ec"
        // }
    ]
};

export default class Mapdemo extends Component {
    // eslint-disable-next-line no-useless-constructor
    constructor(props) {
        super(props);
    }

    render() {
        console.dir(usaBubbleData);
        return (
            <div>
                <HighchartsReact
                    highcharts={Highcharts}
                    constructorType={"mapChart"}
                    options={mapOptions}
                />
            </div>
        );
    }
}

can anyone helps me?

Answer 1

I have fix this by using proj4

Step1 : install proj4 npm install proj4

Step2 : import into project import proj4 from "proj4";

Step3 : bind proj4 to window: window.proj4 = proj4;

and now the lat/lon can be work in the right way.