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>
