CODEWITHSUNDEEP
javascriptmapboxmapbox-gl-js
Vincent Hoch-Drei
Vincent Hoch-Drei

Reputation: 671

Mapbox prevent anchor behavior while dragging feature

I have a feature in mapbox which is draggable. But when I'm dragging this feature it's anchoring to the mouse (it jumps). I don't want that. Is there a method to prevent that?

What I have is this behavior (grab the point at the edge): https://www.mapbox.com/mapbox-gl-js/example/drag-a-point/

What I wanna have: https://www.mapbox.com/mapbox-gl-js/example/drag-a-marker/

The difference is that the first is a feature and the second a html marker. But I don't want to use html marker because they're affect performance negatively.

Upvotes: 0

Views: 925

Answers (1)

stdob--
stdob--

Reputation: 29167

The main idea is to calculate the delta in pixels between the feature and the starting point of the mouse, and apply it when setting new coordinates:

var delta = {
  x: 0,
  y: 0
};
function onMove(e) {
  var coordsXY = {
    x: e.point.x + delta.dx,
    y: e.point.y + delta.dy
  };
  var coords = map.unproject(coordsXY);
  ...
}

map.on('mousedown', 'point', function(e) {
  // Prevent the default map drag behavior.
  e.preventDefault();

  var featureXY = map.project(e.features[0].geometry.coordinates.slice());
  var mouseXY = e.point;
  delta = {
    dx: featureXY.x - mouseXY.x,
    dy: featureXY.y - mouseXY.y
  };
  ...
}

[ https://jsfiddle.net/gfs8b59c/ ]

Upvotes: 2

Related Questions