Bing Maps v8 JS API

Question

I have a very simple Bing maps program where I want to allow the user to draw one shape on the map, I've got the drawing tools and everything set up however Bing's events don't seem to fire in the correct way -

Drawing started - fires when I change my drawing tool to either a line or a polygon

Drawing Changed - fires when I change my drawing tool to either a line or a polygon

I simply want to clear the existing polygons from the map when I begin to draw a new polygon - however making a call to the getPrimitives function on the drawing manager clears the drawing mode, So then I thought about caching the drawing mode, reading the primitives to delete them and then resetting the drawing mode but then the setDrawingMode method on the drawing Manager calls the drawing started again which triggers the whole process again.

Does anyone know how to overcome this.

rbrundritt rbrundritt · Accepted Answer · 2017-05-05T16:38:06

Does look odd that the drawing started event is firing when you click the mode. Will have the team look into that.

However, what you are trying todo would have some potential issues. If you clear the drawing manager when the user has started drawing a polygon on the map, that polygon will also be removed from the map as well. What you can do is when finished drawing a polygon, is move it to a separate layer, then you can clear that layer without effecting the drawing manager. If you are only interested in drawing polygons, you don't even need the drawing manager as you can handle this yourself using the drawing tools and a button. For example: http://bingmapsv8samples.azurewebsites.net/#DrawingTools_CreateShape

Here is a code sample that achieves what you are asking using the drawing manager:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type='text/javascript'>
    var map, baseLayer, drawingManager;

    function GetMap() {
        map = new Microsoft.Maps.Map('#myMap', {
            credentials: 'YourBingMapsKey'
        });

        //Load the DrawingTools module
        Microsoft.Maps.loadModule('Microsoft.Maps.DrawingTools', function () {
            //Create a base layer to add drawn shapes.
            baseLayer = new Microsoft.Maps.Layer();
            map.layers.insert(baseLayer);

            //Create an instance of the DrawingTools class and bind it to the map.
            var tools = new Microsoft.Maps.DrawingTools(map);

            //Show the drawing toolbar and enable editting on the map.
            tools.showDrawingManager(function (manager) {
                drawingManager = manager;

                Microsoft.Maps.Events.addHandler(drawingManager, 'drawingEnded', function (e) {
                    //When use finisihes drawing a shape, removing it from the drawing layer and add it to the base layer.
                    var shapes = drawingManager.getPrimitives();

                    if (shapes) {
                        drawingManager.clear();
                        baseLayer.add(shapes);
                    }
                });

                Microsoft.Maps.Events.addHandler(drawingManager, 'drawingChanging', function (e) {
                    //When the drawing is changing, clear the base layer.
                    baseLayer.clear();
                });
            })
        });
    }
    </script>
    <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
</head>
<body>
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div>
</body>
</html>

Here is a similar code sample that does this without the drawing manager and a custom button to start drawing a polygon.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type='text/javascript'>
    var map, baseLayer, tools, currentShape;

    function GetMap() {
        map = new Microsoft.Maps.Map('#myMap', {
            credentials: 'YourBingMapsKey'
        });

        //Create a base layer to add drawn shapes.
        baseLayer = new Microsoft.Maps.Layer();
        map.layers.insert(baseLayer);

        //Load the DrawingTools module.
        Microsoft.Maps.loadModule('Microsoft.Maps.DrawingTools', function () {
            //Create an instance of the DrawingTools class and bind it to the map.
            tools = new Microsoft.Maps.DrawingTools(map);

            Microsoft.Maps.Events.addHandler(tools, 'drawingChanging', function (e) {
                //When the drawing is changing, clear the base layer.
                baseLayer.clear();
            });


            //When the user presses 'esc', take the polygon out of edit mode and re-add to base map.
            document.getElementById('myMap').onkeypress = function (e) {
                if (e.charCode === 27) {
                    tools.finish(shapeDrawn);
                    currentShape = null;
                }
            };
        });
    }

    function drawPolygon() {
        //Stop any current drawing.
        if (currentShape) {
            tools.finish(shapeDrawn);
            currentShape = null;
        }

        //Create a new polygon.
        tools.create(Microsoft.Maps.DrawingTools.ShapeType.polygon, function (s) {
            currentShape = s;
        });
    }

    function shapeDrawn(s) {
        baseLayer.add(s);
    }
    </script>
    <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=GetMap' async defer></script>
</head>
<body>
    <div id="myMap" style="position:relative;width:600px;height:400px;"></div><br />
    <input type="button" onclick="drawPolygon()" value="Draw Polygon" />
</body>
</html>

Bing Maps v8 JS API

1 Answers