How to customize smooth PanTo & Zoom on mouse event ?

JeremieJoalland1

Following my previous post "How to disable/enable built-in navigation functions on JMap", I'm trying to implement an application which can switch between built-in and customized navigation functions.

Basically, in one mode I have the built-in navigation of ArcGIS Runtime :
- PanTo is very smooth and accurate, whatever the MouseDragged speed,
- ZoomIn & ZoomOut is also very smooth, on MouseWheel event, and the location under mouse pointer remain under the mouse.

Now I've implemented my customized MapOverlay, in order to have another mode where I block the built-in navigation by blocking the mouse events, and I've implemented my own navigation by overriding mouse events but with bad results :
- PanTo is not smooth at all and not accurate. If the MouseDragged is brief, result can be acceptable, but when you move the mouse slowly, it's like JMap component can't manage fast enough the panTo instructions, as map fire more mapExtentChanged() event. the result is that the map is not attached to the mouse pointer, like it is with the built-in panTo.
- ZoomIn & ZoomOut is very smooth like built-in, but the location under mouse pointer change so behavior is different from built-in.

I've also overrided all navigation functions of JMap component, just in order to check (print in console) when these functions are called, and the built-in navigation don't call panTo() or zoom(). Also during the mouseDragged, the mapExtentChange event occurs only one time once the mouse button is released...

Is it possible to implement a customized PanTo which has the same nice and smooth behavior than built-in ? Could you please help me on that ?

I've attached my sample application source code

PanToApplication.zip

TinaBrewington_1-1752183764914.png

JeremieJoalland1

I finally come with an acceptable panTo() function 😄
- First, the disable animation mode did a lot.
- Second, my code in onMouseDragged() was not good regarding the Point I calculated to panTo, and I corrected it.

in my customized MapEventsOverlay, I changed this :

private java.awt.Point  startPointOnScreen;

...

    @Override
    public void onMouseDragged(MouseEvent event) {
  // do not supper() to block the built-in navigation
     java.awt.Point pointScreen = event.getLocationOnScreen();
     Point endPointOnMap = this.getMap().toMapPoint(pointScreen.x, pointScreen.y);
     Point startPointOnMap = this.getMap().toMapPoint(startPointOnScreen.x, startPointOnScreen.y);
     
     double dx = endPointOnMap.getX() - startPointOnMap.getX();
     double dy = endPointOnMap.getY() - startPointOnMap.getY();
     
     // PAN TO new extent
     Point currentCenter = this.getMap().getExtent().getCenter();
     Point newCenter = new Point(currentCenter.getX() - dx, currentCenter.getY() - dy);
     
     this.getMap().panTo(newCenter);      
     
     this.startPointOnScreen = pointScreen;
    }

...

    @Override
    public void onMousePressed(MouseEvent event) {
  // do not supper() to block the built-in navigation
     this.startPointOnScreen = event.getLocationOnScreen();
    }

...

    @Override
    public void onMouseWheelMoved(MouseWheelEvent event) {
  // do not supper() to block the built-in navigation
  java.awt.Point pointScreen = MouseInfo.getPointerInfo().getLocation();
  // java.awt.Point pointScreen = event.getLocationOnScreen(); // => always return 0,0
  Point pointCenter = this.getMap().toMapPoint(pointScreen.x, pointScreen.y);
  
  // Turn ON animation - Add this to keep^a nice & smooth zoomIn/Out
  this.getMap().setAnimationMode(AnimationMode.ANIMATE);
  
  int notches = event.getWheelRotation();
  if (notches < 0) {
   // Zoom in
   this.getMap().zoom(1/factor, pointCenter);
  } else {
   // Zoom out
   this.getMap().zoom(factor, pointCenter);
  }
  
  // Turn OFF animation - Add this to keep^a nice & smooth zoomIn/Out
  this.getMap().setAnimationMode(AnimationMode.NONE);
    }

in my application code, I turn off/on the animation mode in action of my 2 buttons, depending if I want built-in panning or my customized panTo :

// Desactivate Built-in navigation
  btnCustomizedPanTo = new JButton();
  btnCustomizedPanTo.setText("ACTIVATE customized panTo");
  btnCustomizedPanTo.addActionListener(new ActionListener() {
   public void actionPerformed(ActionEvent e) {
    btnBuiltInPanTo.setEnabled(true);
    btnCustomizedPanTo.setEnabled(false);

    // activate the MapOverlay to BLOCK Built-In navigation, and manage customized panTo
    mapEventsOverlay.setActive(true);
    
    // Turn OFF animation to improve customized PANTO - Here !!
    map.setAnimationMode(AnimationMode.NONE);
   }
  });
  toolBar.add(btnCustomizedPanTo);

Note: when using the NavigatorOverlay, if the MapEventsOverlay is activated, then all the actions are performed without animation... so it's necessary to manage the Animation Mode at the NavigatorOverlay level !


full sample code is attached.

PanToApplication_v2.zip