Bing Map - Polygon Drawing End Event Issue RRS feed

  • Question

  • Hi, Please refer to below code : 

    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {});
    Microsoft.Maps.loadModule('Microsoft.Maps.DrawingTools', function () {
        var dt = Microsoft.Maps.DrawingTools;
        var da = dt.DrawingBarAction;
        var tools = new dt(map);
        tools.showDrawingManager(function (manager) {
            printText('Drawing manager loaded.');
                drawingBarActions: da.polyline | da.polygon | da.erase
            Microsoft.Maps.Events.addHandler(manager, 'drawingStarted', function () { printText('Drawing started.'); });
            Microsoft.Maps.Events.addHandler(manager, 'drawingEnded', function () { printText('Drawing ended.'); });
            Microsoft.Maps.Events.addHandler(manager, 'drawingErased', function () { printText('Drawing erased.'); });
    		Microsoft.Maps.Events.addHandler(manager, 'drawingChanged', function () { printText('drawingChanged'); });

    Reference :

    Steps : 
    1. Create a Polygon

    2. Firing events will be listed in the right panel. (Note : Though Polygon draw is done, DrawEnd event didn't fire)

    3. Again click on Polygon drawing icon, to create a new Polygon. (Now only DrawEnd event fires)

    So the problem I have is, how to detect when the Polygon is been created ? (I want to detect an event soon after the Polygon is been created)

    Wednesday, January 23, 2019 12:06 PM


All replies

  • Hi,

    The map's double click event handler can be used to detect when the drawing tool editing exits and the shape primitive has been created. You can wire up the handler from your existing drawingStarted event handler and then remove it after the polygon has been added.

    This should give you an idea,

    Microsoft.Maps.Events.addHandler(manager, 'drawingStarted', function () { 

    var dblclickevent = Microsoft.Maps.Events.addHandler(map, 'dblclick', function (e) { drawingTools.finish(function (s) { // Remove the map doubleclick event handler Microsoft.Maps.Events.removeHandler(dblclickevent); // Add any post-processing you may need to do on the new polygon here }); });


    Hope this helps.


    Prakash Surendra


    Wednesday, January 23, 2019 3:53 PM
  • FYI: I am able to get both the drawing Start and drawing End but this is of the drawing session, not the drawing of a specific polygon.
    Wednesday, January 23, 2019 5:39 PM
  • @Prakash

    Hi, Thank you for the information. But drawingTools.finish does not fire in my end. I tried with the same reference sample. In there also it doesn't fire..

    Thursday, January 24, 2019 7:35 AM
  • @IoTGirl : I want to catch the event when Polygon created. |
    Same like Google Map's below event. 

     google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {

    Thursday, January 24, 2019 7:37 AM
  • Hi Pabodha,

    Maybe looking at a more complex sample would help.  I think you are getting confused between the drawing session and the item that is being drawn.  

    Full Toolbar:

    Simple custom toolbar:

    These both offer a link to the GitHub solution and there are other samples in the left menu that might also be of interest to you.



    Thursday, January 24, 2019 5:51 PM