Azure maps, drawing toolbar, cancel the drawingerased event

Question

Via the drawing toolbar, is it possible to cancel the drawingerased event via a Yes/No confirmation dialog - click Yes to proceed with the event, click No to cancel the operation.

Answer 1

There is no built in functionality for this, however it might be possible to add a mouse down event to the layers within the drawing tools manager, and possibly capture the event before the event handler for erasing has fired.

I tried some experimenting and wasn't able to prevent the bubbling of the event (there might be a way and I'm just not seeing it now). However, you could simply watch the drawingerased event , grab the shape it passes into the event handler, show your dialog, and if the user wants to keep it, add it back to the drawing managers source drawingManager.getSource().add(shape);. Trying this out I found that this kits the drawing manager out of erase mode though. Here is a code sample:

var map, drawingManager;

        function GetMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-122.33, 47.6],
                zoom: 12,
                view: 'Auto',

                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',
                        style: 'light'
                    })
                });

                map.events.add('drawingerased', drawingManager, handleEvent);
            });
        }

        function handleEvent(shape) {
            if (drawingManager.getOptions().mode === 'erase-geometry') {
               // var shape = e.shapes[0];

                if (confirm('Are you sure you want to delete this shape?')) {
                    //Delete it!
                    drawingManager.getSource().remove(e.shapes[0]);
                } else {
                    //Keep it.
                    drawingManager.getSource().add(shape);
                }
            }
        }

Experimenting with another approach, I found that monitoring the mousedown, click and touchstart events to the underlying layers in the drawing manager, I could find which shape was being deleted, and if I displayed the window.confirm dialog, it would actually prevent the deletion. Here is a code sample for this approach (I only did it for polygon layers but you can add events to the other layers in the drawing manager):

var map, drawingManager;

        function GetMap() {
            //Initialize a map instance.
            map = new atlas.Map('myMap', {
                center: [-122.33, 47.6],
                zoom: 12,
                view: 'Auto',

                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({
                        buttons: ['draw-polygon', 'erase-geometry'],
                        position: 'top-right',
                        style: 'light'
                    })
                });

                var layers = drawingManager.getLayers();

                map.events.add('mousedown', layers.polygonLayer, handleMouseEvent);
                map.events.add('click', layers.polygonLayer, handleMouseEvent);
                map.events.add('touchstart', layers.polygonLayer, handleMouseEvent);
            });
        }

        function handleMouseEvent(e) {
            if (drawingManager.getOptions().mode === 'erase-geometry') {

                if (confirm('Are you sure you want to delete this shape?')) {
                    //Delete it!
                    drawingManager.getSource().remove(e.shapes[0]);
                } else {
                    //Keep it.
                }
            }
        }