Map option to switch from walking to biking directions

[andrewtavis]

Terms

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

Description

Now that work has been finished on #685, we're now ready to provide an option for the user to choose their routing options. The code to switch the profile is currently commented out in the MediaMap component, with the base designs for this being found on Figma. For this first issue, it'd be great if we gave the user the option to switch between walking and biking direction services, with another issue then following that would then add the full functionality of switching between walking, biking and driving. The default would be walking, and if the user clicks the walking icon, then the api and directions profile would be switched to the biking directions.

• Note that we can add a MediaMap option to clear the directions via the work done in #673/Added events to MediaMap for clearDirectionsControl. #791, with the code for this starting here. The big challenge for this will be to add in a menu option that also has an icon that's also reactive to light and dark mode.

Contribution

Happy to support with this or get to it myself eventually! 😊

[andrewtavis]

CC @GrandSuccess87, would you have interest in working on this?

[GrandSuccess87]

Hey @andrewtavis, I'm happy to work on this!

[andrewtavis]

Thanks, @GrandSuccess87! Let me know if there's anything I can do to help :) And have fun working on the map! 🗺️😊

[andrewtavis]

Further question that I have on this for maybe another issue or two, @GrandSuccess87:

What about adding in a tooltip or something to the second waypoint that would show the time estimate for how long it'd take to get there? I'm realizing that the route is often times going to be the same for biking and walking, but having a time estimate would be a major distinction for it 😊

Beyond that, let's keep in mind that we'll likely want to clear there directions when the profile is changed to make sure that the user redraws the path and gets accurate directions with the new one. Would likely be ideal if we were able to reroute, but that's a separate issue as well.

And a quick check on your opinion on something: should we add the route directions to the path, so the little arrows that are on the path? Might be obvious, but I'm seeing that Organic Maps does this :)

[andrewtavis]

Hey @GrandSuccess87 👋 Checking in with you on the issue :) Let me know if you want to do a call at some point to discuss the status! Hope you're well! 😊

[GrandSuccess87]

Hii @andrewtavis! Apologies! I've had some unexpected work demands popup over the last several months and as such I'm just now getting started on this + caught up on all the latest updates from the past dev syncs 🥲

I do like the idea of adding a tool tip to the second wave point to show the time estimate as a means of distinguishing the walking / biking routes.

I also like the idea of showing the arrows in the route directions since it'll promote clarity to the user 💯

Do we want the tool tip + addition of route directions to the path in separate tickets or part of this one? If separate tickets, I can create those too :))

[andrewtavis]

Great to hear from you, @GrandSuccess87! We're still in Code Night 🌙 if you'd want to stop in and say hi :) You can probably guess who all's still in the call 😊

[andrewtavis]

Do we want the tool tip + addition of route directions to the path in separate tickets or part of this one? If separate tickets, I can create those too :))

I think that making separate tickets would be great for that :) Feel free to create them, and thank you!

[GrandSuccess87]

Wonderful! I'm at the cafe, I'll pop in and say hello!

[GrandSuccess87]

Hey @andrewtavis! Would you happen to have a solo bike icon image I can use by any chance? I checked the Figma, and I see it's actually grouped with the others that we plan to add later.

[andrewtavis]

Hey @GrandSuccess87 👋 The bike icon there can be found at icones.js.org/collection/bi?s=bic&icon=bi:bicycle :) In case you'd like the walking one too, that's icones.js.org/collection/bi?s=walk&icon=bi:person-walking, but then I flipped it over the y-axis so the person's walking to the left 😉 Attaching an SVG for that as well :)

[GrandSuccess87]

Got it! Tanks for sending those over!