Interactive Draggable Map

So I’m trying to make an interactive map in webflow. Sort of like this: Bekijk de actuele Efteling plattegrond → Click on “Open de plattegrond”

But I have no idea on how to make an image click & drag responsive and I have no idea how to make custom code…


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

[2]: https://university.webflow.com/article/sharing-your-sites-read-only-link*emphasized text*

Hey, @TimSijtema Watch this video if you haven’t already it might give you some insights on the interactions and logic.

Building an Interactive SVG Map in Webflow - YouTube & Interactive Maps in Webflow Using CMS Collections - YouTube

I’ve seen that video, the only problem I’m having with that solution is that I don’t want it to move on hover but I want it to be a click and drag map.

Hey @TimSijtema ah I get it I’ve tried something this might help you

Read-Only

Published Link

Code can be found on the page.

Hope it helps :peace_symbol:

Thanks @Sachin ! That’s definetly a start, but I want it to only be able to drag horizonally and I would want it to stop as soon as the image “ends”. If you look at this link: https://fec-otium.webflow.io/map I don’t want to see it turn white I just want to be able to see the whole image if you know what I mean.

Anybody able to help me with this?

Hey, well, it’s not exactly the same, but the Dynamic Map App for Webflow map might work as a solution for what you are searching for.