Mousewheel DOMMouseScroll function

Design help Custom code
1

Hey! So I’m trying to make an interactive map and now I have the following code to make “map-image” zoom in or out depending on which button I click. But I want to make it so that you use the scroll wheel on your mouse or your fingers on mobile to zoom in or out instead of using buttons to click… Anybody willing to help me alter this code

Thanks in advance!

https://dockfec.webflow.io/staff/activiteiten-map

https://preview.webflow.com/preview/dockfec?utm_medium=preview_link&utm_source=designer&utm_content=dockfec&preview=d55716f532dda39e25a5fcd88bb87889&pageId=62faac647b89f9395d5feb04&workflow=preview

// ZOOM IN
$(".zoom-in").on("click", function () {
  if (zoomLevel < 2) {
    zoomLevel = zoomLevel + 0.2;
  }
  $(".map-image").css("font-size", zoomLevel + "em");
  canvasMask.reflow();
});

// ZOOM Out
$(".zoom-out").on("click", function () {
  if (zoomLevel > 1) {
    zoomLevel = zoomLevel - 0.2;
  }
  $(".map-image").css("font-size", zoomLevel + "em");
  canvasMask.reflow();
});```
2

So this is what I have right now, but that isn’t working at all… Please any help would be greatly appreciated…

// Zoom 
let mouseData = 0;
let zoomLevel = 1.4;
$(".map-image").css("font-size", "1.4em");canvasMask.reflow();

// Zoom in-out
function mouseWheel(event) {
  mouseData = event.delta; 
if (mouseData > 0) {
  zoomLevel = zoomLevel - 0.2; 
  $(".map-image").css("font-size", zoomLevel + "em");canvasMask.reflow();}
else {
  zoomLevel = zoomLevel + 0.2;
  $(".map-image").css("font-size", zoomLevel + "em");canvasMask.reflow();}}
3

Anybody able to help me with this? Would really like to know what I’m doing wrong…