Greenstand / treetracker-web-map-client

The front end of the treetracker web map app.
http://map.treetracker.org
GNU Affero General Public License v3.0
64 stars 182 forks source link

World map component #304

Closed dadiorchen closed 2 years ago

dadiorchen commented 2 years ago

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:

image

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


Some hints for building components:

VWRoli commented 2 years ago

Working on this

dadiorchen commented 2 years ago

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

dadiorchen commented 2 years ago

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 commented 2 years ago

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

VWRoli commented 2 years ago

I started with this for the continents: https://www.npmjs.com/package/react-world-map Looks like this so far: Screenshot from 2021-12-28 10-17-07

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

dadiorchen commented 2 years ago

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

dadiorchen commented 2 years ago

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 commented 2 years ago

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] commented 2 years ago

: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: