Expanded map tooltip for events

[andrewtavis]

Terms

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

Description

A more advanced feature to add into the new MediaMap component would be that it would allow for an expanded tooltip with an image and link to the page for the event. We'd use this for the map view of the search :)

The designs for this can be found here on Figma and below. Ideally the entire tooltip would be a link to the event.

We use MapLibre GL JS for our mapping service, so their documentation and code related to it or MapBox that it was forked from would be where to look.

Contribution

Would be great if we could get some support here. Happy to plan it out and support others, or I can also get to it myself eventually 😊

[andrewtavis]

Blocking this for now until a basic tooltip is built in #680 :)

[andrewtavis]

Ideally this would replace the basic tooltip everywhere so that we have some consistency between the search and the event page. Also having the attend button multiple places on the page makes sense 😊

[UnknownSean8]

Hi, I am happy to work on this. Thanks.

[andrewtavis]

Thanks, @UnknownSean8! Looking forward to seeing what comes from this! Let's just use one of the images for the landing page as the placeholder image for now :)

[UnknownSean8]

Hi @andrewtavis, I have started with the tooltip and it's working fine. There's one problem tho, I can't seem to make translation and buttons work in it. Other than that, the original popup seems to stay somehow.

I will continue to check what is the problem in the meantime. Sorry for the delay.

Thanks!

[andrewtavis]

Hey @UnknownSean8 👋 One thing to consider here is to use TypeScript directly to set variables with the localizations of certain keys and then assign them to the tooltip. Or is this what you've tried? And as far as specifically having a button, if it's getting annoying, then we can also just have the whole thing be a link to the page/join flow. Let's chat about it Saturday and we can look at what you have!

[UnknownSean8]

Hi @andrewtavis, thanks for the reply! Got it, I will try to change things up a bit and see how it goes and update along the way. However, I might not be able to attend this Saturday's meeting as there's a lot on my hands right now due to the end of the semester assignments and exams. 😢 But I will be back up to speed after the next two weeks. Sorry for the inconvenience caused.

[andrewtavis]

No stress, @UnknownSean8! Good luck on the exams! Let's be in touch when they're all done. This is more a priority later anyway, so all good 😊

[UnknownSean8]

Thank you, @andrewtavis! I'll try my best to contribute before the MVP release.

[andrewtavis]

No stress, @UnknownSean8! Events aren't MVP :) Let's just keep working on it though so it's looking great when we release them 🤩

[UnknownSean8]

Oh I mean other stuff if I am able to complete it haha 😆. But thanks again! Appreciate it.

[andrewtavis]

Hey @UnknownSean8 👋 Quick thing I'm thinking of here: let's make sure that the map zoom is also set to a reasonable minimum when the pin is clicked such that the user can fully see everything :) Should be something we can add to the click/tap action 😊

[UnknownSean8]

Got it, I will drop it down first. I will be back by around 15 May, that's when my exams are finished. 😄

[andrewtavis]

Sounds great :) Good luck with exams!

[UnknownSean8]

Hi, just a quick update. The component is working now so we don't have to use html text as the popup content. However, the tailwind and nested Vue component don't seem to be working in there yet. I'll have to check it out.

Thanks!

[andrewtavis]

Thanks for the update, @UnknownSean8! Also happy to do a check in on this at the sync or a call next week/weekend :)