In my Leaflet application, When I draw a feature (Line/Polygon) and if I need to drag the base map to mark a point outside the visibility of the map then Leaflet marks additional point where I tap on the map to drag, which is not the expected behavior.

Code for marking line in typescript:

this.l_PolylineDrawer = new L.Draw.Polyline((this.map as L.DrawMap),{showLength : true,icon : this.icon,
      shapeOptions: {color:'#ffcc33',stroke:true}}); 
  • 1
    And what is the question/problem? – TomazicM Nov 8 '19 at 13:09
  • If I want to mark a line where the next point is outside the visibility of the map and I need to drag the map in this case the l_PolylineDrawer marks a point where I tabbed to drag the map as well, Which shall not be the case. – user684805 Nov 8 '19 at 13:28
  • 3
    Please update your question with the additional explanation from the comment. – TomazicM Nov 8 '19 at 13:46

This seem to be a bug, see https://github.com/Leaflet/Leaflet.draw/issues/695. This bug report has also a hack that should work, just put it before any draw code:

(function() {
  var originalOnTouch = L.Draw.Polyline.prototype._onTouch;
  L.Draw.Polyline.prototype._onTouch = function( e ) {
    if( e.originalEvent.pointerType != 'mouse'  && e.originalEvent.pointerType != 'touch' ) {
      return originalOnTouch.call(this, e);

I could test it only on regular non-touch device and there it works.

Here si working JSFiddle: https://jsfiddle.net/TomazicM/5sLuyco0/

  • L.Draw.Polyline.prototype is not defined in L.Draw.Polyline class hence typescript throws compile time error. – user684805 Nov 9 '19 at 13:01
  • I don't know why it doesn't work for you, probably connected with Angular environment (with which I'm not familiar with). See modified answer with JSFiddle example. – TomazicM Nov 9 '19 at 16:24

Not the answer you're looking for? Browse other questions tagged or ask your own question.