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.