Select to view content in your preferred language

Map Pan at Draw Polygon (SketchViewModel) on ArcGIS JS API 4.28

641
1
01-24-2024 04:25 AM
SaurabhUpadhyaya
Frequent Contributor

Hi all,

I am using ArcGIS JS API 4.28 for 2D Data (Map & View) only.

In my current requirement using Draw Polygon on map and at the time of drawing want to pan but pan is not working and not able to pan on map. So to achieve panning on map trying to write custom code to allow panning. But it is not working. As per the ESRI document they introduce Navigation which is worked only with scene only. 

What is the workaround to achieve this very basic functionality.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Toggle Pan in ArcGIS JS API 4.x</title>
  <link rel="stylesheet" href="https://js.arcgis.com/4.28/esri/themes/light/main.css">
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <script src="https://js.arcgis.com/4.28/"></script>
  <script>
    require([
      "esri/Map",
      "esri/views/MapView"
    ], function (Map, MapView) {

      var map = new Map({
        basemap: "streets"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118, 34],
        zoom: 8
      });

      var panEnabled = false; // Initial state
      var dragHandler, shiftDragHandler, wheelHandler;

      // Function to disable panning and rotation
      function disablePan() {
        dragHandler = view.on("drag", stopPropagation);
        shiftDragHandler = view.on("drag", ["Shift"], stopPropagation);
        wheelHandler = view.on("mouse-wheel", stopPropagation);

        view.popup.autoOpenEnabled = true; // Allow popup to open on click

        panEnabled = false;
      }

      // Function to enable panning and rotation
 // Function to enable panning on right-click
function enablePan() {
    // Remove existing event handlers
    if (dragHandler) {
        dragHandler.remove();
        dragHandler = null;
    }

    if (shiftDragHandler) {
        shiftDragHandler.remove();
        shiftDragHandler = null;
    }

    if (wheelHandler) {
        wheelHandler.remove();
        wheelHandler = null;
    }

    // Set up event listeners for panning on right-click
    dragHandler = view.on("drag", function (event) {
        if (event.button === 2) { // Right-click
            view.goTo(view.center, {
                duration: 100,
                easing: "linear"
            });
        }
    });

    shiftDragHandler = view.on("drag", ["Shift"], function (event) {
        if (event.button === 2) { // Right-click
            view.goTo(view.center, {
                duration: 100,
                easing: "linear"
            });
        }
    });

    wheelHandler = view.on("mouse-wheel", function (event) {
        // You can add additional logic for zooming or adjust as needed
        event.stopPropagation();
    });

    view.popup.autoOpenEnabled = false; // Disable popup on click
    view.constraints.rotationEnabled = false; // Disable rotation

    panEnabled = true;
}





      // Enable pan on right-click
      view.on("mouse-down", function (event) {
        if (event.button === 2) { // Right-click
          enablePan();
          // Optional: You can remove the next line if you want to allow the browser's context menu
          event.preventDefault(); // Prevent browser context menu
        } else if (event.button === 0) { // Left-click
          disablePan();
        }
      });

      // Function to stop event propagation
      function stopPropagation(event) {
        if (!panEnabled) {
          event.stopPropagation();
        }
      }

    });

    document.addEventListener('contextmenu', event => {
      event.preventDefault();
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>

</html>
0 Kudos
1 Reply
UndralBatsukh
Esri Regular Contributor

Hi there,

You mean something like this? https://codepen.io/U_B_U/pen/oNVGzqX?editors=1000

 

0 Kudos