Nextjs React Jvectormap
-Pro Component
A simple wrapper for jvectormap
Style
You will find the styles for this component in
assets/scss/nextjs-material-dashboard-pro/plugins/_plugin-react-jvectormap.scss
.
Example
import React from 'react';
// react plugin for creating vector maps
import { VectorMap } from "react-jvectormap";
var mapData = {
AU: 760,
BR: 550,
CA: 120,
DE: 1300,
FR: 540,
GB: 690,
GE: 200,
IN: 200,
RO: 600,
RU: 300,
US: 2920
};
const regionStyle = {
initial: {
fill: "#e4e4e4",
"fill-opacity": 0.9,
stroke: "none",
"stroke-width": 0,
"stroke-opacity": 0
}
};
const series = {
regions: [
{
values: mapData,
scale: ["#AAAAAA", "#444444"],
normalizeFunction: "polynomial"
}
]
}
const containerStyle = {
width: "100%",
height: "420px"
};
export default function VectorMaps(){
return (
<VectorMap
map={"world_mill"}
backgroundColor="transparent"
zoomOnScroll={false}
containerStyle={containerStyle}
containerClassName="map"
regionStyle={regionStyle}
series={series}
/>
);
}
Props
If you want to see more examples and properties please check the official jvectormap Documentation.
You can also check the Official React-Jvectormap Github Repository for more tips and tricks.