How to make a zoomable custom map for a portfolio website

Design help General
1

Hey everyone,

I’m trying to make a personal website that’s a zoomable map/whiteboard of all of my projects. I’m working from a Webflow template from Timothy Ricks (Draggable Map - Webflow) and the site is here: https://tricks-map.webflow.io/

Right now, this template has everything I need to make the site except the scroll-zoom ability that Google Maps/other maps have. I just need it to:

  1. zoom instead of scroll
  2. click to drag

Is there a straightforward why that I can do this or is this impossible in Webflow? Thanks!

2

I have a suspicion you might be able to accomplish it using Webflow’s Interactions, so it’s worth exploring that.

Alternatively, if you want to use script, it looks like this is what you want;

https://worka.github.io/vanilla-js-wheel-zoom/demo-image.html

3

Awesome, thanks. I’ll take a look into this.

1 Like
4

Did you get this working in Webflow? I’m trying to do a similar thing.

1 Like