🟢 Add a Maps page that pinpoints users to the location they identified in the JSON file.

[XanderRubio]

Create a Map page with a UI design map to display Contributors' locations; you can use the Python library called "Leafmap". Currently, info on where Contributors are based is located in the Contributors.json file and is structured in the following way. We might need to adjust how the JSON file is structured when reaching the phase of creating code to iterate over the JSON file and pulling users' locations, which are structured by a city name, country name, and flag emoji.

**🔨We can break this open issue into smaller issues as it might require several moving parts to execute

From the GitHub Repository fpdf2 that is a great example ⬇️

When viewing the map by the open source project fpdf2, they have the ability to click on the user's GitHub link and specific contribution to the project⬇️

Current steps to execute for this project or better yet reverse engineer how the map in GitHub Repository fpdf2 was constructed.

• [ ] 1. Create a new page component: Create a new React component that will serve as the page for displaying the world map and contributor locations. You can use the create-react-app command to create a new component or create a new file manually.
• [ ] 2. Install the necessary dependencies: Install any necessary dependencies for displaying the map and markers, such as react-leaflet or google-maps-react.
• [ ] 3. Fetch the contributor data: Fetch the contributor data from the JSON file or API endpoint and store it in the component's state or props.
• [ ] 4. Display the map: Use the map library to display a map of the world on the page. You can use react-leaflet or google-maps-react to display the map.
• [ ] 5. Add markers for each contributor: Iterate over the contributor data and add a marker for each contributor's location on the map. You can use the Marker component from react-leaflet or google-maps-react to add markers.
• [ ] 6. Customize the markers: Customize the markers to display information about each contributor, such as their name, location, and contribution details. You can use the Popup component from react-leaflet or google-maps-react to display this information.
• [ ] 7. Style the page: Style the page to make it visually appealing and easy to use. You can use CSS or a CSS framework such as Bootstrap or Material UI to style the page.

From research, the two options with documentation from others would be using Leaflet for React or integrating Google Maps React. This doesn't mean it has to be done this way. If you have another solution to creating a map to display users' locations, go for it!

Resources:

GitHub Repository fpdf2 - That has in the README section at the bottom a Map function that shows where all the contributors are located

Example of the map by the open source project fpdf2 - This shows all the contributors involved in the project in addition to link to the GitHub profile and their specific(s) contribution to the project for a pull request.

YouTube video for using React and Leaflet - Additionally, this channel demonstrates several more videos on the topic to customize the layering and popups of the map.

Medium Article for using React and Leaflet

Digital Ocean article on using Google Maps and React

[MarcianoN]

Hello @XanderRubio , i'm a student this issue would be my first contribution on github, I'm interested in doing it but i still have some questions since i'm still a beginner. when you said "You can use the create-react-app command" do you mean creating a new project? or do i make the issue in a already made project? by adding a file in the /component folder for example?
and lastly how long do you think this issue would take? -Marciano

[XanderRubio]

Hi Marciano! I appreciate your enthusiasm in tackling this issue. I really appreciate it. Before tackling I would recommend you have a look over the README and then head over to the CONTRIBUTION-GUIDELINES and then open up your first pull request to share what you want to do before you die. Look at the live link for examples.

Once you get your info added, we will merge your first pull request, and this is a great way to get an idea of how pull requests work. Then I can go ahead and assign you to this task, and I can assist with helping you with providing more clarification on this issue.

Additionally, you can make a file manually as this can be easier for figuring out the structure of the file directory visually in VSCode or if you're using a different code editor. The issue itself depends on how much time and effort you want to put into it. The main objective of your contribution is to learn and grow from your contribution, so if you find it takes longer than you may have expertise, but you are learning a new insight in working with React, then it is worth it. I hope that helps. Have a great day!

Xander

[lucasfirmo62]

Hi @XanderRubio, I'm excited to do this task. I will start now! Can you put me as Assignees?

[MarcianoN]

@XanderRubio Awesome!, That sounds good! I will review the README and CONTRIBUTION-GUIDELINES and try to make my first pull request today!.

[XanderRubio]

Hi @XanderRubio, I'm excited to do this task. I will start now! Can you put me as Assignees?

Hi @lucasfirmo62!

It's wonderful to see your enthusiasm for contributing to our project! I'll go ahead and assign you this task. Additionally, could you please update your text for your "Before I Die" statement, as mentioned in issue #75? We encourage you to share a meaningful statement that resonates with you, as other contributors will view your text, and we want it to serve as a positive example for others to share their meaningful goals.

Thank you, Lucas, and we look forward to seeing your contribution. If you have any questions or issues while integrating the contributors' map, please don't hesitate to reach out. Have a fantastic day!

[XanderRubio]

@XanderRubio Awesome!, That sounds good! I will review the README and CONTRIBUTION-GUIDELINES and try to make my first pull request today!.

Thanks for making your first pull request @MarcianoN. I've assigned this issue to @lucasfirmo62. Please feel free to contribute to other open issues, create your own open issues, and also visit the ROADMAP for ideas on how we can continually grow this project with different tech stacks. Have a great day!

[KulkarniShrinivas]

Hi @XanderRubio If this issue is still pending please let me know I will start working on it as soon as possible as I am good at MERN and I want to contribute to open-source So, This will my first contribution please can assign me this issue? I also worked on ReactJS but want to explore open-source

Thank you

[XanderRubio]

Hi @XanderRubio If this issue is still pending please let me know I will start working on it as soon as possible as I am good at MERN and I want to contribute to open-source So, This will my first contribution please can assign me this issue? I also worked on ReactJS but want to explore open-source

Thank you

Hi @KulkarniShrinivas,

Thank you for following up on your interest in working on this issue. As of now, I assigned the issue to @lucasfirmo62 two weeks ago without any further communication from him. If by the end of Saturday, September 30th, he has not responded, we will go ahead and reassign the issue to you so that you can start working on it.

In the meantime, feel free to open your first pull request by following the contribution guidelines outlined here. Share what you want to do before you die - I look forward to your contribution!

Have a great day,

Xander

[sherikovic]

I think it would be better to reuse the LocationMap component since it does exactly that. Nest it within a bigger component and move LocationMap itself to a separate function that returns the jsx. The bigger component would utilize a smaller function to do the geocoding and returns all the geo positions for all the users and then call LocationMap only once with { markers } argument.

[lucasfirmo62]

Hi @XanderRubio, sorry for the delay, over the next week I will be finalizing this issue, I encountered some difficulties when developing, but I believe I will finish it next week.

[XanderRubio]

Hi @XanderRubio, sorry for the delay, over the next week I will be finalizing this issue, I encountered some difficulties when developing, but I believe I will finish it next week.

Hi @lucasfirmo62. No worries on the delay😉 I hope your well and if you would like you can reference how @sherikovic built out the LocationMap component to display on the user card. This could help with any difficulties and additional following what @sherikovic is suggesting. You guys can even partner on the code if that helps also with working on it. Please let me know what you would like to do and @sherikovic is a friendly developer who is happy to assist in working together.

"I think it would be better to reuse the LocationMap component since it does exactly that. Nest it within a bigger component and move LocationMap itself to a separate function that returns the jsx. The bigger component would utilize a smaller function to do the geocoding and returns all the geo positions for all the users and then call LocationMap only once with { markers } argument."

[samejima-san]

seems like a few people are already working on this, i'd like to help where i can 🥺

[XanderRubio]

seems like a few people are already working on this, i'd like to help where i can 🥺

Excellent @samejima-san! @lucasfirmo62 from pull request #166 has updated and created the map feature, which is an excellent foundation for this feature, and we can continually enhance it. I will make another issue to begin the subsequent enhancement of this feature shortly. Please stay tuned, and you are more than welcome to work. You can view this feature now on the live link for this feature here.

[XanderRubio]

@lucasfirmo62 has successfully built this MVP feature and we will be continually adding to it with new issues to enhance the issue and functionality. Thank you @lucasfirmo62 for pull request #166. The issue is closed.