I'm working on a GIS web app where a user can draw a polygon on a map (a Microsoft map) to define a region. The vertices are placed by right clicking on the map placing vertices at each click and when the user right clicks the first vertex it completes the polygon. After that a user can right click an edge to add a vertex on that edge. At any time, a user can left click to drag the existing vertices around the map. My only remaining hurdle is a way to allow the user to remove vertices from the polygon in a way that makes sense.

In our map application, we don't use info boxes or other map pop ups anywhere else, so doing so here seems a little uncharacteristic for the webapp as a whole. All of our controls are in dialogs that are free floating and not attached to locations on the maps.

  • 1
    If it's a web app, have you considered that right click causes problems with touch interfaces?
    – kastark
    Aug 2, 2012 at 11:13
  • We have a dedicated mobile site that we'll bring this code to. In that site, we can use touch oriented events to better accommodation the platform. Aug 2, 2012 at 13:34
  • How frequent is the act of deleting a vertex? Could you click to select the vertex, then use the delete key/backspace key to remove it?
    – drawtheweb
    Aug 3, 2012 at 12:05
  • The polygon as a whole defines a region on a map that trigger notifications when GPS enabled vehicles enter or leave that polygon. In application, my understanding is that once a polygon is created, it's unaltered for long periods of time. Deleting a vertex may be frequent during creation, but all editing is rare once the user settles. Aug 3, 2012 at 13:48

5 Answers 5


I'd question the use of using the right-click for actually adding content. If you look at most vector based drawing tools, the left click is always the primary action, right click being the secondary and/or contextual menu.

In this case, I'd say left click should add a new vertices, unless you are already clicking on an existing node, in which case it will move said node.

To remove a node, I'd suggest either a) adding remove node as a right-click contextual menu option and/or b) having a separate tool for removing a node.

  • We avoided left click because the user can still drag and map around while constructing the polygon. Aug 1, 2012 at 18:42
  • drag and drop the map* Aug 1, 2012 at 18:47
  • 2
    Seems like you are trying to combine a lot of tools into one. That can get tricky, obviously. I'd lean towards using separate tools (one for dragging the map, one for adding vertices, one for removing them) and then maybe use keyboard modifiers or the contextual menu as shortcuts for power users.
    – DA01
    Aug 1, 2012 at 22:51
  • Instead of making the user explicitly switch to dragging the map while making a polygon, you can automatically slew the map at a reasonable rate when the mouse reaches the edge whenever in polygon-draw mode. This is a common technique in graphics applications, and similar to what's done with drag and drop in many apps. Aug 2, 2012 at 12:52

If the user can drag vertices around the map, then one way to get rid of a vertex is to drag it on top of an adjacent one. While that's being done, the connecting line reduces to zero length and landing one vertex on top of another to merge them is the logical conclusion.

  • That would be good if the vertices do not have any attached information, and dragging from the middle of a line creates a new vertex. It's less than ideal if vertices hold information and a user might want to place vertices close together.
    – supercat
    Jan 16, 2014 at 22:26

Make each vertex selectable and have a Delete menu item, perhaps along with the delete key as an accelerator. If you need to distinguish selecting a vertex from selecting the whole polygon, then either have a separate visible "handle" for selecting the whole polygon or have a separate tool for polygon and vertex actions.

The selection-menu syntax allows better discoverability than your current design, so you may want to do the same for adding a vertex (user selects a side then clicks "Add Vertex"). It also allows easier scaling to additional commands you may want now or in the future (e.g., toggle a side between straight and curved, get coordinates of vertex to move it to a precise geographic position).


As a user, I think it would be a natural where:

moving a vertex to a point on a straight line between the two neighboring vertices should be enough, as that makes the vertex in question redundant or 'deleted'.


You could look at editing "modes" - Add mode, where clicking creates a new vertex, and delete mode, where clicking removes vertices. This lets you keep the clicking basic and uncomplex without menus. I'd suggest you also implement an undo, for both adding and deleting vertices.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.