Bing Maps AJAX Control v7 Dynamic Module - Draw Shape Module

The Draw Shape module allows you to add shape drawing functionality to any map. Click on the either button below to show or hide the drawing tool bar on the current map.

Select the desired shape to add to the map. When drawing a given shape, simply click on the appropriate location on the map to draw the shape. (there is no need to hold down the left mouse button). Once completed, press the escape button or double click to exit drawing mode.

To edit a given shape, just click on the shape and drag handles will be displayed. Press Delete to delete the selected shape. Press escape to exit edit mode. (push pins can just be dragged)





Usage:

To implement the module:
		// Register and load a new module
		Microsoft.Maps.registerModule("DrawShapeModule", "your-path-to/ShapeToolboxModule.js");
		Microsoft.Maps.loadModule("DrawShapeModule", { callback: myModuleLoaded });
		
Call back function to initialize:
		function myModuleLoaded() {
			//Create new instance of module
			myToolbox = new ShapeToolboxModule(map);
		}
		
Display toolbar:
		myToolbox.show();
		
Hide toolbar:
		myToolbox.hide();
		
Set Options:
        myToolbox.setOptions({
            shapeStrokeThickness : 5
        });
		
Options:

Property Default Description
targetLayer map.entities Default layer to add shapes
maskStrokeColor Microsoft.Maps.Color(200, 100, 100, 100) Line color of shape mask
maskFillColor Microsoft.Maps.Color(000, 000, 000, 000) fill color of shape mask (polygon only)
maskStrokeThickness 2 line width of shape mask
maskStrokeDashArray 2 2 dash pattern of shape mask
shapeStrokeColor Microsoft.Maps.Color(200, 0, 0, 200) Line color of shape
shapeStrokeThickness 2 line width of shape
shapeFillColor Microsoft.Maps.Color(100, 000, 100, 000) fill color of shape (polygon only)
toolBarPolygonIcon images/polygonIcon.png Icon for polygon
toolBarPolygonHoverIcon images/polygonHoverIcon.png Hover icon for polygon
toolBarPolygonActiveIcon images/polygonActiveIcon.png Active icon for polygon
toolBarPolylineIcon images/polylineIcon.png Icon for polyline
toolBarPolylineHoverIcon images/polylineHoverIcon.png Hover icon for polyline
toolBarPolylineActiveIcon images/polylineActiveIcon.png Active icon for polyline
toolBarPushPinIcon images/pushpinIcon.png Icon for push pin
toolBarPushPinHoverIcon images/pushpinHoverIcon.png Hover icon for push pin
toolBarPushPinActiveIcon images/pushpinActiveIcon.png Active icon for push pin
toolBarRectangleIcon images/rectangleIcon.png Icon for rectangle
toolBarRectangleHoverIcon images/rectangleHoverIcon.png Hover icon for rectangle
toolbarRectangleActiveIcon images/rectangleActiveIcon.png Active icon for rectangle
toolbarCircleIcon images/circleIcon.png Icon for circle
toolbarCircleHoverIcon images/circleHoverIcon.png Hover icon for circle
toolbarCircleActiveIcon images/circleActiveIcon.png Active icon for circle
DragHandleImage images/DragHandleWhite.gif Image for default drag handle
DragHandleImageActive images/DragHandleGreen.gif Image for active drag handle
DragHandleImageHeight 10 Height for default and active drag handle image
DragHandleImageWidth 10 Width for default and active drag handle image
DragHandleImageAnchor Microsoft.Maps.Point(5, 5) Anchor Point for drag handle image
shapeMaskStrokeColor Microsoft.Maps.Color(200, 100, 100, 100) Line color of shape mask
shapeMaskFillColor Microsoft.Maps.Color(000, 000, 000, 000) fill color of shape mask (polygon only)
shapeMaskStrokeThickness 2 line width of shape mask
shapeMaskStrokeDashArray 2 2 dash pattern of shape mask