Shape Toolbox Module

Author: Mike Garza

Category: Extension

Module Size: 30 kb (minified 12 kb)

Original Source: Concept:Bing Maps v7 Modules - Shape Toolbox Module

Version: 1.1


Update: Consider using the more robust Drawing Tools module.

The Shape Toolbox module allows you to add shape drawing functionality to any map.

Using the toolbar you can 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)


Last edited Jan 28 at 10:23 PM by rbrundritt, version 15


chadmarch Sep 16, 2014 at 11:53 PM 
Or just create a css file for the module, that way the javascript can reference and load the images y'all provided too without having to update the paths.

chadmarch Sep 16, 2014 at 11:52 PM 
Took me a while to figure out why the module was failing but you should also add a parameter to pass in a css file for the css injection. The whole module fails to load when 3rd party css files are loaded before the sites css (e.g. google fonts, jquery, bing, etc.).

ccpowell Mar 19, 2012 at 11:59 PM 
Ideas for future versions:
- Generate event when a user finishes a shape
- Add a "clear shapes" button
- Add a base URL config option so the images can be in a different directory without needing quite so many options.

rbrundritt Mar 7, 2012 at 3:23 PM 
Ideas for future versions:
- Use a single image sprite for th ebuttons to reduce the number of files.
- Seperate toolbar functionality from module so that so user can create custom toolbars.
- Add tie in for color picker or example in project of using a color picker.
- Test against Windows 8 JS control and ensure compatibility
- Add tie in for exiting edit mode i.e. ability to create custom button users can use to exit this mode.
- Add functionality for dragging the whole shape when editting. i.e. might want a circle to stay the same size but might want to reposition it.