Azure Maps - Drag & Drop Labels for Polygons and Symbols

Question

Hi,

In my current Bing Maps API application, I've created the ability to show and customize labels for polygon and pushpin (i.e. symbol) layers, either individually or for the whole layer. I also have created the ability to drag and drop those labels so that they can be individually positioned, as generally they will overlap each other.

I have successfully added a label layer using textOptions by creating an additional SymbolLayer for each of my Symbol and Polygon layers. This works well, but I think I may have run into a dead end when trying to come up with a solution to allow the user to reposition the labels (i.e., dragged and dropped).

What would be the approach to enable the ability to drag and drop labels in order to individually position them so that they are all visible and legible (not overlapping).

Thanks,

Ken

Answer 1

I suspect you mean Azure Maps and not Bing Maps. Bing maps is an older map platform that is being retired and doesn't have a SymbolLayer class.

With symbol layers it is possible to add some logic to drag symbols/text around however the performance isn't great since the symbol layer is rendered in the HTML canvas (WebGL) and each move creates a "repaint" of the map. Here is a sample of how to do this: https://samples.azuremaps.com/?sample=draggable-symbols

When it comes to draggable points on the map, the HtmlMarker class is much smoother since it's a simple CSS position change. You can try this out here for comparison: https://samples.azuremaps.com/?sample=draggable-html-marker

If you have a lot of labels being displayed, you will likely want to keep them rendered in the Symbol layer for performance, but to get smoother dragging, hide the selected symbol, then use an HTML marker to drag a copy of the symbol to a new position, then update the original symbol points coordinates in the data source and show it again.