finish drawing double click

• [ ] I'm reporting a bug, not asking for help
• [ X] I've looked at the documentation to make sure the behaviour is documented and expected
• [ ] I'm sure this is a Leaflet Draw code issue, not an issue with my own code nor with the framework I'm using (Cordova, Ionic, Angular, React…)
• [ ] I've searched through the issues to make sure it's not yet reported

---

Polygon, line string can not finished when user double click. It was working previous version. How can we do this behaviour for new version of drawing.

How to reproduce

• Leaflet version I'm using: 1.0
• Leaflet Draw version I'm using: 0.4.7
• Browser (with version) I'm using: Chrome 55
• OS/Platform (with version) I'm using: Windows
• step 1 Start creating Polygon
• step 2 single click for creating points
• step 3 double click for finish polygon

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

Minimal example reproducing the issue

• [ ] this example is as simple as possible
• [ ] this example does not rely on any third party code

Using jsfiddle or another example site.

Hi @emreesirik,

This problem has been fixed in version 0.4.9. Get here: https://cdnjs.com/libraries/leaflet.draw.

I'm still seeing the same problem after upgrading to 0.4.9, however I'm using Leaflet version 1.0.2 https://jsfiddle.net/b6b232cj/

@Searlon, same thing here.

Still have this issue. 0.4.9, leaflet 1.0.3. It's something to do with Chrome registering as a touch browser, it works okay in Firefox.

Same issue here. Using Leaflet 1.0.3 and 0.4.9 for Leaflet.Draw. Working well in Safari but not in Chrome. Any workaround? Thanks!

UPDATE: I think this issue has to do with the implementation on Chrome 55 onwards of the new pointer events. Disabling them in chrome://flags solves the issue, although that serves more as a temporary solution. Any help would be appreciated.

Same issue here on 1.0.3 and 0.4.9. Anyone know of a workaround or what needs to be fixed?

I fixed it by preventing to add new marker when double click on last point. I'm using leaflet 1.2.0, leaflet-draw 0.4.12 and Chrome 60

This is my code:

L.Draw.Polyline.prototype._calculateDistance = function (potentialLatLng, marker) {
  let lastPtDistance
  if (this._markers.length > 0) {
    const markerPoint = this._map.latLngToContainerPoint(marker.getLatLng())
    const potentialMarker = new L.Marker(potentialLatLng, {
      icon: this.options.icon,
      zIndexOffset: this.options.zIndexOffset * 2
    })

    const potentialMarkerPint = this._map.latLngToContainerPoint(potentialMarker.getLatLng())
    lastPtDistance = markerPoint.distanceTo(potentialMarkerPint)

    console.log(markerPoint, potentialMarkerPint, lastPtDistance)
  } else {
    lastPtDistance = Infinity
  }
  return lastPtDistance
}

const _endPoint = L.Draw.Polygon.prototype._endPoint
L.Draw.Polygon.prototype._endPoint = function (clientX, clientY, e) {
  if (this._markers.length > 2) {
    const dblClickPointDistance = this._calculateDistance(e.latlng, this._markers[this._markers.length - 1])
    if (dblClickPointDistance < 10 && L.Browser.touch) return
  }

  _endPoint.call(this, clientX, clientY, e)
}

anything new on this ? I would love to see the distance indication on my desktop app

Thanks for the fix @vutrungduc7593 I added one more line to avoid issues when the repeatMode is enabled. Without this the first click on the map after finishing to draw a polygon was not starting a new drawing.

L.Draw.Polyline.prototype._calculateDistance = function (potentialLatLng, marker) {
  let lastPtDistance
  if (this._markers.length > 0) {
    const markerPoint = this._map.latLngToContainerPoint(marker.getLatLng())
    const potentialMarker = new L.Marker(potentialLatLng, {
      icon: this.options.icon,
      zIndexOffset: this.options.zIndexOffset * 2
    })

    const potentialMarkerPint = this._map.latLngToContainerPoint(potentialMarker.getLatLng())
    lastPtDistance = markerPoint.distanceTo(potentialMarkerPint)

    console.log(markerPoint, potentialMarkerPint, lastPtDistance)
  } else {
    lastPtDistance = Infinity
  }
  return lastPtDistance
}

const _endPoint = L.Draw.Polygon.prototype._endPoint
L.Draw.Polygon.prototype._endPoint = function (clientX, clientY, e) {
  if (this._markers.length > 2) {
    const dblClickPointDistance = this._calculateDistance(e.latlng, this._markers[this._markers.length - 1])
        if (dblClickPointDistance < 10 && L.Browser.touch) {
          this._enableNewMarkers()
          return
        }
  }

  _endPoint.call(this, clientX, clientY, e)
}

Double-clicking to complete drawing a polygon appears to still be broken in the latest released versions of Leaflet (1.5.1) and Leaflet.draw (1.0.4) I created two examples on jsfiddle to show the behavior working in Leaflet 0.7.x but not in Leaflet 1.x.

• Double-click to complete polygon working in Chrome and Firefox using Leaflet 0.7.7 + Leaflet.draw 1.0.4 https://jsfiddle.net/kbydqhp6/1/

• Double-click to complete polygon broken in Chrome and Firefox using Leaflet 1.5.1 + Leaflet.draw 1.0.4 https://jsfiddle.net/Lm24xnbw/

Apparently version 1.6.0 of leaflet works with 1.0.4 of draw: https://jsfiddle.net/10msdcon/2/