Is there a way to replicate a Google map style drag to pan and scroll to zoom on an image in Webflow? Is it possible to achieve this without using interactions? I'm trying to create a webmap for a fantasy game project and want users to be able to pan and zoom high resolution rasterized images of our world. I've considered using Mapbox, but it seems too complex. Are there any other options available in Webflow?

Yes, it is possible to replicate a Google Maps-style drag to pan and scroll to zoom on an image in Webflow without using interactions. Here's how you can achieve this:

1. Prepare your image: Make sure your image is high resolution and optimally sized for the desired zoom level. You can use an image editing software to create different zoom levels of the image.

2. Add the image to your Webflow project: Drag and drop an image element onto your Webflow canvas and upload your high-resolution image.

3. Set the image as a background image: Select the image element, go to the Style panel, click on the background image option, and choose your uploaded image as the background.

4. Adjust the background image settings: In the Style panel, click on the background settings icon (it looks like a gear) next to the background image option. Here, you can adjust the background position, size, and repeat.

5. Enable panning: To enable drag-to-pan functionality, set the background position to "Fixed" and adjust the background position coordinates. For example, you can set the X-axis position to -100% and the Y-axis position to -100% to position the image in the top left corner.

6. Enable zooming: To enable scroll-to-zoom functionality, you can leverage the Webflow built-in feature called "Zoom on Scroll." Select the body element (or any container element), go to the Settings panel, and enable "Zoom on Scroll." Adjust the zoom level and duration as per your preference.

By following these steps, you can replicate a drag-to-pan and scroll-to-zoom functionality without relying on interactions. This approach allows you to create a webmap for your fantasy game project using high-resolution rasterized images, while avoiding the complexity of using Mapbox or similar mapping platforms.