Shinji035
Reputation: 361
How to use highmaps in react?
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.
Upvotes: 0
Views: 1643
Answers (1)
Jclangst
Reputation: 1342
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.
Upvotes: 1
Related Questions
- react: show a Highcharts map with geo points
- HighChart graphics with node js and react js
- Highmaps caribbean map
- Highcharts custom data for map in React TypeScript?
- Highcharts Map with React TypeScript
- How to use this highchart map in reactJS
- Integrate Highcharts maps with react component
- React HighChart Example
- Highmaps in Typescript: Maps not being dipslayed
- How to create a HighCharts chart in react