How do I translate Country name pop-up to other language in jVectorMap - React

Question

I have been looking for the answer for a long time but couldn't find any solution. Let's say my website's default language setting is English and when a user hovers over the Map it shows the country's name. I would like to make it when the user changes the website language to french and hovers over the Map the country name shows in the French language, Is there any way to do it?

Code is below

<VectorMap
  map={'world_mill'}
  series={{
    regions: [
      {
        values: upcaseKeys(totalVisitors),
        scale: ['#C8EEFF', '#0071A4'],
        normalizeFunction: 'polynomial',
      },
    ],
  }}
  selectedRegion={[]}
  showTooltip={true}
/>

so when I change the website from English to French the word China should be shown in French.

Answer 1

You can do that by using onRegionTipShow method which is provided in <VectorMap />. Just simply create a function which will take the name of country by:

const translateCountryName = (e, el) => {
    const countryName = el.html();
    el.html(t(`country:${countryName}`));
  };

Where t('country:${countryName}') is NextJS i18n/Internationalization

Now you can use this function in your VectorMap component:

  <VectorMap
                  map={'world_mill'}
                  series={{
                    regions: [
                      {
                        values: upcaseKeys(totalVisitors),
                        scale: ['#C8EEFF', '#0071A4'],
                        normalizeFunction: 'polynomial',
                      },
                    ],
                  }}
                  selectedRegion={[]}
                  showTooltip={true}

                  //ur function is below
                  onRegionTipShow={translateCountryName}
                />