mac5562
Posts: 9
Joined: Thu Aug 25, 2022 6:59 am

Highcharts maps inverse mouse move disable

Hi !

Is it possible the disable the inverse mouse movement in map, when i zooming on that ? I didn't find anything about that in the API documents.



Thank you in advance !
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Highcharts maps inverse mouse move disable

Hello mac5562!
Thanks for contacting us with your question!

You can achieve it, by changing the core function responsible for scrolling events on the chart container. You can check the demo below to see an example. To make it working in your project, all you need to add is plugin inside IIFE function.

Demo: https://jsfiddle.net/BlackLabel/qh619roz/
Docs: https://www.highcharts.com/docs/extendi ... highcharts
Plugin:

Code: Select all

(function(H) {
	const { defined } = H;
	let totalWheelDelta = 0,
		totalWheelDeltaTimer;
  H.wrap(H.Pointer.prototype, 'onContainerMouseWheel', function(proceed, e) {
    var chart = this.chart;
    e = this.normalize(e);
    var delta = (defined(e.wheelDelta) && -e.wheelDelta / 120) ||
      e.deltaY || e.detail;
    if (Math.abs(delta) >= 1) {
      totalWheelDelta += Math.abs(delta);
      if (totalWheelDeltaTimer) {
        clearTimeout(totalWheelDeltaTimer);
      }
      totalWheelDeltaTimer = setTimeout(function() {
        totalWheelDelta = 0;
      }, 50);
    }
    if (totalWheelDelta < 10 && chart.isInsidePlot(e.chartX - chart.plotLeft, e.chartY - chart.plotTop) && chart.mapView) {
			// ADD -1
      chart.mapView.zoomBy((-1 * (chart.options.mapNavigation.mouseWheelSensitivity -
          1)) * -delta, void 0, [e.chartX, e.chartY],
        Math.abs(delta) < 1 ? false : void 0);
    }
  });
}(Highcharts));
Let me know if that fits your requirement.
Regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Maps”