I am using "@react-jvectormap/core in nextjs project. Map Label is not visible

78 views Asked by At

I want to add world map in nextjs project. I am using latest reactjvectormap/core library. Map is rendering correctly with markers point but country label is not visible on the map. I can't to figure out show map label. I am also import worldMill

import { VectorMap } from "@react-jvectormap/core"; import { worldMill } from "@react-jvectormap/world";

<VectorMap
      map={worldMill}
      backgroundColor="transparent"
      regionStyle={{
        initial: {
          fill: "#cbd5e1",
          "fill-opacity": 1,
          stroke: "none",
          "stroke-width": 0,
          "stroke-opacity": 1,
        },
        hover: {
          "fill-opacity": 0.8,
          cursor: "pointer",
        },
        selected: {
          fill: "yellow",
        },
        selectedHover: {},
      }}
      markers={[
        { latLng: [37.2580397, -104.657039], name: "United States" },
        { latLng: [20.7504374, 73.7276105], name: "India" },
        { latLng: [53.613, -11.6368], name: "United Kingdom" },
        { latLng: [-25.0304388, 115.2092761], name: "Sweden" },
      ]}
      markerStyle={{
        initial: {
          fill: "#624bff",
          stroke: "#624bff",
          "fill-opacity": 1,
          "stroke-width": 2,
          "stroke-opacity": 0.5,
          r: 5,
        },
        selected: {
          fill: "blue",
        },
      }}
      labels={{
        markers: {
          render: (e) => {
           return e.name
          },
        },
      }}
      regionLabelStyle={{
        initial: {
          fontFamily: "Inter",
          fontSize: 13,
          fontWeight: 500,
          cursor: "default",
          fill: ["#161C24"],
        },
      }}
    />
0

There are 0 answers