I got the dragging working on touch screens. The main change was to add touch events in addition to the mouse events that are already there which is minor. One notable change is that I needed to copy the code from the markerMouseDown
event handler and put it into the markerDragged
handler since HTML markers don't have touch events.
function markerDragged(e) {
//Disable event bubbling so that if marker overlaps line, a new mid-point isn't also added.
skipMidPointAdd = true;
//Track the active waypoint index.
activeWaypointIdx = e.target.properties.wpIdx;
//Update the position of the corresponding waypoint.
waypoints[activeWaypointIdx] = e.target.getOptions().position;
//Update preview.
updatePreview();
}
Picking a random point on the route line and dragging it works, but it is a bit tedious due to thin line, and there is about a 2 second delay before the touch start event fires (I believe this is due things waiting to see if it is a touch right click, or waiting for a second touch point for multi-touch). Making the line wider would help with making sure users touch it. I'm looking to see if I can improve the delay somehow. Not sure if there is a hidden setting or if I can somehow use touch events outside of the map as a workaround. I'll post back here if I make any progress. In the meantime, you can try what I have working here: https://rbrundritt.azurewebsites.net/Demos/AzureMaps/DraggableRoutes.html
I'll make a pull request on the code sample site either with the current version or an improved version later today and link to that code here.
Update
After a bit of playing around I found a really easy solution that solves the touch start delay issue and makes things a lot smoother... use the maps touch start event instead of the layer level event as the map does a lot of stuff with that event before it reaches the layers. A whole 4 lines of code is all it took. I've made a pull request on the sample site, you can see what code I changed in the sample here: https://github.com/Azure-Samples/AzureMapsCodeSamples/pull/127/files#diff-d4eb4b59d1622cb7893bb4ec1591fc9bc9459414d0976b651861728bbf9fb280
I'm not sure how long it will before the Azure Maps team accepts and deploys the pull request, so test out the sample here: https://rbrundritt.azurewebsites.net/Demos/AzureMaps/DraggableRoutes.html