Bing Maps Concepts
(formerly Virtual Earth)
Mike Garza   
VEMaps@garzilla.net   

   
Concept: Polygon Drag Handles

In this example we will look at one way to implement “drag handles” for editing a polygon. This example builds off of the Polyline Drag Handle example. You may come across a situation when an existing polygon needs to be modified. Implementing drag handles to adjust the points on the polygon is an effective means of editing, as it allows the end user to interact directly with the polygon on the map. In the absence of such functionality, the end user would need to either re-create the polygon or manually key in new values for a given point.

In the example to the right, functionality has been added to edit the existing polygon on the map. Please note that the polygon is hard coded to be a hexagon based off of the center of the map. At the bottom of the map there is button to begin the editing process.

When the button is clicked, drag handles will appear at each point in the polygon. When you click on a given drag handle you can move it to a new location on the map and drop it. When the dragging begins an additional polygon (mask) is displayed to illustrate how the revised polygon will look. Once the drag handle is dropped, the mask is hidden and the original polygon is updated with the new point.

Walk Through:

After reading that you might be thinking “…wow, Déjà vu…”. Well that would be correct. The above narrative is just about identical to the narrative for the Polyline Drag Handle example, because this example is almost identical.

I had intended to follow up the Polyline Polyline Drag Handle with a Polygon version and was pleasantly surprised at how easy of a migration it was. The only real change in the code, aside from the initial creation of the polygon points, was changing all of the VEShapes that were polylines to polygons. Yes, there are some other little “tweaks, but for the most part that was all that was involved.

That being the case, there is nothing really to walk through. To understand how this example works, just refer to the Polyline Drag Handle example and where you see the word “poly line”, think polygon.

As always, feedback, comments or questions are welcome. I look forward to hearing from you.

Return to Home Page

©2007-2014, Mike Garza, All Rights Reserved