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>
