Author: Ricky Brundritt
Category: Extension
Module Size: 81kb (minimized 39kb)


This module provides a set of tools for drawing and editing shapes on the map. In addition to being able to draw shapes you can add shapes to the base layer of  the drawing tools module and it will allow you to edit it. If the toolbarContainer is set with a DOMElement in the options it will generate a toolbar with drawing tools in it. You can specify which tool options should appear in the toolbar using the drawingModes and styleTools properties in the toolbarOptions. This module is a more robust and extendable version of the Shape Toolbox Module.

Live Demos:

Currently supports:

  • Drawing: Pushpins, Polylines, Polygons, Rectangles, Circles
  • Tasks: Erasing, Editting, changing shape style
  • Events: drawingStarted, drawingChanging, drawingChanged, drawingEnded, drawingErased, drawingModeChanged


The uncompressed version of the module contains lots of documentation that also powers intellisense in Visual Studio. To have intellisense work in your code add a reference to the full module to your JavaScript like this:

/// <reference path="/js/DrawingToolsModule/DrawingToolsModule.js"/>

Basic Implementation:

<!DOCTYPE html>
<meta charset="utf-8" />
<title>Drawing Tools Sample</title>

<!-- Bing Map Control references -->
<script type="text/javascript" src=""></script>

<!-- Our Bing Maps JavaScript Code -->
<link href="js/DrawingToolsModule/DrawingToolsModule.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
function GetMap() {
map = new Microsoft.Maps.Map(document.getElementById("myMap"), {
credentials: "YOUR_BING_MAPS_KEY"

//Register and load the Drawing Tools Module
Microsoft.Maps.registerModule("DrawingToolsModule", "js/DrawingToolsModule/DrawingToolsModule.js");

Microsoft.Maps.loadModule("DrawingToolsModule", {
callback: function () {
var drawingTools = new DrawingTools.DrawingManager(map, {
toolbarContainer: document.getElementById('toolbarContainer')
<body onload="GetMap()">
<div style="position:relative;width:800px;height:600px;">
<div id="myMap" style="position:relative; width:800px;height:600px;"></div>
<div id="toolbarContainer" style="position:absolute;right:2px;top:2px;"></div>

Here is a screenshot of the basic implementation when editing a polygon:


Last edited Jan 28, 2015 at 9:22 PM by rbrundritt, version 2


InnerWorld May 27, 2015 at 6:28 AM 
Hi, I have some problem with my custom events after using this module.
I describe my problem on stackoverflow:
Could I get some feedback ?