Drawing Tools - Button to Finish Drawing

hi all,

i've started migrating bing maps 8 , using drawing tools allow users draw points, lines , polygons on maps used run spatial searches.

my setup completly standard. basic map drawingtools module loaded.

i dont find method of ending drawing particularly intuative (having click on drawing tool). when drawing manager detacts drawing started calls functin displays div 'finish' button:

    //load drawing tools modules.
    microsoft.maps.loadmodule('microsoft.maps.drawingtools', function () {
      tools = new microsoft.maps.drawingtools(map);
      tools.showdrawingmanager(function (dmanager) {
        drawingmanager = dmanager;

        drawingmanager.drawingstarted.add(function () {
          console.log('drawing started.');
          startdrawing();
        });

      });
    });

  function startdrawing() {
    //show drawing div end drawing button.
    $('#drawing').removeclass('hidden');
  }

but how can use 'finish' button complete current drawing?

i've tried calling function on button press:

  function finishdrawing() {
    //finish shape.
    console.log('finishing shape...');
    var newshape = tools.finish();
    console.log(newshape);
    $('#drawing').addclass('hidden');
  }

but 'undifined' newshape.

can advise?

thanks

steve

there several ways finish drawing shape built in; press other button on toolbar, press esc button, double click map. these common ways other drawing tools in other mapping platforms work. said can programmatically exit drawing mode well. use setdrawingmode function of drawing manager none. example:

<!doctype html> <html> <head>     <title></title>     <meta charset="utf-8" />     <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=getmap' async defer></script>     <script type='text/javascript'>     var map, drawingmanager;      function getmap()     {         map = new microsoft.maps.map('#mymap', {             credentials: 'your bing maps key'         });          //load drawingtools module         microsoft.maps.loadmodule('microsoft.maps.drawingtools', function () {             //create instance of drawingtools class , bind map.             var tools = new microsoft.maps.drawingtools(map);              //show drawing toolbar , enable editting on map.             tools.showdrawingmanager(function (manager) {                 //store reference drawing manager useful later.                 drawingmanager = manager;                  //add events drawing manager track drawing state.                 microsoft.maps.events.addhandler(drawingmanager, 'drawingstarted', function () {                     document.getelementbyid('stopdrawingbtn').disabled = false;                 });                  microsoft.maps.events.addhandler(drawingmanager, 'drawingended', function () {                     document.getelementbyid('stopdrawingbtn').disabled = true;                 });             })         });     }      function stopdrawing() {         //change drawing mode none stop drawing.         drawingmanager.setdrawingmode(microsoft.maps.drawingtools.drawingmode.none);     }     </script> </head> <body>     <div id="mymap" style=";width:600px;height:400px;"></div>     <input id="stopdrawingbtn" type="button" value="stop drawing" disabled="disabled" onclick="stopdrawing()"/> </body> </html>

---

[blog] [twitter] [linkedin]

Bing Maps  >  Bing Maps Web Controls