viewElement.map = new ArcGISMap({
  basemap: "hybrid",
});

// Disable mouse-wheel and single-touch map navigation.
viewElement.navigation = {
  actionMap: {
    mouseWheel: "none",
  },
  browserTouchPanEnabled: false,
};

await viewElement.viewOnReady();

// Listen to events that have been disallowed for navigation.
viewElement.addEventListener("arcgisViewMouseWheel", () => {
  warnUser("To zoom in please double-click the map or use zoom in/out buttons.");
});

// Trap attempted single touch panning.
const pointers = new Map(); // JavaScript Map
viewElement.addEventListener("arcgisViewPointerDown", (event) => {
  if (event.detail.pointerType !== "touch") {
    return;
  }
  pointers.set(event.detail.pointerId, { x: event.detail.x, y: event.detail.y });
});

[
  "arcgisViewPointerUp",
  "arcgisViewPointerLeave",
].forEach((eventName) => {
  viewElement.addEventListener(eventName, (event) => {
    if (event.detail.pointerType !== "touch") {
      return;
    }
    pointers.delete(event.detail.pointerId);
  });
});

viewElement.addEventListener("arcgisViewPointerMove", (event) => {
  if (event.detail.pointerType !== "touch" || pointers.size !== 1) {
    return;
  }
  const start = pointers.get(event.detail.pointerId);
  if (!start) {
    return;
  }
  // Calculate how far the touch moved from its starting point.
  const distance = Math.hypot(event.detail.x - start.x, event.detail.y - start.y);
  if (distance < 20) {
    return;
  }
  warnUser("Please use two fingers to pan the map.");
});

// Display a warning.
let timeout;
function warnUser(warning) {
  const warningDiv = document.getElementById("warning");
  warningDiv.replaceChildren();
  const message = document.createElement("div");
  message.className = "message";
  message.textContent = warning;
  warningDiv.append(message);
  warningDiv.style.opacity = 1;
  if (timeout) {
    window.clearTimeout(timeout);
  }
  timeout = window.setTimeout(() => {
    warningDiv.style.opacity = 0;
    warningDiv.textContent = "";
  }, 4000);
}