nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Disable map pan when CTRL key pressed

VincentNg

Hi,
I'd like to implement custom behaviour when the CTRL key is held down and the mouse is dragged on the map. Something similar to what is proposed in this thread for the Javascript API:
http://forums.arcgis.com/threads/18473-ctrl-drag

I've tried adding an event listener on MouseEvent.MOUSE_DOWN and also on MapMouseEvent.MOUSE_DOWN to disable map navigation if the CTRL key is pressed but it seems that the map navigation handler is firing before my event listener can prevent it. I've tried adding in event.stopPropogation and event.preventDefault but it makes no difference.

The first time I Ctrl-drag the default map pan action is fired. The second time I do it I see my custom action occuring (for testing I'm not cancelling the custom action when the drag ends).

Any thoughts on how I can intercept the default map pan/navigation behaviour before it occurs?

I'm currently trying to implement this inside NavigationWidget.mxml. Perhaps I should be doing it somewhere else?

thanks,
Nic

Vind meer berichten getagd met

Accepted answers

Drew

This is not a plug and play solution for the ESRI Flex Viewer, but you will get the idea..

See Sample code below.

<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"       xmlns:s="library://ns.adobe.com/flex/spark"       xmlns:mx="library://ns.adobe.com/flex/mx"       xmlns:esri="http://www.esri.com/2008/ags"       keyDown="app_keyDownHandler(event)"       keyUp="app_keyUpHandler(event)">     <fx:Script>   <![CDATA[        protected function app_keyDownHandler(event:KeyboardEvent):void    {     if (event.keyCode == Keyboard.CONTROL)     {      map.panEnabled = false;     }    }        protected function app_keyUpHandler(event:KeyboardEvent):void    {     if (event.keyCode == Keyboard.CONTROL)     {      map.panEnabled = true;     }    }       ]]>  </fx:Script>  <esri:Map id="map"  width="100%" height="100%">  <esri:ArcGISTiledMapServiceLayer url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"/>   </esri:Map>   </s:Application>

Drew

All comments

VincentNg

Sorry Drew, I had initially marked this as answered but I'm still running into problems...

I've got the key_down, key_up events firing and have confirmed that the handlers are being called by adding in Alerts at appropriate places.

The map.panEnabled = false; statement is working as expected and disables map panning but when I try to re-enable map panning with map.panEnabled = true; it's not working. The map pan remains disabled.

Update!
Sorry, my bad, I had multiple event handlers in my application from trying to get things to work and they were conflicting with each other...

VincentNg

Just thought I'd add a little more to this...

The KEY_UP event won't get fired if there's nothing in the application that has focus (e.g. a textbox, button, etc.), so I needed to capture the key_up event from the stage.

More info in this forum entry:
http://forums.adobe.com/thread/493934

VincentNg

Thanks Drew, I was already heading in that direction. Had hoped that I might be able to do it all within the mouse event handler but it looks like I'll have to watch keypress events too.
cheers,
Nic

This is not a plug and play solution for the ESRI Flex Viewer, but you will get the idea..

See Sample code below.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
      xmlns:s="library://ns.adobe.com/flex/spark"
      xmlns:mx="library://ns.adobe.com/flex/mx"
      xmlns:esri="http://www.esri.com/2008/ags"
      keyDown="app_keyDownHandler(event)"
      keyUp="app_keyUpHandler(event)">

 
 <fx:Script>
  <![CDATA[
   
   protected function app_keyDownHandler(event:KeyboardEvent):void
   {
    if (event.keyCode == Keyboard.CONTROL)
    {
     map.panEnabled = false;
    }
   }
   
   protected function app_keyUpHandler(event:KeyboardEvent):void
   {
    if (event.keyCode == Keyboard.CONTROL)
    {
     map.panEnabled = true;
    }
   }
   
  ]]>
 </fx:Script>
 <esri:Map id="map"  width="100%" height="100%">
 <esri:ArcGISTiledMapServiceLayer url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"/> 
 </esri:Map>
 
</s:Application>

Drew

This is not a plug and play solution for the ESRI Flex Viewer, but you will get the idea..

See Sample code below.

<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"       xmlns:s="library://ns.adobe.com/flex/spark"       xmlns:mx="library://ns.adobe.com/flex/mx"       xmlns:esri="http://www.esri.com/2008/ags"       keyDown="app_keyDownHandler(event)"       keyUp="app_keyUpHandler(event)">     <fx:Script>   <![CDATA[        protected function app_keyDownHandler(event:KeyboardEvent):void    {     if (event.keyCode == Keyboard.CONTROL)     {      map.panEnabled = false;     }    }        protected function app_keyUpHandler(event:KeyboardEvent):void    {     if (event.keyCode == Keyboard.CONTROL)     {      map.panEnabled = true;     }    }       ]]>  </fx:Script>  <esri:Map id="map"  width="100%" height="100%">  <esri:ArcGISTiledMapServiceLayer url="http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"/>   </esri:Map>   </s:Application>

Drew

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.