Mobile dragging problem

[topive]

I came across a problem using my Leaflet map on my mobile. The elevation chart dragging doesn't work properly until I zoom in or out. Before that it shows the elevation and distance in the chart but it won't move when dragged. I can click on a different part of the chart and it changes the values. What could be causing this? Works fine with a mouse.

[Raruto]

Hi topive, I think you are referring to the following option:

https://github.com/Raruto/leaflet-elevation/blob/c361a6420334275fd1a235c06a1d14ab75f54643/src/options.js#L11

in past, since dragging is not a "native" gesture on mobile, it was decided to disable it automatically on thees devices.

If you prefer it to always be enabled, you can simply do this:

 var controlElevation = L.control.elevation({
  dragging: true, // instead of !L.Browser.mobile
});

Have a nice day, Raruto

---

PS I did not understand this part of your question:

The elevation chart dragging doesn't work properly until I zoom in or out.

After you zoomed in/out, is the dragging enabled, or what else?

[topive]

Yes, that's exactly what I meant. At the initial zoom level the dragging doesn't work, but as soon as I zoom in or out, the dragging works fine after that. But I'll try enabling dragging and see if that makes a difference. Thank you!

Topi

[ghost]

What version of Leaflet you are using? I have this problem with Leaflet 1.6.0, not with version 1.5.1.

[topive]

I'm using Leaflet 1.6.0. I'll try 1.5.1 and see if it helps. Thanks!

[Raruto]

var controlElevation = L.control.elevation({
 dragging: true, // instead of !L.Browser.mobile
});

I'll try enabling dragging and see if that makes a difference

@topive does that solution work somehow? ( with version 1.6.0 )

[topive]

Well the problem is that by "dragging" I'm talking about the overall dragging mechanism on the elevation chart. The dragging: true option did turn the dragging selection on the chart. I'll attach a gif for clarity.

[ghost]

Maybe this is a browser problem, Firefox works okay, but Chrome and Samsungs Internet don't.

[Raruto]

Hi @petrahu,

I think it may be a problem related to the order of execution of the events. If you try to drag the chart down, the page drag should take precedence, with the extreme consequence that all the other touch events on the chart will seem "broken".

You can try to solve this by adding the followings rule:

.elevation-control > svg {
    touch-action: none;
}

Are there any negative effects?

[ghost]

No, they are positives effects, it works now. Thank you very much.

[ghost]

Hi Raruto,

I tested your test.html. It works okay the first time. But if I follow the elevation graph again, it don't. Then I need touch with two fingers on the map and zoom it, then it works.

[Raruto]

Maybe I got the wrong css rule...

https://github.com/Raruto/leaflet-elevation/blob/51dfc28d63a2fe01031307945059d68b2c7a63da/src/index.css#L31

Do you confirm that it works (on chrome, firefox, ...) if modified as follows?

.elevation-control.elevation .background {
  touch-action: none;
}

Thanks for your patience, Raruto

[ghost]

Yes, thank you very much. Now your test.html works and my App also.