[TODO] Add a Map Component

[Dnouv]

Investigate and add an Open Source Map Library Component such as Leaflet, OpenStreetMap. Which will be helpful for community creators to advertise their shop location.

Thank you!

[AnshumanPadiya]

@Sing-Li Hello, is this issue still open, if yes then I would love to work on it

[tanu-chahal]

@Dnouv I would love to work on this issue. But I need some help deploying the system on my local environment, I want to ask what is the meaning of using strapi directly. I have got the prerequisites volta and docker, but when I ran the command given in the readme file it shows empty ports for strapi and nextjs. Is that an error? When I run npm i in the app folder it shows error. Can you help how can I successfully deploy it?

[Dnouv]

No, that's not an error. It is an info message that says: port 3000 is available (empty) on your local machine, and the script is going to use this port to start the NextJS. So, don't worry about it, that's just some info.

There is no need to run any other commands other than what is mentioned in the README. Once you have run the command sh startdevenv.sh localhost, the NextJS (client-side) is accessible on port 3000 or any other port as mentioned in the logs, and similarly, the Strapi CMS will be available on port 1337.

Please explain your initial approach to this issue before starting to work on this. Thank you!

[tanu-chahal]

@Dnouv When I run npm i in the app folder it gives many errors don't know why? Can you help to resolve them

[Palanikannan1437]

@Dnouv When I run npm i in the app folder it gives many errors don't know why? Can you help to resolve them

Hey there @tanu-chahal , we would be better able to help if you could share the complete logs of it....

I faced a very similar issue a long time ago, the embedded chat component in the project is referenced from the github repo directly for now...ie the unbuilt version of it, hence if your internet connection is slow...it might cause these issues!

While we try to figure this out, we've setup Gitpod 🍊 for the same... you can develop super quick on the cloud with a single click without all the hassle of setting up the project locally, you could find more about it in our docs!!

[pushpanjali-10]

Hello, is this issue still open, if yes then I would love to work on it

[Dnouv]

Hey @pushpanjali-10

Thank you for taking up the issue, it is available; however before jumping into the coding phase, please explain your initial approach, and how you plan to solve it like do you have any suggestions on which library we should use for this?

Thank you!

[SohamRatnaparkhi]

Hey @Dnouv ,
I hope that this issue is open for now and I would love working on it.
For solving this issue, I would prefer using react-leaflet library (package) as I have worked with this package previously.

Reasons for using react-leaflet:

• easy to use and highly customizable
• provides a Marker which displays the marker at a particular location (latitude & longitude)
• allows customization text (onClick) for each marker

My initial approach -
We can add a form like structure where community creators can enter the following details which then will be passed to the <Map/> component that I will make:

• Title/name of shop
• short description/ catchy tagline
• longitude of shop location
• latitude of shop location

forEach location in the array storing form details, I will make a marker.

We might need to store these details in a json file/query from a database.
But, I we are planning to just make a component, then we can directly take an array of objects (where the object will have above form details), and pass this array to Map component that I will make.

[SohamRatnaparkhi]

Hey @Dnouv , I hope that this issue is open for now and I would love working on it. For solving this issue, I would prefer using react-leaflet library (package) as I have worked with this package previously.

Reasons for using react-leaflet:

• easy to use and highly customizable
• provides a Marker which displays the marker at a particular location (latitude & longitude)
• allows customization text (onClick) for each marker

My initial approach - We can add a form like structure where community creators can enter the following details which then will be passed to the <Map/> component that I will make:

• Title/name of shop
• short description/ catchy tagline
• longitude of shop location
• latitude of shop location

We might need to store these details in a json file/query from a database.

Regarding this approach,
hey @Dnouv, @Sing-Li , can I work on it?
Thankyou!

[SohamRatnaparkhi]

Any update on this? Should I start working?