Hi,
I am looking to plot some stores over US map, we have 'zipcode' into store address e.g. "19803", "19702", "85295", "94523", "90503", "33411" etc.
But I am a bit confused with the collection as non of then are supporting 'zipcode' as far I have explored. Please help me to find one.
Below is the code that is currently I have based on state code
import React from "react";
import Highcharts from "highcharts";
import HighchartsMap from "highcharts/modules/map";
import HighchartsReact from "highcharts-react-official";
import map from "@highcharts/map-collection/countries/us/us-all.geo.json";
HighchartsMap(Highcharts);
class Map extends React.Component {
constructor(props) {
super(props);
this.state = {
options: {
chart: {
borderWidth: 1,
map: map
},
title: {
text: "Map View"
},
legend: {
enabled: false
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: "bottom"
}
},
series: [
{
name: "Countries",
color: "#E0E0E0",
enableMouseTracking: true
},
{
type: "mapbubble",
name: "Store",
data: this.props.data,
joinBy: ["hc-a2", "code"],
minSize: 4,
maxSize: "4%",
color: 'green',
tooltip: {
pointFormat: `Store Name: {point.store}<br /> Type of store: {point.type}`
},
dataLabels: {
enabled: false
}
}
]
},
};
}
render() {
return (
<HighchartsReact
highcharts={Highcharts}
options={this.state.options}
constructorType={'mapChart'}
/>
);
}
}
export default Map;
Thanks