How to pan and zoom an image, like Google Maps?

Design help General
1

Hey guys, i’m pretty experienced with Webflow but I couldn’t figure out how to replicate a Google map style drag to pan and scroll to zoom on an image. I’m pretty sure it’s not possible with interactions.

I’m trying to create a webmap for a fantasy game project, we have high resolution rasterized images of our world which we’d want users to pan and zoom. I was looking into mapbox but it feels a bit overkill. Is there any other way?

Thanks!

2

Hey Jason,

Assuming your image is a reasonable size to download and work with, you can use a solution like leaflet.js.

Here’s a demo;
https://pan-zoom-image.webflow.io/

And cloneable;

1 Like
3

Hey Michael, this will work perfectly!

I’m actually not sure how I didn’t find that cloneable through my Google search, I searched again and alas it is there, along with this post. Hopefully it’ll help others in the future.

Thanks a bunch, I really appreciate it!
Jason

4

Heh heh, that would be because I built it yesterday. It was an interesting problem and something I’d been wanting to experiment with.

1 Like
5

Perfect timing haha, thanks Michael! Everything is working as intended and the end result is looking fantastic!

A little side note since we have entered the AI-age, anyone that is using raster images and need to increase quality for zooming then an AI upscaler (I used Gigapixel) will achieve incredible results. Just keep an eye on file size and use appropriate compression.

It’s also great for upscaling AI generated imagery for landing pages, check out Aaron Rudyk’s Showcased Webflow Showcased | AI generated landing page (Midjourney, Chat GPT, Gigapixel)