kadoshms / react-jvectormap

A react wrapper for jvectormap maps
MIT License
98 stars 70 forks source link

Is it possible to change countries labels to another languages or custom text? #119

Closed AndresSGalvezA closed 2 years ago

AndresSGalvezA commented 2 years ago

I just want to change the label that map displays when I hover on any country. Maybe change the language like "Brazil" to "Brasil" or change this text to a custom one. Is it possible?

kadoshms commented 2 years ago

Yes, a few ways to achieve that.

One way would be to use the onRegionTipShow prop:

function translate() {
 ....
}

onRegionTipShow: (e, el, code) => {
  el.html(translate(code));
},

Another way would be to create your own custom map, which is basically a simple JSON file that you can alter and load as you wish. You can also patch the specific paths you wish:

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

const customMap = {
  ...worldMill,
  content: {
    ...worldMill.content,
    paths: {
      ...worldMill.content.paths,
      BR: {
        ...worldMill.content.paths.BR,
        name: "Brasil",
      },
    },
  },
};