none
Need help adding event handler for line in DrawingTools - V8 RRS feed

  • Question

  • I'm trying to build a distance tool using the DrawingTools module. I configure the module with a line that I want to modify/edit. While modifing the line, I want to capture the drawingChanged events, but I'm not sure how to do this to my existing line. 

    I noticed if I add the drawing manager, it allows me to capture the events, but I dont want that full control added to the map, and I dont need all of that going on. I just want to edit my simple line and capture the drawingChange events. Below is my code thus far.

    <!DOCTYPE html>
    <html>
        <head>
          <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
          <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol'></script>
          <script type='text/javascript'>
            	    var map;
            	    var currentZoom = 7; 
            	    var line;
    
                        function loadMap()
                        {
            				map = new Microsoft.Maps.Map(document.getElementById('map'), {
            					center: new Microsoft.Maps.Location(25, -90),
            					zoom: currentZoom,
            					mapTypeId: Microsoft.Maps.MapTypeId.aerial,
            					showDashboard: false,
            					disableZooming: false
            				});
    
               				var center = map.getCenter();
                            var Location = Microsoft.Maps.Location;
                            var tools;
    
                            line = new Microsoft.Maps.Polyline([new Location(center.latitude +1, center.longitude), new Location(center.latitude +1, center.longitude +1)], { strokeColor: new Microsoft.Maps.Color(255, 0, 0, 0) });
                            Microsoft.Maps.loadModule('Microsoft.Maps.DrawingTools', function () {
                                    tools = new Microsoft.Maps.DrawingTools(map);
                                    tools.edit(line);
                                    Microsoft.Maps.Events.addHandler(line, 'drawingChanged', function () { console.log('drawingChanged'); });
                                /*
                                    tools.showDrawingManager(function (manager) {
                                    Microsoft.Maps.Events.addHandler(manager, 'drawingChanged', function () { console.log('drawingChanged'); });
                                    });
                                */
                            });
                        }
            </script>
             <style type="text/css">
             #map {
             	width: 100%;
    		    height: 100% !important;
    		     !important;
            }
        	</style>
        </head>
        <body onload='loadMap();'>
            <div id="map"></div>
        </body>
    </html>

    Tuesday, July 19, 2016 10:52 PM

Answers

  • There are plans to add the ability to customize the toolbar display of the drawing manager. This likely won't be available till the fall.

    The drawingChanged event is for the drawing manager, not for individual shapes. Note that the drawingChnged event only fires after editing has stopped when using the drawing manager. Currently there isn't an easy way to do what you want other than to have either have a button to stop the editing and then do you work after than is clicked.

    I had a similar request where someone wanted an event that fired after any of the shapes options or locations changed. In V7 of Bing Maps we had an entityChanged event that did this. I'll have the devs look at expose this event in V8.


    [Blog] [twitter] [LinkedIn]

    Wednesday, July 20, 2016 4:49 PM