yanivam/react-svg-worldmap

A simple, compact and free React SVG world map.

react-svg-worldmap

A simple, compact and free React SVG world map.

Documentation & Examples

We use GitHub pages to provide documentation with ample of live examples.

Give it a try at yanivam.github.io/react-svg-worldmap.

Why is it different?

Focus on simple and free.

• Draw countries on a world map.
• Free - Really free with no limits.
• No registration - It is just a pure react component.
• No internet dependency - All the data is local, no calls to a back-end server.
• Easy to learn, easy to use, easy to customize.

Yet another package for world map...but why?

It all started with a fun project that I was building and needed to draw simple yet beautiful world's map. Searching for solutions I found many potential solutions like MapBox and Google Maps, but they were "too smart" for what I needed. They needed to "call home" for the data, they supported tons of options I didn't need, and while they included react-integrations, they were not completely native to the react world. There was definitely something missing. And that's when react-svg-worldmap started.

Install

In order to install, run the following command:

$ npm install react-svg-worldmap --save

Usage

Here is a simple example:

import * as React from "react";
import WorldMap from "react-svg-worldmap";
import "./App.css";

function App() {
  const data = [
    { country: "cn", value: 1389618778 }, // china
    { country: "in", value: 1311559204 }, // india
    { country: "us", value: 331883986 }, // united states
    { country: "id", value: 264935824 }, // indonesia
    { country: "pk", value: 210797836 }, // pakistan
    { country: "br", value: 210301591 }, // brazil
    { country: "ng", value: 208679114 }, // nigeria
    { country: "bd", value: 161062905 }, // bangladesh
    { country: "ru", value: 141944641 }, // russia
    { country: "mx", value: 127318112 }, // mexico
  ];

  return (
    <div className="App">
      <WorldMap
        color="red"
        title="Top 10 Populous Countries"
        value-suffix="people"
        size="lg"
        data={data}
      />
    </div>
  );
}

License

MIT

react-svg-worldmap's Issues

A piece of Somalia is missing

Sry to bother you again, but unfortunately there seems to be a part of Somalia missing in the geo data.
(white area is missing)

[BUG] Statistics map labels do not fit in boxes for RTL languages

Describe the bug
Statistics map labels do not fit in boxes for RTL languages

To Reproduce Steps to reproduce the behavior:

1. Go to Flathub beta - this is RTL language version of statistics map.
2. Hover over countries.
3. See error: labels do not fit in the boxes.

Expected behavior
Labels always fit in the boxes regardless of language selected.

Screenshots

Desktop (please complete the following information):
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:100.0) Gecko/20100101 Firefox/100.0

[BUG] Ukraine does not include Crimea

Crimea is recognised internationally as part of Ukraine. This map includes it as part of Russia.

Could this be fixed, and/or at least an alternative countries.geo.ts provided showing the correct boundaries?

[BUG] Can't use worldmap on yarn + vite + react

Hi, I tried to use this lib with vite + react installing with

yarn add react-svg-worldmap

Install output:

% yarn add react-svg-worldmap
yarn add v1.22.19
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 6 new dependencies.
info Direct dependencies
└─ [email protected]
info All dependencies
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]
✨  Done in 5.10s.

Then I wrote the component:

import WorldMap from "react-svg-worldmap"

export const GeoMap = (props) => {
  return (
    <div>
      <WorldMap color="green" title="This is My Map" size="lg" data={data} />
    </div>
  )
}

And when trying to run the vite app with yarn run dev I get the following output:

/usr/local/bin/yarn run dev
yarn run v1.22.19
$ vite

  vite v2.9.14 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 380ms.

10:08:04 AM [vite] hmr update /src/components/product_research_report/geomap/GeoMap.jsx
hmr update /src/load_tailwind.css
✘ [ERROR] [plugin vite:dep-pre-bundle] Failed to resolve entry for package "react-path-tooltip". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "react-path-tooltip". The package may have incorrect main/module/exports specified in its package.json.

    node_modules/vite/dist/node/chunks/dep-c9998dc6.js:40970:10:
      40970 │     throw new Error(`Failed to resolve entry for package "${id}". ` +
            ╵           ^

    at packageEntryFailure (/Users/user/dev/project/project_front/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:40970:11)
    at resolvePackageEntry (/Users/user/dev/project/project_front/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:40966:9)
    at tryNodeResolve (/Users/user/dev/project/project_front/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:40773:20)
    at Context.resolveId (/Users/user/dev/project/project_front/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:40581:28)
    at Object.resolveId (/Users/user/dev/project/project_front/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:39254:55)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async /Users/user/dev/project/project_front/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:61577:27
    at async /Users/user/dev/project/project_front/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:38771:34
    at async callback (/Users/user/dev/project/project_front/node_modules/esbuild/lib/main.js:921:28)
    at async handleRequest (/Users/user/dev/project/project_front/node_modules/esbuild/lib/main.js:701:30)

  This error came from the "onResolve" callback registered here:

    node_modules/vite/dist/node/chunks/dep-c9998dc6.js:38750:18:
      38750 │             build.onResolve({ filter: /^[\w@][^:]/ }, async ({ path: id, importer, kind }) => {
            ╵                   ~~~~~~~~~

    at setup (/Users/user/dev/project/project_front/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:38750:19)
    at handlePlugins (/Users/user/dev/project/project_front/node_modules/esbuild/lib/main.js:843:23)
    at Object.buildOrServe (/Users/user/dev/project/project_front/node_modules/esbuild/lib/main.js:1137:7)
    at /Users/user/dev/project/project_front/node_modules/esbuild/lib/main.js:2085:17
    at new Promise (<anonymous>)
    at Object.build (/Users/user/dev/project/project_front/node_modules/esbuild/lib/main.js:2084:14)
    at Object.build (/Users/user/dev/project/project_front/node_modules/esbuild/lib/main.js:1931:51)
    at runOptimizeDeps (/Users/user/dev/project/project_front/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:39994:34)
    at async runOptimizer (/Users/user/dev/project/project_front/node_modules/vite/dist/node/chunks/dep-c9998dc6.js:50523:38)

  The plugin "vite:dep-pre-bundle" was triggered by this import

    node_modules/react-svg-worldmap/dist/draw.js:5:37:
      5 │ const react_path_tooltip_1 = require("react-path-tooltip");
        ╵                                      ~~~~~~~~~~~~~~~~~~~~

10:08:05 AM [vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/vite/dist/node/chunks/dep-c9998dc6.js:40970:10: ERROR: [plugin: vite:dep-pre-bundle] Failed to resolve entry for package "react-path-tooltip". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "react-path-tooltip". The package may have incorrect main/module/exports specified in its package.json.
    at failureErrorWithLog (/Users/user/dev/project/project_front/node_modules/esbuild/lib/main.js:1605:15)
    at /Users/user/dev/project/project_front/node_modules/esbuild/lib/main.js:1251:28
    at runOnEndCallbacks (/Users/user/dev/project/project_front/node_modules/esbuild/lib/main.js:1034:63)
    at buildResponseToResult (/Users/user/dev/project/project_front/node_modules/esbuild/lib/main.js:1249:7)
    at /Users/user/dev/project/project_front/node_modules/esbuild/lib/main.js:1358:14
    at /Users/user/dev/project/project_front/node_modules/esbuild/lib/main.js:666:9
    at handleIncomingPacket (/Users/user/dev/project/project_front/node_modules/esbuild/lib/main.js:763:9)
    at Socket.readFromStdout (/Users/user/dev/project/project_front/node_modules/esbuild/lib/main.js:632:7)
    at Socket.emit (node:events:513:28)
    at addChunk (node:internal/streams/readable:324:12)
Vite Error, /node_modules/.vite/deps/react-svg-worldmap.js?v=39e95932 optimized info should be defined
Vite Error, /node_modules/.vite/deps/react-svg-worldmap.js?v=39e95932 optimized info should be defined (x2)
Vite Error, /node_modules/.vite/deps/react-svg-worldmap.js?v=39e95932 optimized info should be defined (x3)

[BUG] Cannot read properties of undefined (reading 'forwardRef')

Hello. When creating a simple example I get an error:

react.development.js:1282 Uncaught TypeError: Cannot read properties of undefined (reading 'forwardRef')
at ./node_modules/react-svg-worldmap/dist/components/Region.js (Region.js:41:1)
at options.factory (react refresh:6:1)
at webpack_require (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./node_modules/react-svg-worldmap/dist/index.js (index.js:22:1)
at options.factory (react refresh:6:1)
at webpack_require (bootstrap:24:1)
at fn (hot module replacement:62:1)
at ./src/views/statistics/Map.jsx (src_views_statistics_Statistic_js.chunk.js:15:76)
at options.factory (react refresh:6:1)

can you help me?

[BUG] The dist folder misses index.js file

When trying to import import { WorldMap } from 'react-svg-worldmap' inside of a non-typescript project, the bundler fails, because the dist folder inside the npm package does not have an index.js file included.

To Reproduce
Steps to reproduce the behavior:

1. install the module inside a non-typescript project
2. try to transpile the code.
3. the bundler should moan on you because it can't resolve the module.

Kindly add all remaining countries to countries.geo.js

Hi,
Kindly add all remaining countries to countries.geo.js and update this file. Also Geo Polygon coordinates showing wrong for India Map.
Kindly Refer for correct India Map https://www.mapmyindia.com/api/advanced-maps/WebSDK-LiveDemo/mapmyindia_addgeojson_polygon.

I want updated countries.geo.js.

Kindly do he needful

This repo doesn't follow the monorepo pattern well although I can tell that you are trying to make one, I can help you establish a real monorepo;

[BUG] Failed to parse source map

Getting warning while compiling the react application

Install "react-svg-worldmap": "^2.0.0-alpha.16" version of react-svg-worldmap and when you compile the application, it will throw around 9 warning messages.

Expected behavior Dependency should be installed without any warning using the yarn package manager.

Desktop (please complete the following information):

• OS: Mac
• Browser Chrome
• yarn version 3.2.2
• node v20

List of warnings
Failed to parse source map from '/Users/fazeelqureshi/gitlab/pgp-ui/node_modules/react-svg-worldmap/src/components/Frame.tsx' file: Error: ENOENT: no such file or directory, open '/Users/fazeelqureshi/gitlab/pgp-ui/node_modules/react-svg-worldmap/src/components/Frame.tsx'

Failed to parse source map from '/Users/fazeelqureshi/gitlab/pgp-ui/node_modules/react-svg-worldmap/src/components/Region.tsx' file: Error: ENOENT: no such file or directory, open '/Users/fazeelqureshi/gitlab/pgp-ui/node_modules/react-svg-worldmap/src/components/Region.tsx'

Failed to parse source map from '/Users/fazeelqureshi/gitlab/pgp-ui/node_modules/react-svg-worldmap/src/components/TextLabel.tsx' file: Error: ENOENT: no such file or directory, open '/Users/fazeelqureshi/gitlab/pgp-ui/node_modules/react-svg-worldmap/src/components/TextLabel.tsx'

Failed to parse source map from '/Users/fazeelqureshi/gitlab/pgp-ui/node_modules/react-svg-worldmap/src/constants.ts' file: Error: ENOENT: no such file or directory, open '/Users/fazeelqureshi/gitlab/pgp-ui/node_modules/react-svg-worldmap/src/constants.ts'

Failed to parse source map from '/Users/fazeelqureshi/gitlab/pgp-ui/node_modules/react-svg-worldmap/src/countries.geo.ts' file: Error: ENOENT: no such file or directory, open '/Users/fazeelqureshi/gitlab/pgp-ui/node_modules/react-svg-worldmap/src/countries.geo.ts'

Failed to parse source map from '/Users/fazeelqureshi/gitlab/pgp-ui/node_modules/react-svg-worldmap/src/draw.tsx' file: Error: ENOENT: no such file or directory, open '/Users/fazeelqureshi/gitlab/pgp-ui/node_modules/react-svg-worldmap/src/draw.tsx'

Failed to parse source map from '/Users/fazeelqureshi/gitlab/pgp-ui/node_modules/react-svg-worldmap/src/index.tsx' file: Error: ENOENT: no such file or directory, open '/Users/fazeelqureshi/gitlab/pgp-ui/node_modules/react-svg-worldmap/src/index.tsx'

Failed to parse source map from '/Users/fazeelqureshi/gitlab/pgp-ui/node_modules/react-svg-worldmap/src/utils.ts' file: Error: ENOENT: no such file or directory, open '/Users/fazeelqureshi/gitlab/pgp-ui/node_modules/react-svg-worldmap/src/utils.ts'

[ENHANCEMENT] Setting our own sizes

Hey there. In the size prop, We would love it if we could define or pass in our own preferred size! like size="420".

Love the Work ❤

[BUG] no country color when all countries have the same value

When all the countries have the same value, the world map is blank
it seems that you need to have a "minimum" value with at least 1 country at first render

How to reproduce:

import { WorldMap } from "react-svg-worldmap";
import React, { Component } from 'react';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: []
    }
  }

  addCountry(code) {
    const { data } = this.state;
    this.setState({
      data: [
        ...data,
        { country: code, value: 1 }
      ]
    })
  }

  render() {
    return (
      <div className="App">
        <WorldMap
          color="red"
          title="Top 10 Populous Countries"
          value-suffix="people"
          size="lg"
          data={this.state.data}
          onClickFunction={(country) => { this.addCountry(country.countryCode) }}
        />
      </div>
    );
  }
}

now, click a country. it will be white, instead of red, this error will be displayed:

Warning: `NaN` is an invalid value for the `fillOpacity` css style property.
path
Region@http://localhost:3000/static/js/bundle.js:39998:7
g
svg
figure
WorldMap@http://localhost:3000/static/js/bundle.js:40921:7
div
App@http://localhost:3000/main.68d55a7b532f973d3b34.hot-update.js:27:5

to solve it, you can simply add a country like: {country: '', value: 0}

[BUG] useLayoutEffect does nothing on the server

Describe the bug I'm getting a warning about the usage of useLayoutEffect

To Reproduce Steps to reproduce the behavior:

1. Clone https://github.com/flathub/frontend
2. Copy the production config from .env.production to .env.development
3. Run yarn then yarn dev
4. Goto http://localhost:3000/statistics
5. There should be an error in the terminal:

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.
    at WorldMap (/home/razze/dev/frontend/node_modules/react-svg-worldmap/dist/index.js:16:13)
    at div
    at div
    at main
    at div
    at Main (webpack-internal:///./src/components/layout/Main.tsx:21:17)
    at Statistics (webpack-internal:///./pages/statistics.tsx:44:23)
    at UserInfoProvider (webpack-internal:///./src/context/user-info.tsx:24:29)
    at exports.ThemeProvider (/home/razze/dev/frontend/node_modules/next-themes/dist/index.js:1:1798)
    at MatomoProvider (/home/razze/dev/frontend/node_modules/@datapunt/matomo-tracker-react/lib/MatomoProvider.js:9:23)
    at App (webpack-internal:///./pages/_app.tsx:41:16)
    at I18nextProvider (/home/razze/dev/frontend/node_modules/react-i18next/dist/commonjs/I18nextProvider.js:13:19)
    at AppWithTranslation (/home/razze/dev/frontend/node_modules/next-i18next/dist/commonjs/appWithTranslation.js:91:22)
    at StyleRegistry (/home/razze/dev/frontend/node_modules/styled-jsx/dist/index/index.js:671:34)
    at AppContainer (/home/razze/dev/frontend/node_modules/next/dist/server/render.js:415:29)
    at AppContainerWithIsomorphicFiberStructure (/home/razze/dev/frontend/node_modules/next/dist/server/render.js:447:57)
    at div
    at Body (/home/razze/dev/frontend/node_modules/next/dist/server/render.js:715:21)

Expected behavior
No warning should happen

Desktop (please complete the following information):

• OS: Fedora 35
• Browser Firefox
• Version 98

[ENHANCEMENT] Convert your data into react-svg-worldmap supported JSON

Problem:
It is mostly the case that the data user have, has country names and values for the respective country. But react-svg-worldmap requires country name in short-name.
It could be a tedious and lengthy process to map them manually.
I'd propose somewhat automation for it - which can automate the country names to short-names (as per this library)

Map projection - Kamchatka Peninsula is cut out

Hi, is there a rationale why a fraction of Kamchatka Peninsula in Russia is cut out and rendered close to Alaska? Can this be re-arranged?
Thanks!

[BUG] Responsive size calculation is buggy

Describe the bug

It seems like the responsive size calculation doesn't run in some cases/stops at some sizes.

To Reproduce

1. Go to https://yanivam.github.io/react-svg-worldmap/examples/text-labels/
2. Change the width of your browser window (both up/down)

Expected behavior
It should not jump in sizes, but smoothly grow/shrink with the window.

It also seems to only start to calculate at some specific sizes, so if your with is too much, it never calculates the size it should be at?

And it breaks when it gets really small (which probably isn't unexpected, but I would have hoped for a smaller size)

Desktop (please complete the following information):

• OS: Fedora 38
• Browser: Tested chromium and firefox

Hong Kong and Singapore are unreachable

Although the codes for Hong Kong ("hk") and Singapore ("sg") are sent, they do not appear on the map. Is this a bug?

[BUG] Russia is selected twice

Describe the bug
Russia is counted as two countries, as evidenced by
.

To Reproduce
Steps to reproduce the behavior:

1. Add const data = [{ country: "ru", value: 141944641 }] to data used for the map.
2. Notice how Russia counts as two countries.

Expected behavior
Russia should only be one country when it is hovered over.

[BUG] double click to zoom trigger the onclick event

Hi
when you enable richinteraction, and then double click somewhere to zoom, it will trigger the onclick if you double clicked on a country
double click should not trigger the onclick event

You forggot to add Andorra

Hi there, This country doesn´t appear in the list of countries. the iso code is AD

Better control of color gradient

On line 122 in your file:

react-svg-worldmap/src/WorldMap.tsx

Line 122 in df49141

opacityLevel += 0.2 + (0.6 * (countryValueMap[isoCode] - min) / (max - min))

You have 0.2 and 0.6 as constants for opacity, would it be posible to add controls over these numbers or even better an optional function to map colors and opacities, im finding the floor causes missleading color values with countries with a value of 0 still showing some color.

Attached is the same data plotted with matplotlib using a perceptualy uniform color scale.
matplot lib color scales

Cannot find module 'react-path-tooltip' from '.../react-svg-worldmap/dist/WorldMap.js'

Hi, we are having problems using the WorldMap in our test-suite. We are using the WorldMap in our StoryBook which is working great without any problems, but when we start a test-run the package has problems to load or find the module called 'react-path-tooltip'.

• "@testing-library/jest-dom": "^5.11.4"
• "react": "^17.0.1"
• "react-svg-worldmap": "^1.0.44"
• "@storybook/react": "^6.1.15"

This is our test:

import React from 'react'
import '@testing-library/jest-dom/extend-expect'
import { render, waitFor } from '@testing-library/react'
import { ThemeProvider } from 'styled-components'
import theme from '../../../../utils/theme'
import '../../../matchMedia.mock'
import { Default } from './MapChart.stories'

const renderComponent = ({ t }) =>
  render(
    <ThemeProvider theme={t}>
      <Default {...Default.args} />
    </ThemeProvider>
  )

test.skip('renders the MapChart in the primary state', async () => {
  // Render new instance in every test to prevent leaking state
  renderComponent({ t: theme })
  await waitFor(() => expect(document.getElementsByTagName('svg').length).toEqual(1))
})

here is the stacktrace from the test-run:

 FAIL  src/stories/components/atoms/MapChart/MapChart.test.js
  ● Test suite failed to run

    Cannot find module 'react-path-tooltip' from 'node_modules/react-svg-worldmap/dist/WorldMap.js'

    Require stack:
      node_modules/react-svg-worldmap/dist/WorldMap.js
      node_modules/react-svg-worldmap/dist/index.js
      src/components/atoms/MapChart/MapChart.js
      src/components/atoms/MapChart/index.js
      src/stories/components/atoms/MapChart/MapChart.stories.js
      src/stories/components/atoms/MapChart/MapChart.test.js

      at Resolver.resolveModule (node_modules/jest-runtime/node_modules/jest-resolve/build/index.js:306:11)
      at Object.<anonymous> (node_modules/react-svg-worldmap/dist/WorldMap.js:1:259)

Can't resolve d3-geo

Describe the bug
Module not found: Can't resolve 'd3-geo' in '...\node_modules\react-svg-worldmap\dist'

To Reproduce
Steps to reproduce the behavior:

1. npm i react-svg-worldmap
2. npm start or if not in scripts use react-scripts start
3. See error

Expected behavior
The module should be found and actually work.

Desktop (please complete the following information):

• OS: Win 10 Pro
• Browser: Google Chrome
• Version: 83

Color Prop not working as expected with false-y values

Describe the bug A clear and concise description of what the bug is.

The color prop does not activate with value=0. My guess is you are doing something like "if value, apply color" but it should probably be more like "if value !== undefined, apply color".

As a feature request, I would love it if you could also update value to be either number | string.

To Reproduce Steps to reproduce the behavior:

pretty straightforward, give any country a value of 0 and the color will not display.

Expected behavior A clear and concise description of what you expected to happen.

pretty straightforward, give any country a value of 0 and the color should display.
Give any country a value of undefined and the color should not display.
If you want to get fancy, it probably makes sense to have undefined | null not display the color.

[ENHANCEMENT] Zoom

Describe the solution you'd like
The world map is great, it would make for a better user interface if you could,

1. On a desktop, use mouse-wheel to zoom in/out on the map.
2. On a mobile, use double-click to zoom in on the map.

Have you ever thought about this, do you know how it could be done?

[ENHANCEMENT] Responsive Width

Is your feature request related to a problem? Please describe.
Currently width is set to a fixed amount (ie: sm, lg, xl, xxl). Another option to allow the svg to scale responsively to the width of the container would improve the UX compatibility for desktop/mobile screens.

Describe the solution you'd like
Add responsive option for size property to allow the svg to scale dynamically with the width of the container.

[BUG] problem with build next js app

Each time when I run 'next build' command I get this error:
Collecting page data ..Error [ERR_REQUIRE_ESM]: require() of ES Module node_modules/d3-geo/src/index.js from node_modules/react-svg-worldmap/dist/index.js not supported.
Instead change the require of node_modules/d3-geo/src/index.js in node_modules/react-svg-worldmap/dist/index.js to a dynamic import() which is available in all CommonJS modules.
This error exists in any Next js application, without any other dependencies except of default next js dependencies

Steps to reproduce the behavior:

1. npx create-next-app@latest
2. npm i react-svg-worldmap
3. In any file write this:
   import WorldMap from 'react-svg-worldmap'
   console.log(WorldMap)
4. npm run build

Expected behavior Building without problems

Desktop (please complete the following information):

• OS: MacOS 12.1
• Browser Chrome

The strange thing is that 'npm run dev' doesn't give any errors and you can use the package without any problems in the dev mode.

Remove console.log from source code

https://github.com/yanivam/react-svg-worldmap/blob/master/src/WorldMap.tsx#L105

[ENHANCEMENT] Add custom text labels to the map

Hey,

Can we modify other countries background color(not the entire map's background) apart from the one we are getting in data property. And is it possible to add name of the oceans in map.

Thanks.

[BUG] Did the latest alpha break?

Describe the bug A clear and concise description of what the bug is.

Build is failing with the newest alpha, worked fine with the one before

To Reproduce Steps to reproduce the behavior:

Check https://github.com/flathub/website/runs/5752086020?check_suite_focus=true
It's part of flathub-infra/website#84

Expected behavior A clear and concise description of what you expected to happen.

Should build fine

[ENHANCEMENT] Custom background color for non selected countries

Is there a possibility to make the color of non-selected countries available? For example, I want to make it gray(#E3E5E8).

[BUG] Strange tooltip behavior via using onClickFunction and tooltipTextFunction

Problem:
Using both onClickFunction and tooltipTextFunction, you can see some strange behavior of tooltip: sometimes it persists after hover ends, sometimes it displays in the wrong place, sometimes it acts onClick nor hover, etc. Removing any1 of these props solves problem.

How to inject HTML in tooltip

How to inject HTML in tooltip in react-svg-worldmap

[ENHANCEMENT]

Hello, Yams Dev

Big thanks for your project react-svg-worldmap, it's very helpfull for people.

I have a little problem when use react-svg-worldmap:

// react-svg-worldmap/lib/src/types.ts

export interface DataItem { country: ISOCode; value: number; }

If I want to use text to show it in tooltip,
and writed string in value parameters - logically got error.
example of my data = { country: 'ke', value: 'Water wells, Farms' },

if I change type of value to string - it's work
export interface DataItem { country: ISOCode; value: string; }

So, could u suggest me, please and tell how can I use string in value parameters?

I'm not strong developer, and my proposed solution maybe not good - I think will be good if you add third paramenter like
export interface DataItem { country: ISOCode; value: number; title: string; }

If this proposed solutions, or changing types is impossible - can I fork project, with string parameter?

Thank you, for your work.

yours respectfully Timures

[BUG] Doesn't work with Next.js

If I try and use this in a brand new Next.js (11) app, I get a rendering error:

Server Error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Steps to reproduce:

1. Create brand new Next.js app: npx create-next-app react-svg-worldmap-test
2. Install react-svg-worldmap
3. Add pages\map.js:

import WorldMap from 'react-svg-worldmap';

export default function Map() {
  const data = [
    { country: 'cn', value: 1389618778 }, // china
    { country: 'in', value: 1311559204 }, // india
    { country: 'us', value: 331883986 }, // united states
    { country: 'id', value: 264935824 }, // indonesia
    { country: 'pk', value: 210797836 }, // pakistan
    { country: 'br', value: 210301591 }, // brazil
    { country: 'ng', value: 208679114 }, // nigeria
    { country: 'bd', value: 161062905 }, // bangladesh
    { country: 'ru', value: 141944641 }, // russia
    { country: 'mx', value: 127318112 }, // mexico
  ];

  return (
    <div className='App'>
      <WorldMap
        color='red'
        title='Top 10 Populous Countries'
        value-suffix='people'
        size='lg'
        data={data}
      />
    </div>
  );
}

4. Start dev server and visit http://localhost:3000/map

Versions:

    "next": "11.1.2",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-svg-worldmap": "^1.1.0"

WorldMap component doesn't re-render and update the colored country

import { WorldMap } from 'react-svg-worldmap';

const Map = (props: any) => {
const { data, color } = props;

return (
<div>
<WorldMap
color={color}
title="Covid-19 Dataset"
valuePrefix="="
size="xxl"
data={data}
tooltipBgColor="black"
</div>
);
};

export default Map;

So I used a select input to change the data passed into it
data is an array of object [{country: {countryCode}, value: {value}}]
Whenever I change the data, it doesn't re-render and color the map;
PS: Data is visible but map doesn't have color anymore.

[ENHANCEMENT] Export country list using ESM import

If you want to create a page with a selector to select countries, instead of clicking on it, it's a good idea to be able to get the list of countries from the library
i took it from source code, but it should be exported
(or i missed something ?)

Add Zoom and Pan capabilities

It would be awesome if zoom, pan and pinch gestures are added

I tried using react-zoom-pan-pinch library to achieve it, but the problem came with tooltips, when you zoom the tooltip gets misplaced pointing at wrong path because it is not aware of the current direction of its target.

Otherwise, Great and simple library.

[ENHANCEMENT]

Does this work with react native?

[BUG]

Hello

I've been trying to install the library but I receive lots of errors in console of this kind:

Failed to parse source map from '/[project_url]/node_modules/react-svg-worldmap/src/components/Frame.tsx' file: Error: ENOENT: no such file or directory, open '/[project_url]/node_modules/react-svg-worldmap/src/components/Frame.tsx'.

the problem is other files like:

1. Region.js;
2. TextLabel.js
3. index.tsx

I guess a very basic problem when I install the package. The folder already exists in the node_modules and it seems all the files are there.