Add arrows to map routes

[GrandSuccess87]

Terms

• [X] I have searched open and closed feature requests
• [X] I agree to follow activist's Code of Conduct

Description

This issue will focus on adding arrows for each route profile: walking, biking, driving.

This component lives in frontend/components/media/MediaMap.vue and we're using the extension maplibre-gl-directions.

Contribution

Happy to pair up with someone on this or tackle it myself :))

[rabelmervin]

Hi Madam @GrandSuccess87, I'm interested in solving this issue. Can we group together and solve this ??? Looking forward to your response. Thank you :)

[andrewtavis]

Hey @rabelmervin 👋 Assigned the issue to you :) You can see the added arrow that we're looking for by using the directions on this maplibre-gl-directions example. The source code with the needed change for it is here, and as @GrandSuccess87 said we'd like the change to go into frontend/components/media/MediaMap.vue.

Let us know if there's any further help needed!

[rabelmervin]

Thanks Sir @andrewtavis for your response. So The issue is to add seperate type of arrows for each walking,biking,driving when two points are selected in the map . Right ???

[andrewtavis]

Ah interesting, I was thinking we'd just do a single type of arrow and use the default. The directions already change color based on the profile, and adding in a white arrow as is done in the example would be fine for me. How about we start with that for this issue, and if we want to do specific arrows for specific profiles we can change that in a later issue?

Let me know if this is what you were thinking, @GrandSuccess87!

[rabelmervin]

Hi sir @andrewtavis, I cant able to run the vue file on my ide's. they are not supported by the ide's i use. tried many but can't (bracktets,sublimetext,phoenix.io etc )

[andrewtavis]

Hey @rabelmervin 👋 If you give VS Code a shot, it should work :)

[rabelmervin]

Thanks sir it works @andrewtavis

[andrewtavis]

Welcome, @rabelmervin! Let us know if you need further support! :)

[andrewtavis]

Bring the conversation back to here from email, @rabelmervin :) I'm realizing this is a bit more involved, but I think we can get it to work :)

• Firstly we need an image for this. Let's go ahead and get the PNG image that was used in the original example and we can put it in frontend/public/icons (dirrection-arrow.png as it's named is fine)
• We then need to import the image as is done in the example here
• We then load the image into the map as is done in the example here
• We then create a layers object and add the image to it like in the example here
• And then we need to add the layer to the map as is done in the example here

Let me know if there are other questions on this, @rabelmervin! Happy to help further. Let's keep the discussion on GitHub though so the rest of the community can follow :)

[rabelmervin]

Thanks for helping me @andrewtavis.

[andrewtavis]

Very welcome, @rabelmervin!

[rabelmervin]

modifications successfully made @andrewtavis but, It has some errors here and there is it okay ???

[andrewtavis]

You're welcome to open a PR and I'll help with the errors, @rabelmervin :)

[rabelmervin]

hi sir @andrewtavis, I apologize for making the pr late. successfully made PR. could you tell me the mistakes that I made ???

[andrewtavis]

Hey @rabelmervin 👋 I'm not seeing a PR on the repo 🤔 Are the changes maybe in your branch and you need to open a PR here?

[rabelmervin]

oh sorry sir @andrewtavis, now i made it right.

[andrewtavis]

Closed by #900 🙌 This map sure is coming along 😊 Thanks for making the issue, @GrandSuccess87, and thanks for the initial implementation, @rabelmervin!