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.
