CODEWITHSUNDEEP
javascriptmapboxmapbox-gl-js
Narek Gevorgyan
Narek Gevorgyan

Reputation: 123

Change Right and Left click functionality on MapboxGl

I want to change mouse click functionality on mapboxGl. I need to implement right click panning on map, but there is no documentation about it. So I tried to disable map rotating on right click and enable panning but nothing worked, it just disabled rotation but panning is not triggered.

I want to know if there is a way to programmatically start and stop dragging/panning, I know you can enable it, but I need to actually start panning.

Want to make it clean and easy, I figured you can add listener on mousemove then change map boundaries but it doesn't look nice. Is there any easier way to start dragPan?

Upvotes: 1

Views: 2737

Answers (1)

Chase Choi
Chase Choi

Reputation: 1012

I don't know why you want to change left and right click if you want it for left-handed, they should change the mouse settings.
But, anyway, it's possible to make right click for dragging the map.

map.dragPan.disable();
map.dragRotate.disable();

var isMoving = false;
var offset;
map.on("contextmenu", (e) => {});
map.on("mousedown", (e) => {
  if (e.originalEvent.button === 2) {
    isMoving = true;
    offset = e.point;
  } 
});
map.on("mousemove", (e) => {
  if (isMoving) {
    map.panBy([offset.x - e.point.x, offset.y - e.point.y], {
      duration: 0,
    });
    offset = e.point;
  }
});
map.on("mouseup", (e) => {
  isMoving = false;
});

https://jsfiddle.net/cs09g/cnz4xhkt/4/

Upvotes: 6

Related Questions