Azure Maps - Drag & Drop Labels for Polygons and Symbols

Ken Bowman 171 Reputation points
2024-08-13T19:33:08.6433333+00:00

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

Azure Maps
Azure Maps
An Azure service that provides geospatial APIs to add maps, spatial analytics, and mobility solutions to apps.
700 questions
0 comments

1 answer

Sort by: Most helpful
Most helpful Newest Oldest
  1. rbrundritt 17,491 Reputation points Microsoft Employee
    2024-08-14T21:38:18.27+00:00

    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.

    1 person found this answer helpful.

Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.