World map component

[dadiorchen]

This is about a component to display a global map, in the component we can highlight a single continent and mark the count of trees, planted in the area, like the picture shows:

So the input/parameter of the component should be look like:

---

Some hints for building components:

• This kind of issue is about creating a new component, it might not need to mount it in the whole app, to know how to create a component separately, please check the tutorial below.
• Design resource: https://www.figma.com/file/XdYFdjlsHvxehlrkPVYq0l/Greenstand-Webmap?node-id=2497%3A11584
• A tutorial of how to use the Cypress component tool to build components: https://github.com/Greenstand/treetracker-wallet-web#how-to-build-a-component
• Please mount the component with import { mountWithTheme as mount } from '../../models/test-utils'; to get our theme imported.
• Please use MaterialUI theme.spacing(x) as possible as we can, so the component is more responsive
• We are using MaterialUI to build the app: https://material-ui.com/
• When you are ready to raise PR for the component, please attach the screenshot of the component for review.
• Please read our readme for more information/guide/tutorial.
• Here is an engineering book in Greenstand.
• To know more about our organization, visit our website.
• If you want to join the slack community (some resources need the community member's permission), please leave your email address.
• More issues in this project: https://github.com/orgs/Greenstand/projects/26

[VWRoli]

Working on this

[dadiorchen]

@VWRoli , another volunteer suggested this lib: https://www.react-simple-maps.io/ it's interesting

[dadiorchen]

Maybe it's not so necessary for the current case of showing just continents, but I'm thinking maybe it's useful for future use when we need to present the data by country rather than continents

[dadiorchen]

But I don't know if it is customizable to set up the UI to follow our design.

[VWRoli]

I started with this for the continents: https://www.npmjs.com/package/react-world-map Looks like this so far:

But if we want to show the data by countries then maybe simple maps would be better. Should I go for countries then?

[dadiorchen]

No, let's do it in the future, your implementation is good enough IMO!

[dadiorchen]

What a powerful world of NPM library, so many libs available, I was thinking I need to find some svg of the map and do some CSS styling, but now there are some lib for it :D

[VWRoli]

What a powerful world of NPM library, so many libs available, I was thinking I need to find some svg of the map and do some CSS styling, but now there are some lib for it :D

That's why I love React, there is a library for almost everything.

[github-actions[bot]]

:tada: This issue has been resolved in version 1.15.0-beta.1 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket: