Streaming live at 10am (PST)

Interactive hand-drawn map

Hello webflow community.
I need some help to figure out how can I design what my client asked me.
My client needs a full-screen hand-drawn map, zoomable and with interactive spots that once clicked would trigger a pop up with a video and some text.
I leave a link to a similar website to give you an idea of what I mean.

Do you know what would be the best way to design it?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

pretty simple actually though it won’t work on mobile. Just put your image in and then set it to position relative and place divs inside it and position them absolute exactly where your hover elements are. Then create an interaction on those divs to show the popup tooltip. The audio and next buttons will require custom code but I personally think they don’t add anything to the user experience and I’d suggest getting rid of them anyway. https://www.youtube.com/watch?v=8g8MMCbfWTA

Thank you for your input! I was already thinking about doing a hover or on click animation for the popups but I’m having a lot of problems with the zoom in/out and moving around the map. I guess I have to find the right kind of interaction to simulate something similar to a map. About the audio you are totally right, i won’t include them on my project.