0

I want to display a map in my React project , it looks like this: https://www.highcharts.com/docs/maps/latlon

I have seen the guide , but I want to using it in react. the guide is all about native html/js .

and I have fond there is an react wrapper here: https://github.com/highcharts/highcharts-react I tried to use this to build a demo application.and here is my .js file:

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
      );
    }
    // crosshairs: [
    //   {
    //     zIndex: 5,
    //     dashStyle: "dot",
    //     snap: false,
    //     color: "gray"
    //   },
    //   {
    //     zIndex: 5,
    //     dashStyle: "dot",
    //     snap: false,
    //     color: "gray"
    //   }
    // ]
  },
  mapNavigation: {
    enabled: false
  },
  series: [
    {
      name: "Basemap",
      mapData: usaMapData,
      borderColor: "#606060",
      nullColor: "rgba(200, 200, 200, 0.2)",
      showInLegend: false
    },
    {
      name: "Separators",
      type: "mapline",
      //   data: H.geojson(usaMapData, "mapline"),
      color: "#101010",
      enableMouseTracking: false
    },
    {
      type: "mapbubble",
      dataLabels: {
        enabled: true,
        format: "{point.capital}"
      },
      name: "Cities",
      data: usaBubbleData,
      maxSize: "12%",
      color: "#7cb5ec"
    }
  ]
};

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

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

but the blue bubble not display on the screen I only got a gray USA map. and I compare the code with the origin demo below: (from highmaps official website)

$(function () {
    var H = Highcharts,
        map = H.maps['countries/us/us-all'],
        chart;
    // Add series with state capital bubbles
    $.getJSON('https://data.jianshukeji.com/jsonp?filename=json/us-capitals.json&callback=?', function (json) {
        var data = [];
        $.each(json, function (ix, entry) {
            entry.z = entry.population;
            data.push(entry);
        });
        $('#container').highcharts('Map', {
            title: {
                text: 'Highmaps lat/lon 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;
                },
                crosshairs: [{
                    zIndex: 5,
                    dashStyle: 'dot',
                    snap: false,
                    color: 'gray'
                }, {
                    zIndex: 5,
                    dashStyle: 'dot',
                    snap: false,
                    color: 'gray'
                }],
            },
            mapNavigation: {
                enabled: true
            },
            series: [{
                name: 'Basemap',
                mapData: map,
                borderColor: '#606060',
                nullColor: 'rgba(200, 200, 200, 0.2)',
                showInLegend: false
            }, {
                name: 'Separators',
                type: 'mapline',
                data: H.geojson(map, 'mapline'),
                color: '#101010',
                enableMouseTracking: false
            }, {
                type: 'mapbubble',
                dataLabels: {
                    enabled: true,
                    format: '{point.capital}'
                },
                name: 'Cities',
                data: data,
                maxSize: '12%',
                color: H.getOptions().colors[0]
            }]
        });
        chart = $('#container').highcharts();
    });
    // Display custom label with lat/lon next to crosshairs
    $('#container').mousemove(function (e) {
        var position;
        if (chart) {
            if (!chart.lab) {
                chart.lab = chart.renderer.text('', 0, 0)
                    .attr({
                    zIndex: 5
                })
                    .css({
                    color: '#505050'
                })
                    .add();
            }
            e = chart.pointer.normalize(e);
            position = chart.fromPointToLatLon({
                x: chart.xAxis[0].toValue(e.chartX),
                y: chart.yAxis[0].toValue(e.chartY)
            });
            chart.lab.attr({
                x: e.chartX + 5,
                y: e.chartY - 22,
                text: 'Lat: ' + position.lat.toFixed(2) + '<br>Lon: ' + position.lon.toFixed(2)
            });
        }
    });
    $('#container').mouseout(function (e) {
        if (chart && chart.lab) {
            chart.lab.destroy();
            chart.lab = null;
        };
    });
});

the HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.2.2/proj4.js"></script>
<script src="https://img.hcharts.cn/mapdata/countries/us/us-all.js"></script>
<div id="container"></div>

if I comment out the data property in series(type:"mapbubble"), than I got totally same result with my own code. so the mistake maybe here. but I compare my usaBubbleData with the data in the demo, it's the same data.I copied them from the demo.

here is my usaBubbleData:

var usaBubbleData = [
  {
    abbrev: "AL",
    parentState: "Alabama",
    capital: "Montgomery",
    lat: 32.38012,
    lon: -86.300629,
    population: 205764,
    z: 205764
  },
  {
    abbrev: "AK",
    parentState: "Alaska",
    capital: "Juneau",
    lat: 58.29974,
    lon: -134.406794,
    population: 31275,
    z: 31275
  },
  {
    abbrev: "AZ",
    parentState: "Arizona",
    capital: "Phoenix",
    lat: 33.44826,
    lon: -112.075774,
    population: 1445632,
    z: 1445632
  },
  {
    abbrev: "AR",
    parentState: "Arkansas",
    capital: "Little Rock",
    lat: 34.748655,
    lon: -92.274494,
    population: 193524,
    z: 193524
  },
  {
    abbrev: "CA",
    parentState: "California",
    capital: "Sacramento",
    lat: 38.579065,
    lon: -121.491014,
    population: 466488,
    z: 466488
  },
  {
    abbrev: "CO",
    parentState: "Colorado",
    capital: "Denver",
    lat: 39.74001,
    lon: -104.992259,
    population: 600158,
    z: 600158
  },
  {
    abbrev: "CT",
    parentState: "Connecticut",
    capital: "Hartford",
    lat: 41.763325,
    lon: -72.674069,
    population: 124775,
    z: 124775
  },
  {
    abbrev: "DE",
    parentState: "Delaware",
    capital: "Dover",
    lat: 39.158035,
    lon: -75.524734,
    population: 36047,
    z: 36047
  },
  {
    abbrev: "FL",
    parentState: "Florida",
    capital: "Tallahassee",
    lat: 30.439775,
    lon: -84.280649,
    population: 181376,
    z: 181376
  },
  {
    abbrev: "GA",
    parentState: "Georgia",
    capital: "Atlanta",
    lat: 33.748315,
    lon: -84.391109,
    population: 420003,
    z: 420003
  },
  {
    abbrev: "HI",
    parentState: "Hawaii",
    capital: "Honolulu",
    lat: 21.30477,
    lon: -157.857614,
    population: 337256,
    z: 337256
  },
  {
    abbrev: "ID",
    parentState: "Idaho",
    capital: "Boise",
    lat: 43.60698,
    lon: -116.193409,
    population: 205671,
    z: 205671
  },
  {
    abbrev: "IL",
    parentState: "Illinois",
    capital: "Springfield",
    lat: 39.801055,
    lon: -89.643604,
    population: 116250,
    z: 116250
  },
  {
    abbrev: "IN",
    parentState: "Indiana",
    capital: "Indianapolis",
    lat: 39.76691,
    lon: -86.149964,
    population: 820445,
    z: 820445
  },
  {
    abbrev: "IA",
    parentState: "Iowa",
    capital: "Des Moines",
    lat: 41.58979,
    lon: -93.615659,
    population: 203433,
    z: 203433
  },
  {
    abbrev: "KS",
    parentState: "Kansas",
    capital: "Topeka",
    lat: 39.049285,
    lon: -95.671184,
    population: 127473,
    z: 127473
  },
  {
    abbrev: "KY",
    parentState: "Kentucky",
    capital: "Frankfort",
    lat: 38.19507,
    lon: -84.878694,
    population: 25527,
    z: 25527
  },
  {
    abbrev: "LA",
    parentState: "Louisiana",
    capital: "Baton Rouge",
    lat: 30.443345,
    lon: -91.186994,
    population: 229493,
    z: 229493
  },
  {
    abbrev: "ME",
    parentState: "Maine",
    capital: "Augusta",
    lat: 44.318036,
    lon: -69.776218,
    population: 19136,
    z: 19136
  },
  {
    abbrev: "MD",
    parentState: "Maryland",
    capital: "Annapolis",
    lat: 38.9767,
    lon: -76.489934,
    population: 38394,
    z: 38394
  },
  {
    abbrev: "MA",
    parentState: "Massachusetts",
    capital: "Boston",
    lat: 42.358635,
    lon: -71.056699,
    population: 617594,
    z: 617594
  },
  {
    abbrev: "MI",
    parentState: "Michigan",
    capital: "Lansing",
    lat: 42.73194,
    lon: -84.552249,
    population: 114297,
    z: 114297
  },
  {
    abbrev: "MN",
    parentState: "Minnesota",
    capital: "Saint Paul",
    lat: 44.943829,
    lon: -93.093326,
    population: 285068,
    z: 285068
  },
  {
    abbrev: "MS",
    parentState: "Mississippi",
    capital: "Jackson",
    lat: 32.29869,
    lon: -90.180489,
    population: 173514,
    z: 173514
  },
  {
    abbrev: "MO",
    parentState: "Missouri",
    capital: "Jefferson City",
    lat: 38.577515,
    lon: -92.177839,
    population: 43079,
    z: 43079
  },
  {
    abbrev: "MT",
    parentState: "Montana",
    capital: "Helana",
    lat: 46.58976,
    lon: -112.021202,
    population: 28190,
    z: 28190
  },
  {
    abbrev: "NE",
    parentState: "Nebraska",
    capital: "Lincoln",
    lat: 40.81362,
    lon: -96.707739,
    population: 258379,
    z: 258379
  },
  {
    abbrev: "NV",
    parentState: "Nevada",
    capital: "Carson City",
    lat: 39.164885,
    lon: -119.766999,
    population: 55274,
    z: 55274
  },
  {
    abbrev: "NH",
    parentState: "New Hampshire",
    capital: "Concord",
    lat: 43.20725,
    lon: -71.536604,
    population: 42695,
    z: 42695
  },
  {
    abbrev: "NJ",
    parentState: "New Jersey",
    capital: "Trenton",
    lat: 40.217875,
    lon: -74.759404,
    population: 84913,
    z: 84913
  },
  {
    abbrev: "NM",
    parentState: "New Mexico",
    capital: "Santa Fe",
    lat: 35.691543,
    lon: -105.937406,
    population: 67947,
    z: 67947
  },
  {
    abbrev: "NY",
    parentState: "New York",
    capital: "Albany",
    lat: 42.651445,
    lon: -73.755254,
    population: 97856,
    z: 97856
  },
  {
    abbrev: "NC",
    parentState: "North Carolina",
    capital: "Raleigh",
    lat: 35.78551,
    lon: -78.642669,
    population: 403892,
    z: 403892
  },
  {
    abbrev: "ND",
    parentState: "North Dakota",
    capital: "Bismarck",
    lat: 46.805372,
    lon: -100.779334,
    population: 61272,
    z: 61272
  },
  {
    abbrev: "OH",
    parentState: "Ohio",
    capital: "Columbus",
    lat: 39.96196,
    lon: -83.002984,
    population: 787033,
    z: 787033
  },
  {
    abbrev: "OK",
    parentState: "Oklahoma",
    capital: "Oklahoma City",
    lat: 35.472015,
    lon: -97.520354,
    population: 579999,
    z: 579999
  },
  {
    abbrev: "OR",
    parentState: "Oregon",
    capital: "Salem",
    lat: 44.93326,
    lon: -123.043814,
    population: 154637,
    z: 154637
  },
  {
    abbrev: "PA",
    parentState: "Pennsylvania",
    capital: "Harrisburg",
    lat: 40.259865,
    lon: -76.88223,
    population: 49528,
    z: 49528
  },
  {
    abbrev: "RI",
    parentState: "Rhode Island",
    capital: "Providence",
    lat: 41.823875,
    lon: -71.411994,
    population: 178042,
    z: 178042
  },
  {
    abbrev: "SC",
    parentState: "South Carolina",
    capital: "Columbia",
    lat: 33.99855,
    lon: -81.045249,
    population: 129272,
    z: 129272
  },
  {
    abbrev: "SD",
    parentState: "South Dakota",
    capital: "Pierre",
    lat: 44.368924,
    lon: -100.350158,
    population: 13646,
    z: 13646
  },
  {
    abbrev: "TN",
    parentState: "Tennessee",
    capital: "Nashville",
    lat: 36.167783,
    lon: -86.778365,
    population: 601222,
    z: 601222
  },
  {
    abbrev: "TX",
    parentState: "Texas",
    capital: "Austin",
    lat: 30.267605,
    lon: -97.742984,
    population: 790390,
    z: 790390
  },
  {
    abbrev: "UT",
    parentState: "Utah",
    capital: "Salt Lake City",
    lat: 40.759505,
    lon: -111.888229,
    population: 186440,
    z: 186440
  },
  {
    abbrev: "VT",
    parentState: "Vermont",
    capital: "Montpelier",
    lat: 44.260299,
    lon: -72.576264,
    population: 7855,
    z: 7855
  },
  {
    abbrev: "VA",
    parentState: "Virginia",
    capital: "Richmond",
    lat: 37.5407,
    lon: -77.433654,
    population: 204214,
    z: 204214
  },
  {
    abbrev: "WA",
    parentState: "Washington",
    capital: "Olympia",
    lat: 47.039231,
    lon: -122.891366,
    population: 46478,
    z: 46478
  },
  {
    abbrev: "WV",
    parentState: "West Virginia",
    capital: "Charleston",
    lat: 38.350195,
    lon: -81.638989,
    population: 51400,
    z: 51400
  },
  {
    abbrev: "WI",
    parentState: "Wisconsin",
    capital: "Madison",
    lat: 43.07295,
    lon: -89.386694,
    population: 233209,
    z: 233209
  },
  {
    abbrev: "WY",
    parentState: "Wyoming",
    capital: "Cheyenne",
    lat: 41.134815,
    lon: -104.821544,
    population: 59466,
    z: 59466
  }
];

export default usaBubbleData;

and I don't know what's wrong with the code.

enter image description here

Shinji035
  • 331
  • 2
  • 6
  • 17

1 Answers1

1

So there are a couple of things to note here:

(1) If you must include Highcharts via a CDN (not recommended), the CDN script tags from Highchart MUST come BEFORE you load your application. That makes sure that the Highcharts global variable will be set before your application tries to render. Again, it is critical that the javascript from the CDN is both parsed and loaded before your application javascript. Please use the MDN docs for a reference on how to control the order of loading.

Note you can also alter your application code to defer execution until the page has fully loaded. These highchart docs have an example of that.

(2) From there, assuming you have highcharts-react included in your application, you can pass the Highcharts global variable directly into the HighchartsReact component as a prop. See the options for more details.

Jclangst
  • 1,274
  • 7
  • 11
  • yes, I have using highcharts-react in my application. and I tried to change some options , but it doesn't work . I think the problem is the map config , I want use a USA map . but I don't know where to get it. ( the demo is using a Norway's map, I think it loaded it from a mapdata.js , i checked it , and it only contains Norway map data. – Shinji035 May 05 '19 at 15:10
  • The map data is separate from the library logic. If you want additional maps, I'd check out: http://code.highcharts.com/mapdata/ – Jclangst May 05 '19 at 15:17
  • thanks for helping , now I can display the right map on the browser. but the blue bubble didn't appear. I updated my question , would you please check it again? – Shinji035 May 05 '19 at 16:16
  • @Shinji035 typically if the original question was answered, it is best to close it (so it is saved for posterity) and open a new question as a follow-up. I'd be happy to take a look at the new question if you link it here though. – Jclangst May 05 '19 at 16:23
  • ok , I have create a new question here: [https://stackoverflow.com/questions/55998320/how-to-draw-points-with-highcharts-react] can you take a look for it ? – Shinji035 May 06 '19 at 03:07
  • I took a look. Unfortunately, the internals of highcharts and highcharts-react are outside of my expertise. That being said, you may benefit from more synchronous feedback than stackoverflow can provide. You might check to see if there are any gitters or other chat rooms associated with highcharts where you can solicit help. – Jclangst May 06 '19 at 03:33