Self is not defined

[charbel911]

i have a next js project when i download it it gives me Self is not defined any solution???

[averaw]

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>

)
}

[berk9595]

Working Answer:

1. step => install libraries
   '@react-jvectormap/world' and '@react-jvectormap/core'

2. 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;

3. step Thats it!