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"],
},
}}
/>