Scroll Zoom In with JavaScript

Design help Custom code
1

Hey, so I’m trying to make a draggable/zoomable map, but I can’t figure something out.

The two codes on their own work, so I’m able to zoom in or zoom out, but I want to do both and for some reason the code doesn’t work when I use them both…

// Scroll In
$(".map-image").bind("wheel", function(e){
if (zoomLevel < 2) {zoomLevel = zoomLevel + 0.2;}
$(".map-image").css("font-size", zoomLevel + "em");canvasMask.reflow();});

// Scroll Out
$(".map-image").bind("wheel", function(e){
if (zoomLevel > 1) {zoomLevel = zoomLevel - 0.2;}
$(".map-image").css("font-size", zoomLevel + "em");canvasMask.reflow();});

Thanks in advance!

1 Like
2

@TimSijtema I’m trying to make a draggable/zoomable map in webflow too. Did you ever figure this out?!