Open charbel911 opened 6 months ago
Hi!
add any style to the map
"use client" import React from "react" import { worldMill } from "@react-jvectormap/world" import dynamic from "next/dynamic"
import style from "./Maps.module.scss"
const VectorMap = dynamic( () => import("@react-jvectormap/core").then((m) => m.VectorMap), { ssr: false } )
export const Jmap = ({ series }: any) => { return (
<div className={style.containerMap}> wrap the map in style
<VectorMap map={worldMill} series={series} />
</div>
) }
Working Answer:
step => install libraries '@react-jvectormap/world' and '@react-jvectormap/core'
step create component
DONT FORGET import worldMill like this import worldMill from '@react-jvectormap/world/worldMill.json';
import worldMill from '@react-jvectormap/world/worldMill.json';
import { Container, Grid } from '@mui/material';
import dynamic from 'next/dynamic';
const VectorMap = dynamic(
() => import("@react-jvectormap/core").then((m) => m.VectorMap),
{ ssr: false }
)
// Define the type for the onRegionTipShow function
type OnRegionTipShow = (
e: Event,
el: any,
code: string
) => void;
type OnRegionClick = (
e: Event,
code: string
) => void;
interface WorldMapProps { }
const WorldMap: React.FC<WorldMapProps> = () => {
const mapData: { [key: string]: number } = {
TR: 1000,
GL: 500,
};
const handleRegionTipShow: OnRegionTipShow = (e, el, code) => {
console.log('code', code)
if (mapData[code]) {
el.html(`${el.html()}: ${mapData[code]}`);
}
};
const handleRegionClick: OnRegionClick = (e, code) => {
alert(`Clicked region: ${code}`);
// You can add additional logic here, such as navigating to a detailed view
};
return (
<Grid container>
<Container sx={{ py: { sm: 8, xs: 4 } }}>
<div style={{ width: '100%', height: '500px' }}>
<VectorMap
map={worldMill}
backgroundColor="white"
zoomOnScroll={false}
series={{
regions: [
{
attribute: 'fill',
values: mapData,
scale: ["#FF0000", "#0000FF"],
normalizeFunction: 'polynomial',
},
],
}}
onRegionTipShow={handleRegionTipShow}
onRegionClick={handleRegionClick}
/>
</div>
</Container>
</Grid>
);
};
export default WorldMap;
i have a next js project when i download it it gives me Self is not defined any solution???