Delete a vertice of polygon on edited shape

Question

Delete a vertice of polygon on edited shape

Jérémie Perez 1

Hi,

I'm moving a web app from Bing map to Azure maps. In this web app, I using polygon to delimited the delivery area.

On azure maps, I succeed to edit a shape using a method related to the ticket azure-drawing-tools-module-default-selected-shape.html

With this method, I can modify my polygon, add new vertice but I can't delete it.
Furthermore, when the polygon is on edition mode, I can't move on the map.

Any ideas on how to achieve this?

António Sérgio Azevedo 7,671 Reputation points Microsoft Employee Moderator

2020-11-27T18:55:38.757+00:00

Hello @Jérémie Perez , thank you for bringing your question to Microsoft Q&A.

As this is still an unsupported method like disclosed by @RickyBrundritt-9609 , I would expect some issues - like deleting the polygon.

Can you please share with us the code you are using and tentatives you did so far?

Thank you for your time in advance.
António Sérgio Azevedo 7,671 Reputation points Microsoft Employee Moderator

2020-12-14T15:45:53.947+00:00

Hello @Jérémie Perez ,
Please share with us if you have any other questions related with your original post. Otherwise could you go ahead and mark the below as answer so community members can benefit from a richer content? :)

Thank you so much.

2 answers

Your answer

António Sérgio Azevedo 7,671 Reputation points Microsoft Employee Moderator

2020-11-27T18:55:38.757+00:00

Hello @Jérémie Perez , thank you for bringing your question to Microsoft Q&A.

As this is still an unsupported method like disclosed by @RickyBrundritt-9609 , I would expect some issues - like deleting the polygon.

Can you please share with us the code you are using and tentatives you did so far?

Thank you for your time in advance.
António Sérgio Azevedo 7,671 Reputation points Microsoft Employee Moderator

2020-12-14T15:45:53.947+00:00

Hello @Jérémie Perez ,
Please share with us if you have any other questions related with your original post. Otherwise could you go ahead and mark the below as answer so community members can benefit from a richer content? :)

Thank you so much.

Answer 1

Support for deleting individual vertices is planned but won't be available until around mid-next year. There is no easy way to achieve this with the current drawing tools. It may be possible to handle this outside of the drawing tools some how (i.e. add your own handles/buttons to each vertices).

As for the map not panning. The drawing tools in Azure Maps have some advance interaction support which make it much easier for all users to use it (i.e. accessibility support). By default the drawing managers interaction type is set to hybrid which allows you to draw by dragging or clicking points. If you limit the interaction type to just clicking, you could then use the following code to get the map to support panning while drawing.

//Create an instance of the drawing manager and display the drawing toolbar.
drawingManager = new atlas.drawing.DrawingManager(map, {
    interactionType: 'click',
    toolbar: new atlas.control.DrawingToolbar({
        position: 'top-right'
    })
});

//When the drawing started, check to see if the interaction type is set to click, and if it is, re-enable panning of the map.
map.events.add('drawingstarted', drawingManager, () => {
    if (drawingManager.getOptions().interactionType === 'click') {
        map.setUserInteraction({ dragPanInteraction: true });
    }
});

Mark Phillips 151 Reputation points

2022-12-05T01:13:51.69+00:00

@rbrundritt is the feature to delete individual vertices implemented, and if not is there an up to date ETA?

If it has not been implemented, I had some thoughts on the functionality.

From looking at the atlas-drawing.js via the npm package it would appear a secondary drag handle on a line or polygon is "promoted" to a primary vertex, thereby supporting a pseudo create vertex function, Would it be possible to implement a pseudo delete vertex by conversely implementing a "demote" primary drag handle? Like promote, this demote would only apply to line and polygon and should only execute the actual demotion if the primary handle is within a certain distance of a neighbouring vertex primary handle. The feature could even be enabled via toolbar perhaps in case users don't want the behaviour.

Answer 2

I don't believe this feature was ever added, and I don't believe there is any plan to add it. I moved teams not long after my original post on this thread. There are a couple of ways to achieve this today. The approach I would likely try first is as follows:

Add a click event to the line and polygon layers of the drawing manager.
When the click event fires, check to see if the drawing manager is in edit mode (or no mode selected). If so, proceed.
Capture the shape that was clicked and calculate the closest position to the mouse position and get its index. It might be good to have a threshold for max distance offset. Store the shape and index in a temp variable, then show a popup asking with a delete button.
If the button is clicked, delete the vertex from the shape by getting all the positions/coordinates in the shape as an array (getCoordinates) then use splice to remove the position based on its index, then clear the temp variable. If the popup is closed without the button being clicked, or the drawing mode changes, ignore or clear the temp variable.

Here is a code sample. When you hover over a line or polygon the mouse pointer will change to let you know you can select a point. When clicked a popup appears with a delete button.

   <!DOCTYPE html>  
   <html lang="en">  
   <head>  
       <title></title>  
     
       <meta charset="utf-8" />  
       <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />  
     
       <!-- Add references to the Azure Maps Map control JavaScript and CSS files. -->  
       <link href="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.css" rel="stylesheet" />  
       <script src="https://atlas.microsoft.com/sdk/javascript/mapcontrol/2/atlas.min.js"></script>  
     
       <!-- Add references to the Azure Maps Map Drawing Tools JavaScript and CSS files. -->  
       <link rel="stylesheet" href="https://atlas.microsoft.com/sdk/javascript/drawing/1/atlas-drawing.min.css" type="text/css" />  
       <script src="https://atlas.microsoft.com/sdk/javascript/drawing/1/atlas-drawing.min.js"></script>  
     
       <script>  
           var map, drawingManager, vertexState, popup;  
           var maxThreshold = 15; //Click must be within 15 pixels of a coordinate.  
     
           function GetMap() {  
               //Initialize a map instance.  
               map = new atlas.Map('myMap', {  
                   view: 'Auto',  
     
                   //Add authentication details for connecting to Azure Maps.  
                   authOptions: {  
                       authType: 'subscriptionKey',  
                       subscriptionKey: '[YOUR_AZURE_MAPS_KEY]'  
                   }  
               });  
     
               //Wait until the map resources are ready.  
               map.events.add('ready', function () {  
     
                   //Create an instance of the drawing manager and display the drawing toolbar.  
                   drawingManager = new atlas.drawing.DrawingManager(map, {  
                       toolbar: new atlas.control.DrawingToolbar({  
                           position: 'top-right',  
                           buttons: ['draw-line', 'draw-polygon']  
                       })  
                   });  
     
                   //Set event on the drawing manager.  
                   map.events.add('drawingmodechanged', drawingManager, clearState);  
     
                   //Exit drawing mode after draiwng completed.  
                   map.events.add('drawingcomplete', drawingManager, () => {  
                       drawingManager.setOptions({ mode: 'idle' });  
                   });  
     
                   //Get the line and polygon layers from the drawing manager and add click events to them.  
                   var layers = drawingManager.getLayers();  
     
                   //Get preview rendering layers from the drawing manager and modify line styles to be dashed.  
                   var previewLayers = drawingManager.getPreviewLayers();  
     
                   var targetLayers = [layers.lineLayer, previewLayers.lineLayer, layers.polygonOutlineLayer, previewLayers.polygonOutlineLayer];  
     
                   map.events.add('click', targetLayers, shapeClicked);  
     
                   //When the mouse leaves the item on the layer, change the cursor back to the default which is grab.  
                   map.events.add('mouseout', targetLayers, function () {  
                       map.getCanvas().style.cursor = 'grab';  
                   });  
     
                   //When the mouse is over the layer, change the cursor to be a pointer.  
                   map.events.add('mouseover', targetLayers, function () {  
                       map.getCanvas().style.cursor = 'pointer';  
                   });  
     
                   //Create a popup and add a close event to it.  
                   popup = new atlas.Popup();  
                   map.events.add('close', popup, clearState);                  
               });  
           }  
     
           function shapeClicked(e) {  
               var mode = drawingManager.getOptions().mode;  
     
               if (mode === 'edit' || mode === 'idle') {  
     
                   var shape = e.shapes[0];  
                   var position;  
     
                   //Default state.  
                   vertexState = {  
                       shape: shape,  
                       ring: 0,  
                       idx: 0  
                   };  
     
                   //Get nearest coordinate in shape to the clicked position.  
                   var shapeType = shape.getType();  
                   var coords = shape.getCoordinates();  
                   var minDist = Infinity;  
     
                   if (shapeType === 'Polygon') {  
                       for (var i = 0; i < coords.length; i++) {  
                           for (var j = 0; j < coords[i].length; j++) {  
                               var d = atlas.math.getDistanceTo(coords[i][j], e.position);  
                               if (d < minDist) {  
                                   vertexState.ring = i;  
                                   vertexState.idx = j;  
                                   minDist = d;  
                                   position = coords[i][j];  
                               }  
                           }  
                       }  
                   } else if (shapeType === 'LineString') {  
                       for (var i = 0; i < coords.length; i++) {  
                           var d = atlas.math.getDistanceTo(coords[i], e.position);  
                           if (d < minDist) {  
                               vertexState.idx = i;  
                               minDist = d;  
                               position = coords[i];  
                           }  
                       }  
                   } else {  
                       //Unsupported shape, ignore.  
                       return;  
                   }  
     
                   //Calculate the pixel distance between the mouse and the nearest vertex and ensure it is within the threshold distance.  
                   var p = map.positionsToPixels([position, e.position]);  
                   if (new atlas.PixelgetDistance(p[0], p[1]) > maxThreshold) {  
                       return;  
                   }  
     
                   //Create a DOM element to pass into the content of the popup.   
                   var popupContent = document.createElement('div');  
                   popupContent.style.padding = '10px';  
     
                   var button = document.createElement('input');  
                   button.type = 'button';  
                   button.value = 'Delete point';  
     
                   button.addEventListener('click', deleteVertex);  
     
                   popupContent.appendChild(button);  
     
                   popup.setOptions({  
                       content: popupContent,  
                       position: e.position  
                   });  
     
                   popup.open(map);  
               }  
           }  
     
           function clearState() {  
               if (vertexState) {  
                   vertexState = null;  
                   popup.close();  
               }  
           }  
     
           function deleteVertex() {  
               if (vertexState) {  
                   var shapeType = vertexState.shape.getType();  
     
                   if (shapeType === 'Polygon') {  
                       var coords = vertexState.shape.getCoordinates();  
     
                       //If first or last coordinate, need to remove two coords since the ring is closed. Then ensure the new ring is closed.  
                       if (vertexState.idx === 0 || vertexState.idx === coords.length) {  
                           coords[vertexState.ring] = coords[vertexState.ring].slice(1, coords.length - 2);  
                           coords[vertexState.ring].push(coords[vertexState.ring][0]);  
                       } else {  
                           coords[vertexState.ring].splice(vertexState.idx, 1);  
                       }  
     
                       //If less than 4 coordinates, polygon no longer valid. Delete it from the drawing manager.  
                       if (coords[vertexState.ring].length <= 3) {  
                           drawingManager.getSource().remove(vertexState.shape);  
                       } else {  
                           vertexState.shape.setCoordinates(coords);  
                       }  
                   } else if (shapeType === 'LineString') {  
                       var coords = vertexState.shape.getCoordinates();  
                       coords.splice(vertexState.idx, 1);  
     
                       //If less than 2 coordinates, line no longer valid. Delete it from the drawing manager.  
                       if (coords[vertexState.ring].length < 2) {  
                           drawingManager.getSource().remove(vertexState.shape);  
                       } else {  
                           vertexState.shape.setCoordinates(coords);  
                       }  
                   } else {  
                       //Unsupported shape, ignore.  
                       return;  
                   }  
     
                   clearState();  
               }  
           }  
       </script>  
   </head>  
   <body onload="GetMap()">  
       <div id="myMap" style="position:relative;width:800px;height:600px;"></div>  
   </body>  
   </html>

Mark Phillips 151 Reputation points

2022-12-06T05:09:18.75+00:00

Wow thanks for the code. It's definitely an option and possibly something I'd add as a secondary UX, but I really wanted to achieve this whilst a user is editing so they don't have to leave edit mode. For example, they create a new shape and add some vertices by dragging the mid points, and then realise they didn't want one of them. It would be nice to have a way of removing one without leaving the edit mode and then they carry on editing.

I answered in another Q&A, that you kindly answered, stating that I have a solution that achieves this but requires modification of the existing EditHelper to provide a "demoteHandle" if the user drags a vertex within a threshold of an adjacent vertex. I just don't know if license extends to allowing me to make this change. More than happy to supply the code if given direction on where to provide it.
Mark Phillips 151 Reputation points

2022-12-06T07:01:22.317+00:00

I shall give your code a go though as it may be more intuitive than my demote behaviour.
Mark Phillips 151 Reputation points

2022-12-06T09:27:50.58+00:00

This is close to a solution but not quite.

I'd prefer not to allow a user to remove vertices unless explicitly in edit mode. Easily rectified of course by the shapeClicked function's mode check. However, in edit mode, I'm finding the user has to get near to the vertex but not on it when they click else shapeClicked does not fire. This is likely due to the drag handle marker not having a click handler of course but then there's no way of supplying one either.
Mark Phillips 151 Reputation points

2022-12-06T12:43:03.753+00:00

The inability to click whilst over a handle seems to be only when drag or rotation is enabled. Disabling these for the edit mode propagates the click event to the target layers. I might have to just live with that for now.

Whilst trying to determine why this was the case I put console.log statements in various parts of atlasdrawing.js and in particular the _generateDragHandles function. This appears to be called once when drag and rotation are disabled, but is called each time a mousedown/mouseup combination occurs. Is this expected behaviour or a bug do you think?

Share via

Delete a vertice of polygon on edited shape

2 answers

Your answer