Touch support for last chrome version on mobile

[r2my]

Hi, Thanks for this great plugin!! I have an issue with Chrome on mobile. I can't draw on the last Chrome version. It works for old versions. You can reproduce the issue by enabling the dev mode on Chrome and show a device. Then go to the demo: https://jsfiddle.net/t6e48rm5/

I tested on Chrome 62. There is no error message so I don't see where to start...

Thanks for your help!

Best regards, Rémy

[DispatchCode]

Hi, Found the same problem and only with Chrome browser. The drawing function work fine, but not with "touch move."

Thanks in advance!

[jakodev]

We are experiencing the same issue... digging into the code we had discover that the "problem" is caused by leaflet (main library) in the src\core\Browser.js file due to a wrong handling of pointermove/down/etc.. events in Chrome browser when used in a mobile device. In other words: if a browser support pointer events (and Chrome do) the ontouchstart event will be disabled...

[Loykos]

What about bind freeDraw methods also on Pointer Events API? Something like:

  // Create the path when the user moves their cursor.
  - map.on('mousemove touchmove', mouseMove);
  + map.on('mousemove touchmove pointermove', mouseMove);

[silvervesi]

What about bind freeDraw methods also on Pointer Events API? Something like:

  // Create the path when the user moves their cursor.
  - map.on('mousemove touchmove', mouseMove);
  + map.on('mousemove touchmove pointermove', mouseMove);

Where would you do this? Sorry, I'm not familiar with any of this right now, I'm merely investigating whether I could use FreeDraw in my app.

EDIT: I now see that this discussion has been going on since 2015, so not likely to get fixed anytime soon, althougha module by the name of leaflet-freehandshapes seems to extend FreeDraw and works fine on touchscreen and Chrome, so they must have solved it somehow.

[JustroX]

For those who have yet to find a workaround, here's what I did: I remapped the touch events to mouse events and implemented it once my map was ready.

// My own function
 function onMapReady(map: LeafletMap) {
    const container = map.getContainer();
    // Touch start event
    container.addEventListener('touchstart', (e: TouchEvent) => {
      const touch = e.changedTouches[0];
      const simulatedEvent = new MouseEvent('mousedown', {
        bubbles: true,
        cancelable: true,
        view: window,
        clientX: touch.clientX,
        clientY: touch.clientY,
      });
      touch.target.dispatchEvent(simulatedEvent);
      e.preventDefault();
    });
    // Touch move event
    container.addEventListener('touchmove', (e: TouchEvent) => {
      const touch = e.changedTouches[0];
      const simulatedEvent = new MouseEvent('mousemove', {
        bubbles: true,
        cancelable: true,
        view: window,
        clientX: touch.clientX,
        clientY: touch.clientY,
      });
      touch.target.dispatchEvent(simulatedEvent);
      e.preventDefault();
    });
    // Touch end event
    container.addEventListener('touchend', (e: TouchEvent) => {
      const touch = e.changedTouches[0];
      const simulatedEvent = new MouseEvent('mouseup', {
        bubbles: true,
        cancelable: true,
        view: window,
        clientX: touch.clientX,
        clientY: touch.clientY,
      });
      touch.target.dispatchEvent(simulatedEvent);
      e.preventDefault();
    });
   }