Azure Maps draggable lines not working on mobile browsers

Question

Just looking into switching from Google Maps to Azure. I'm interested in creating draggable routes. The example given works fine on the desktop but not mobile browsers. Updated all and enabled WebGL etc. It's hard to add markers and routes will not drag.

Answer 1

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

Answer 2

Azure Maps provides a Web SDK that allows you to customize interactive maps with your own content and imagery. It supports rendering large data sets with high performance using WebGL. The SDK can be used to create draggable routes, and the example provided in the Basic snap to road logic sample demonstrates how to achieve this. However, it's important to note that the draggable routes may not work on all mobile browsers.

---

References:

• Tutorial: Migrate a web app from Google Maps
• Basic snap to road logic sample