Adding Drawing Tools

The third Google Mercator example includes shows how to add drawing tools for rectangles, ovals, and polygons to your maps. This can be used to let the user define an area of interest on the earth for further analysis.

The OnLoad() function for this example creates a DIV element with a series of images for the user to click to select the tool. Each image calls a SelectTool() function with either a standard tool or the name of an item that is supported by the CMLayerItems class. The definitions for the standard tools are below.

• CMToolHandler.TOOL_NONE=0; // no tool (disables moving the background)
• CMToolHandler.TOOL_HAND=1; // pan the map (the hand)
• CMToolHandler.TOOL_INFO=2; // click to get information on features ("I" tool)
• CMToolHandler.TOOL_EDIT=3; // user is editing existing spatial data (not used)
• CMToolHandler.TOOL_ADD=4; // user is adding data (not used)
• CMToolHandler.TOOL_SELECT=5; // combined with INFO on the web (arrow tool)

The CMLayerItems class supports:

• Rectangle: A simple rectangle. Implementation is in the CMItemRect class.
• RoundedRectangle: A rectangle with rounded corners. Implementation is in the CMItemRoundedRect class.
• Oval: A closed or open polygon. Implementation is in the CMItemRect class.
• Polygon: A closed or open polygon. Implementation is in the CMItemPoly class.
• Curve: A closed or open polygon. Implementation is in the CMItemPoly class.
• Arrow : A closed or open polygon. Implementation is in the CMItemPolyArrow class.

Examine the SelectTool(TheTool) function and you'll see that if a standard tool is provided, it is just set into the view. Otherwise, CMLayerItemsToolHandler object is created and set as the tool handler. There is also a button with a handler that will get the coordinates for the first item added to the layer and display it in an alert box. Now you can add editable items to your web pages and find their coordinates.