function ikrZoom(ikrsvg) {
  const ikrwmap_details = document.getElementById("ikrwmap_details");
  const zoomIn = document.getElementById("zoom_in");
  const zoomOut = document.getElementById("zoom_out");
  const reset = document.getElementById("reset");

  const ts = {
    scale: 1,
    translate: { x: 0, y: 0 },
  };
  let currentScale = 1;
  const step = 0.2;
  const maxScale = 8;
  const minScale = 1;
  let panning = false;
  let mouseX, mouseY, mouseTX, mouseTY;
  let touchStartX, touchStartY, touchStartTX, touchStartTY, touchIdentifier;
  let pinchStartDistance = 0;

  // Disable default scrollbars
  ikrsvg.style.scrollbarWidth = "none";
  ikrsvg.style.overflow = "hidden";
  ikrsvg.style.touchAction = "none"; // Prevent default touch behaviors

  // Apply transformation with requestAnimationFrame for smoothness
  function applyTransform() {
    requestAnimationFrame(() => {
      const transform = `translate(${ts.translate.x}px, ${ts.translate.y}px) scale(${ts.scale})`;
      ikrsvg.style.transform = transform;
      ikrwmap_details.style.display = ts.scale > 1 || ts.translate.x !== 0 || ts.translate.y !== 0 ? "none" : "none";
    });
  }

  // Parse current translate values from style
  function parseTranslate(style) {
    const translateRegex = /translate\(([^,]+),([^)]+)\)/;
    const match = style ? style.match(translateRegex) : null;
    return match ? { x: parseFloat(match[1]), y: parseFloat(match[2]) } : { x: 0, y: 0 };
  }

  // Calculate distance between two touch points for pinch-to-zoom
  function getPinchDistance(touch1, touch2) {
    return Math.hypot(touch1.clientX - touch2.clientX, touch1.clientY - touch2.clientY);
  }

  // Zoom at a specific point (mouse or touch)
  function zoomAtPoint(delta, clientX, clientY) {
    const rect = ikrsvg.getBoundingClientRect();
    const x = (clientX - rect.left - ts.translate.x) / ts.scale;
    const y = (clientY - rect.top - ts.translate.y) / ts.scale;

    const newScale = delta > 0 ? ts.scale + step : ts.scale - step;
    if (newScale >= minScale && newScale <= maxScale) {
      ts.scale = newScale;
      currentScale = newScale;
      ts.translate.x -= x * (newScale - ts.scale);
      ts.translate.y -= y * (newScale - ts.scale);
    }
    applyTransform();
  }

  // Mouse Events
  ikrsvg.addEventListener("mousedown", (e) => {
    e.preventDefault();
    panning = true;
    ikrsvg.style.cursor = "grabbing";
    mouseX = e.clientX;
    mouseY = e.clientY;
    mouseTX = ts.translate.x;
    mouseTY = ts.translate.y;
  });

  ikrsvg.addEventListener("mousemove", (e) => {
    if (!panning) return;
    e.preventDefault();
    ts.translate.x = mouseTX + (e.clientX - mouseX);
    ts.translate.y = mouseTY + (e.clientY - mouseY);
    applyTransform();
  });

  ikrsvg.addEventListener("mouseup", () => {
    panning = false;
    ikrsvg.style.cursor = "grab";
  });

  ikrsvg.addEventListener("mouseout", () => {
    panning = false;
    ikrsvg.style.cursor = "auto";
  });

  ikrsvg.addEventListener("wheel", (e) => {
    e.preventDefault();
    zoomAtPoint(e.deltaY < 0 ? 1 : -1, e.clientX, e.clientY);
  });

  // Touch Events
  ikrsvg.addEventListener("touchstart", (e) => {
    e.preventDefault();
    if (e.touches.length === 1) {
      // Single touch: Start panning
      touchIdentifier = e.touches[0].identifier;
      touchStartX = e.touches[0].clientX;
      touchStartY = e.touches[0].clientY;
      touchStartTX = ts.translate.x;
      touchStartTY = ts.translate.y;
      panning = true;
    } else if (e.touches.length === 2) {
      // Two touches: Start pinch-to-zoom
      panning = false;
      pinchStartDistance = getPinchDistance(e.touches[0], e.touches[1]);
      touchStartX = (e.touches[0].clientX + e.touches[1].clientX) / 2;
      touchStartY = (e.touches[0].clientY + e.touches[1].clientY) / 2;
      touchStartTX = ts.translate.x;
      touchStartTY = ts.translate.y;
    }
  });

  ikrsvg.addEventListener("touchmove", (e) => {
    e.preventDefault();
    if (e.touches.length === 1 && panning && e.touches[0].identifier === touchIdentifier) {
      // Single touch: Pan
      ts.translate.x = touchStartTX + (e.touches[0].clientX - touchStartX);
      ts.translate.y = touchStartTY + (e.touches[0].clientY - touchStartY);
      applyTransform();
    } else if (e.touches.length === 2) {
      // Two touches: Pinch-to-zoom
      const pinchDistance = getPinchDistance(e.touches[0], e.touches[1]);
      const scaleChange = pinchDistance / pinchStartDistance;
      const newScale = ts.scale * scaleChange;
      if (newScale >= minScale && newScale <= maxScale) {
        ts.scale = newScale;
        currentScale = newScale;
        const centerX = (e.touches[0].clientX + e.touches[1].clientX) / 2;
        const centerY = (e.touches[0].clientY + e.touches[1].clientY) / 2;
        const rect = ikrsvg.getBoundingClientRect();
        const x = (centerX - rect.left - touchStartTX) / ts.scale;
        const y = (centerY - rect.top - touchStartTY) / ts.scale;
        ts.translate.x = touchStartTX - x * (newScale - ts.scale);
        ts.translate.y = touchStartTY - y * (newScale - ts.scale);
      }
      pinchStartDistance = pinchDistance;
      applyTransform();
    }
  });

  ikrsvg.addEventListener("touchend", () => {
    panning = false;
    touchIdentifier = null;
    pinchStartDistance = 0;
  });

  // Button Events
  zoomIn.addEventListener("click", () => {
    if (currentScale < maxScale) {
      currentScale += step;
      ts.scale = currentScale;
      applyTransform();
    }
  });

  zoomOut.addEventListener("click", () => {
    if (currentScale > minScale) {
      currentScale -= step;
      ts.scale = currentScale;
      applyTransform();
    }
  });

  reset.addEventListener("click", () => {
    ts.scale = 1;
    currentScale = 1;
    ts.translate = { x: 0, y: 0 };
    applyTransform();
  });

  // Initial transform
  applyTransform();
}