topic Re: ArcGIS for JavaScript: customize pan using mouse middle button in ArcGIS JavaScript Maps SDK Questions

ArcGIS for JavaScript: customize pan using mouse middle button

JackyCai — Mon, 05 Dec 2016 06:09:40 GMT

Hi there,

I am trying to disable left mouse button click event while drawing on the map, at the same time allow users to pan using middle mouse button like in ArcMap while editing. I am looking for method like "panTo" which is mentioned in Esri document Map navigation, but could not be found in map or navigation classes. I find this method in MapWidgetProxy, but could not find example that shows how to use it.

I would really appreciate it if anyone would provide suggestions, cheers!

Jackie

Re: ArcGIS for JavaScript: customize pan using mouse middle button

FC_Basson — Sat, 11 Dec 2021 17:55:14 GMT

To determine which mouse button is clicked, you can use the "mouse-down" event listener e.g.

map.on("mouse-down", function(evt){
   console.log(evt.which)  // will return which button was clicked
   if (evt.which == 1) {
      console.log("left button");
   } else if (evt.which == 2) {
      console.log("middle button");
   } else if (evt.which == 3) {
      console.log("right button");
   }
})‍‍‍‍‍‍‍‍‍‍

Make use of the evt.preventDefault() function to prevent any default button click behaviour during your edit session.

Re: ArcGIS for JavaScript: customize pan using mouse middle button

JackyCai — Tue, 06 Dec 2016 01:01:02 GMT

Thanks for the reply. I have tried this but it does not work for stopping default PAN. Actually, I have tried to use preventDefault and stopPropagation methods in "mouse-down", "mouse-drag", "mouse-drag-start" events, but none seems to work.

I am thinking that Esri has implemented default PAN in a seperated mechanism, because there are actually "PAN" events, which however can not be stopped unless you use map.disablePan().

Re: ArcGIS for JavaScript: customize pan using mouse middle button

JackyCai — Mon, 19 Dec 2016 02:49:10 GMT

I found a solution but you have to use private methods in the API. There is a __pan function (be aware of the double underscores) you can use when handling mouse-drag event, and also you need to take care of some stuff in onPanStart (otherwise the popups' position would be wrong) as well as onPanEnd (to actually apply the drag).

It is not good to use private methods and properties directly because it might change without notifications from Esri, but this is the only solution I found so far.