ratneshwar.pal
Posts: 2
Joined: Thu Apr 28, 2022 5:54 am

Plot US map based on 'zipcode'

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
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Plot US map based on 'zipcode'

Hello,

Welcome to our forum and thanks for contacting us with your question!

All available maps and their variants offered by Highcharts are available at this link: https://code.highcharts.com/mapdata/

If you want to use zip codes, you can modify the map you are using.

Let me know if you have any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
ratneshwar.pal
Posts: 2
Joined: Thu Apr 28, 2022 5:54 am

Re: Plot US map based on 'zipcode'

Hi,


I tried exploring various collection, but did not found any collection which is providing "zip codes" into properties object. Can you please help me in finding one.
Our basic requirement is to plot points on US map based on "zip codes" as mentioned in below image

download/file.php?mode=view&id=10481


Thanks
Attachments
Screenshot 2022-04-28 at 4.50.44 PM.png
Screenshot 2022-04-28 at 4.50.44 PM.png (130.68 KiB) Viewed 1474 times
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Plot US map based on 'zipcode'

Hello,

At the moment, none of the maps contains zipcodes, but you can add them to the map object and then operate on them.
Demo: https://codesandbox.io/s/highcharts-rea ... le=/map.js

Feel free to ask any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/

Return to “Highcharts Maps”