Hi!

I can't drag circle and polygon on touch devices, (for example android mobile phone) just PC.

What is the problem? Thanks!

Hi, my module resolver is looking for dist/index.cjs that is referenced in your package.json, but it doesn't appear in my node_modules. I do have both index.mjs and index.js, it looks like it is not in the dist folder https://www.npmjs.com/package/leaflet-path-drag?activeTab=code.

I think this is a problem on your end, but if I'm misconfiguring something please let me know!

Thanks

Is there any way to get this working with React-Leaflet? Adding a draggable property to the Circle and polygon components would be awesome

HI, we are trying to use this library to drag we have a geojson file that is uploading polygons, how can we set the draggable variable for the new shapes being renbdered ?

How to reproduce

Leaflet version I'm using: 1.0.3
Browser (with version) I'm using: Chrome55
OS/Platform (with version) I'm using: Android
Leaflet.Path.Transform version: 1.0.2
Leaflet.Path.Drag version: 1.0.6

What behaviour I'm expecting and which behaviour I'm seeing

Note that both Transform and Drag plugin (in this order) is referred.
Prior to Chrome 55 and using core Leaflet v1.0.2, plugin's _onDragStart() handler is called when a path is started to be dragged, as it is expected. In Chrome55, dragging paths doesn't work due to Chrome's newly introduced pointer events, I guess.
Unfortunately, updating to v1.0.3 of core did not fix this behavior in Chrome 55, dragging of path still doesn't work because event handler above is simply not called anymore.

Dear @w8r,

In the last submit of the dist/L.Path.Drag-src.js file (commit: 1st of July 2016 branch: leaflet-1.0) there is an issue which should be checked.

The end of the function _onDragEnd contains a new modification: the _fakeStop call (Line 242).

if (this._mapDraggingWasEnabled) {
  L.DomEvent._fakeStop({ type: 'click' });
  this._path._map.dragging.enable();
}

This means that if the map is draggable then the polygon will never be able to raise a click event.
In our software we need to make both the map and the polygons draggable, and the polygons should be also selectable by simply click on them (show the 'selected polygons' with red color).

If we drag a polygon with mouse no click event should be fired (when releasing the mouse button), but if the polygon was simply clicked (and not moved) we can let the click event to be fired.

(Previously this _fakeStop call was inside an "if (moved) {...}" block and this should be also necessary here.)
A very simple "if (moved)" constraint around the _fakeStop can solve this problem.

I think the following code should be the correct one:

if (this._mapDraggingWasEnabled) {
  if (moved) {
    L.DomEvent._fakeStop({ type: 'click' });
  }
  this._path._map.dragging.enable();
}

This block is missing of course both from the src/Path.Drag.js and from the Leaflet.Path.Transform plugin where this Drag plugin is included.

I tested this fix also on touch supported device and it worked.

I am using react-leaflet and would like to keep GeoJSON coordinations in components state. When I try to update coordinations using:

layer.on("dragend", function (e) {
      const latLngs = e.target.getLatLngs()[0];
      console.log({ latLngs });
      const coordinates = latLngs.map((point) => [point.lng, point.lat]);
      setCoordinates(coordinates);
    });

it doesn't work and GeoJSON move to wrong position.

codesandbox.io

noordbrabant.zip
When I drag a geojson layer with a MultiPolygon in it, the _transformPoints function in L.Path-Drag is causing an error. At line 322 where it processes rings it wants to get a latlng:

latlng = latlngs[i][j];

But this is in fact an array of latlngs and not a single latlng. I have enclosed an geojson file that causes an error.

Maybe MultiPolygons are not supported?

The layer changes position on drag and scroll at the same time

If Leaflet.Path.Drag is used with a module system, a packager like webpack cannot resolve the dependencies if this plugin has no support for it. As a result, the plugin cannot be used as the script loading order cannot be determined.

Please add support for AMD and Node/CommonJS module systems.

Hey,

this Leaflet commit is breaking the dragging of SVG polylines:

Leaflet/Leaflet@0cfe858

Tested with latest Leaflet.Path.Drag release.

Thx :)

Hello and thanks for that useful library,

I am able to move single geometries with no problem. Now I would like to be able to have a selection of geometries and if I drag one, it drags them all (with the same offset).
I am able to "create a selection" (basically, I have an array of Path) and each has a Leaflet.Path.Drag but when I drag one, only that one is moving, because the event listeners are reacting only to the attached path.
What is your advice on this? Should the library go further and implement this or should I try to "sync" multiple Leaflet.Path.Drag behing the scene?

Thanks,
Fabien

So now we basically have:

• on drag: visually drag the feature
• on dragEnd: apply the drag to the feature for real, and let Leaflet redraw it

This has a main drawback: Leaflet is not aware of the change until the dragend. This has been partly workarounded by monkeypatching getLatLng(s) methods. But, firstly it's a bit of a hack, and secondly there still are flaws (for example getCenter can't be used).

What I understand is that the pattern is that way for performance reasons. But I'm not sure it's worth it: dragging is a manual action.

My suggestion is to sacrifice a bit of performance for a more integrated solution, thus something like:

• on drag: compute matrix, update latlng, asks Leaflet to redraw

I've made some quick tests with https://raw.githubusercontent.com/datasets/geo-countries/master/data/countries.geojson and even dragging a big country like the Russia I can't notice any difference (from a user point of view).

Thoughts?

Hi, and first of all thanks for making this plug-in available!

I'm using Leaflet.Path.Drag v1.1.0 with leaflet 1.4 and I want to remove a marker on dragend. Here is a minimal example of what I'm trying to do:

var myLatLng = L.latLng(48, 5);
map.setView(myLatLng, 11);

var myMarker = L.circleMarker(myLatLng, {draggable: true}).addTo(map);

myMarker.on('dragend', function(e) {
  map.removeLayer(myMarker);
});

What happens is that the marker is removed all right, but I'm getting an Uncaught TypeError: Cannot read property 'dragging' of null error that comes from the end of the _onDragEnd function here:

It looks like removing the marker from the map invalidates the map reference stored in this._path._map? The workaround I've come up with is to store a direct reference to the map, like this:

--- a/include/leaflet-path-drag-1.1.0/L.Path.Drag-src.js
+++ b/include/leaflet-path-drag-1.1.0/L.Path.Drag-src.js
@@ -160,6 +160,8 @@ L.Handler.PathDrag = L.Handler.extend( /** @lends  L.Path.Drag.prototype */ {
       .on(document, MOVE[eventType], this._onDrag,    this)
       .on(document, END[eventType],  this._onDragEnd, this);
 
+    this._map = this._path._map;
+
     if (this._path._map.dragging.enabled()) {
       // I guess it's required because mousdown gets simulated with a delay
       //this._path._map.dragging._draggable._onUp(evt);
@@ -267,7 +269,7 @@ L.Handler.PathDrag = L.Handler.extend( /** @lends  L.Path.Drag.prototype */ {
 
     if (this._mapDraggingWasEnabled) {
       if (moved) L.DomEvent.fakeStop({ type: 'click' });
-      this._path._map.dragging.enable();
+      this._map.dragging.enable();
     }
   },

It works but maybe there is a better way? Also let me know if you'd be interested in having a PR for this.

I am just wondering. Does dragging multiple polygons work in canvas mode? During dragging only one polygon is visible.

I am adding a link to so for reference.

Dear @w8r,

I found an issue in the path drag plugin which should be checked by you. In our software we need to draw ellipses on the leaflet map. I searched for a plugin and found a forked version of the "officially suggested" jdfergason/Leaflet.Ellipse plugin (https://github.com/kapcsandi/Leaflet.Ellipse/) which already works correctly with the new leaflet 1.0.

But when I added the draggable option to the ellipse I got an error that the _updatePath function does not exist. I checked the code and I found the following reason:
In the first part of the _onDragEnd function there is an _updatePath call:

if (moved) {
  this._transformPoints(this._matrix);
  this._path._updatePath();
  this._path._project();
  this._path._transform(null);

  L.DomEvent.stop(evt);
}

As I see the problem is that the original L.Path class has no _updatePath method, only the derived classes: L.PolyLine, L.Polygon and the L.CircleMarker.
So if the type of the dragged object is an instance of one of them no problem occurs. But when I try to use the Ellipse plugin which derives directly from the L.Path (and has no _updatePath method), the this._path._updatePath row fails, (although the ellipse can be moved correctly without this call).

Of course I can create a hack to add an empty function to the L.Ellipse, but it is not a proper fix: L.Ellipse.include({ _updatePath: function () { } });

I suggest to wrap the _updatePath method in an if condition: if (this._path._updatePath) {...} to be compatible with this ellipse plugin as this is officially a suggested plugin on the http://leafletjs.com/plugins.html page.

if (moved) {
  this._transformPoints(this._matrix);
  if (this._path._updatePath) {
    this._path._updatePath();
  }
  this._path._project();
  this._path._transform(null);

  L.DomEvent.stop(evt);
}

Unfortunately this problem can happen with other 'private' functions as well, but this small 'if' condition for the _updatePath method can help us to have compatibility at least with this 'official' ellipse plugin.

Please feel free to comment this issue.

Does this work with Leaflet v 1.9? I cant get it to work like the example.

I found that there is a function called removeHooks saying that can disable dragging. But how to call this function? And is there any other easier way to enable/ disable dragging? Thank you so much !

Tested demo on 2 platforms: on Android Chrome dragging does not work. On iPad it seems to work fine.

Possibly related: #26

I have a code pen at https://codepen.io/ericg97477/pen/eYMJrqj demonstrating the issue.

If I drag the square polygon, I get two errors in the console...

L.Path.Drag.js:6 Uncaught TypeError: L.DomEvent.fakeStop is not a function
    at i._onDragEnd (L.Path.Drag.js:6:3571)
    at HTMLDocument.o (DomEvent.js:108:13)
L.Path.Drag.js:6 Uncaught TypeError: L.DomEvent.skipped is not a function
    at i.<anonymous> (L.Path.Drag.js:6:3370)

I am not sure if this is a bug or something I am doing wrong.

I do note that at https://leafletjs.com/reference.html#domevent, it does not mention fakeStop or skipped methods.

Perhaps these were in older releases of leaflet...?

Hey,

just got this error while moving my svg path:

Error: Invalid value for attribute transform="matrix(1 0 0 1 NaN NaN)"L.SVG.include.transformPath @ L.Path.Drag-src.js:310L.Path.include.transform @ L.Path.Drag-src.js:19L.Handler.PathDrag.L.Handler.extend._onDrag @ L.Path.Drag-src.js:187L.DomEvent._on.handler @ leaflet-src.js:6999

Can't reproduce it actually but I'm working on it

Leaflet/Leaflet@f05af08

this commit will produce an error when dragging a polygon because the event is undefined (Can't read property _simulated of undefined).

Leaflet.Path.Drag should give the mouse event to that function (see PR)

Dear @w8r,

I have a problem with the polygon movement on touch devices mainly when using Chrome browsers.
I need to create selectable and draggable rectangles and other polygons. The problem is when touching the screen with fingers, the browser immediately fires Dragging events after the dragstart.
(It seems that Chrome handles the touchmove events very sensitively.)

Unfortunately it is nearly impossible to tap the screen with finger without some pixel movement between touchstart and touchend.

That's why the tapTolerance value was introduced in Leaflet (which is 15 pixel by default) and Leaflet generates a simulated click event when the touch ends and the movement distance is smaller than the tapTolerance value.

Here is the ordered list of the steps that happen:

Step#1. The user starts to touch the screen. -> The _onDragStart function runs.
Step#2. During when the user's finger is seemingly in the same position, the very small 1-2 pixel movement generates an touchmove event causing the _onDrag function to run.
Step#3. Because of the 1-2 pixel movement then immediately the this._path._dragMoved is set to true inside the _onDrag function. (As the Drag plugin does not use the tapTolerance value.)
Step#4. When the user's finger leaves the screen, the leaflet checks whether the tap is valid or not (is inside the tapTolerance, see _isTapValid function)
Step#5. If the movement is smaller than tapTolerance, then leaflet generates a simulated click event.
Step#6. Here comes the problem: the L.DomEvent._fakeStop({ type: 'click' }) function call simply stops the click event.

So now it is very hard to tap on a polygon without any movement, when I try it, I have to tap the screen 30-40 times to finally be able to accidentally quickly tap the screen with 0 pixel movement, (when the 'moved' flag remains false.)

This strange problem is not happening on Firefox, Ipad Safari and on some default android browsers, as these kind of browsers somehow does not create touchmove event immediately when I move my fingers only 1 mm on the screen.

Solution:

Fortunately I was able to make a fix which can solve the problem on all browsers an creates a "natural" tapping/dragging feeling:

The following 'if' statement should be inserted in the _onDrag function after the 3rd codeline (after the containerPoint variable creation):

_onDrag: function(evt) {
L.DomEvent.stop(evt);

var first = (evt.touches && evt.touches.length >= 1 ? evt.touches[0] : evt);
var containerPoint = this._path._map.mouseEventToContainerPoint(first);

if (evt.type === "touchmove" && this._path._dragMoved === false) {
    var totalMouseDragDistance = this._dragStartPoint.distanceTo(containerPoint);
    if (totalMouseDragDistance <= this._path._map.options.tapTolerance) {
        return;
    }
}
...

Benefits/Behavior of this 'if' statement:

1. Only has effect when touchmove happens, no effects on using mouse where positioning is much easier.
2. Uses the tapTolerance setting from Leaflet.
3. When the user creates a 'long' movement with the finger (which is more than the tapTolerance, the 'moved' flag will be set to true later in the _onDrag function) even if the user pulls back the finger more-or-less into the original position no click event will be fired. (So a long movement is considered as a "real move", not just a click [regardless the position where the touch ends.])
4. Browser independently you can both tap(click) on a shape and both drag them to an other position easily.

The devices and browsers where I tested my fix:

1. PC (only with mouse of course)

• Firefox: the fix does not affect dragging/selecting when mouse is used
• Chrome: the fix does not affect dragging/selecting when mouse is used
• IE11: the fix does not affect dragging/selecting when mouse is used

2. Ipad

• Safari: OK
• Chrome: OK only with the new fix

3. Samsung Galaxy Android tablet:

• Firefox: OK
• Chrome: OK only with the new fix
• Internal browser: OK only with the fix (it was almost impossible the select a polygon on this browser type before)

4. LG Android (Full HD) phone:

• Firefox: OK
• Chrome: OK only with the new fix (It was very hard to select a polygon)
• Internal Browser: OK

Feel free to comment this solution. I think this can be an easy solution to be inserted into the plugin.
We especially need it in the Transform plugin, but the root cause is here in the Drag plugin.

Not sure if this is intentional, but it would be very practical to be able to disable dragging with the right mouse button

Hi is there a way to enable or disable the drag capability of a marker on the fly? I've noticed an enabled property in the event handlers (data.target.dragging.enabled), but can't find the property in the standard marker instance.

Thanks

Hello @w8r !

The problem mentioned in Leaflet/Leaflet.Editable#83 appears in Leaflet.Path.Drag and Leaflet.Editable.Drag too, for example:

Uncaught TypeError: Cannot read property 'include' of undefined(anonymous function) @ Leaflet.Editable.js:1345(anonymous function) @ Leaflet.Editable.js:17(anonymous function) @ Leaflet.Editable.js:20
L.Path.Drag-src.js:465 Uncaught TypeError: Cannot read property 'prototype' of undefinedwrapMethod @ L.Path.Drag-src.js:465(anonymous function) @ L.Path.Drag-src.js:499(anonymous function) @ L.Path.Drag-src.js:531
L.Editable.Drag-src.js:456 Uncaught TypeError: Cannot read property 'prototype' of undefinedwrapMethod @ L.Editable.Drag-src.js:456(anonymous function) @ L.Editable.Drag-src.js:490(anonymous function) @ L.Editable.Drag-src.js:522

Hello @w8r ,
I am the member of cdnjs project.
We want to host this library.
I saw the latest version on git tag is v1.0.0-beta.7, but the latest version on npm is 0.1.15.
Could you publish the latest version on npm?
Thanks very much!

cdnjs/cdnjs#6746

Hello,

Your library doesn't seem to work on Multipolygons as it only takes one layer (path) while a multipolygon is composed of multiple layers. It would be nice for it to work on L.FeatureGroup objects as well.

I believe it would be a good addition to the library making it easier to use out-of-the-box

If you need sample data, the one from the leaflet example is a good start (campus):
http://leafletjs.com/examples/geojson.html

Fabien

How can I disable dragging by using the map variable? I dont want to disable dragging one by one

Hello,

I have noticed that the lib works well unless leaflet already reduced the number of points of the geometry because it too small.
Can be reproduced on the example:
http://w8r.github.io/Leaflet.Path.Drag/example/
This is the original feature:

Unzoom and move the feature:

Zoom back in:

The feature has been simplified but it shouldn't. The library probably transforms the points while they have already been simplified by leaflet's internals and then set them as the original ones

Fabien

I just like to ask how to disable dragging and enable it again?

Hi,
I am currently using Leaflet latest master build (0.8.0-dev), because the in this build it fixes some FeatureGroup events issues.
In my codes, I have a line to call polygon.editing.enable(); and it will eventually do:
L.DomUtil.addClass(this._path._container, 'leaflet-path-draggable'); where this._path._container is undefined in this case. I guess this._path._container is supposed to be the reference to the <g> element which wraps the <path>, but for some reasons, this property is gone.
Note that it is working fine in the leaflet stable version (0.7.3)

Thanks.

I need to get the center of a rectangle while dragging.

I've tried the following:

var rectangle = new L.Rectangle([...], { draggable: true }).addTo(map);
//Copy from here
rectangle.on('drag', function(event){
   console.log('on drag', event.target.getCenter());
})

rectangle.on('dragend', function(event){
   console.log('on dragend', event.target.getCenter());
})

On dragend it works. But on drag it is not working.

Problem appears with polyline, polygon and rectangle.

We can reproduce the issue by adding previous lines (from comment //Copy from here) on console of the browser here: http://w8r.name/Leaflet.Path.Transform/example/ and moving the rectangle.

Hey!

Found a bug where crazy things happen while using more than one finger.

Easy to change:

  var first = (evt.touches && evt.touches.length === 1 ? evt.touches[0] : evt);

to

  var first = (evt.touches && evt.touches.length >= 1 ? evt.touches[0] : evt);

Thanks :)

Hi guys,

i have read #3 about moving multiple geometries. But i have to move multiple Markers. Is there now an easy way to solve this?

I have the marker added to an layerGroup and want to move each marker when one marker is moved. The Solution form @Harvinator is not working this way cause the markers doesn't have applyTransform method and matrix properties.

Thank for advice.

Hi there,

Thanks for this great library. I am trying to implement dragging multiple GeoJSON in react-leaflet, but I am struggling to apply _transform method to multiple GeoJSONs objects. I think the issue is that _transform method is not applied to correct layers, but I have no idea if this is an issue of react-leaflet, this library or I do something wrong.

Here is a codesandbox.

Is there a way to undo a drag?

Ex: User moves the object to an invalid location in which case object is put back at its original location.

Hello, Many thanks for this library. Our customers love it.

We're currently moving our CS solution to Vuejs from Delphi. I've almost done with the leaflet part, but I've got a problem dragging Circle. PolyLine works fine which I don't understand... It just keep shows an error

'_transformPoints' of undefined.

As leaflet is a standalone and not for the framework, we're using vuejs wrapper for leaflet only. Other plugins like draw, edit, drag, handlers' vanilla versions are added into component due to leaflet doesn't support framework issues. so I don't think making them as one wrapper(one component) might be the issue. I'm thinking the issue comes from the version difference maybe...?, but I'm lost during debugging.... We've added our extra codes to customize it a bit.

with leaflet 1.0.3 I don't see an issue.

package.json
leaflet: 1.6.0

leaflet.draw.customize.js

...
  _replaceCoordGetters: function() {
      if (this._path instanceof L.Circle) { //this line changed, original: if (this._path.getLatLng) {
        // Circle, CircleMarker
        this._path.getLatLng_ = this._path.getLatLng;
        this._path.getLatLng = L.Util.bind(function() {
          return this.dragging._transformPoints(this.dragging._matrix, {});
        }, this._path);
      } else if (this._path instanceof L.Polyline) { //line changed 
        this._path.getLatLngs_ = this._path.getLatLngs;
        this._path.getLatLngs = L.Util.bind(function() {
          return this.dragging._transformPoints(this.dragging._matrix, []);
        }, this._path);
      }
    },

leaflet.js error line:

_fireDOMEvent: function(e, type, targets) {
...
if (e.type !== 'keypress' && e.type !== 'keydown' && e.type !== 'keyup') {
			var isMarker = target.getLatLng && (!target._radius || target._radius <= 10);
			data.containerPoint = isMarker ?
				this.latLngToContainerPoint(target.getLatLng()) : this.mouseEventToContainerPoint(e); //this line
			data.layerPoint = this.containerPointToLayerPoint(data.containerPoint);
			data.latlng = isMarker ? target.getLatLng() : this.layerPointToLatLng(data.layerPoint);
		}
}

Regards

I'm trying out this plugin to enable dragging of Polylines, but the dragend event is fire on a mouse click even when the line isn't dragged.

This also prevents any bound popups from displaying.

Any suggestions?