I have a question regarding putting/dragging and dropping annotations on a map or plan. Is there a standard way of doing this?

The annotation has flexible dimensions and is placed on the map/drawing and has a corresponding set of data points in a grid.

If adding a row to the grid also placed a movable, re-sizable square outline on the map/drawing for the user to move to the correct position and resize it, how would you then transition to adding the data points to the grid?

Alternatively we could add a row to the grid and then DnD that row onto the map in the correct position for the user to resize if required.

Thanks for reading!


I have attached rough sketches of what I intend to do. The first image is showing the grid next to the map/plan. The second image shows an alternate way of putting annotations onto the map/plan; dragging and dropping from the key, and also drawing a polygon onto the image with various fills indicating different types of corrosion.

One of my questions is essentially - how do I indicate that a polygon can be drawn on the image, and how does the interaction actually work (how does the user initiate the drawing? Clicking and holding the desired fill produces a pen cursor which allows the user to draw with straight lines?)

The other is how to deal with adding a new row to the grid producing a corresponding annotation on the map/plan?

I hope the sketches help understanding of the problem, I've found it really difficult to articulate.[![First image showing map/plan with corresponding grid.

First image showing the map/plan and corresponding grid

Second image showing the map/plan and interactive key

  • 1
    Do you have any images of what you have done/designed already. Sep 27, 2017 at 11:47
  • 1
    This problem occupies a space in design where "standard approaches" are not exactly clear and obvious. If you've done any competitive research, you'll probably have found this. You're probably not going to get much response on a question like this, which is borderline "too broad" as it stands. Your best bet is to present what you have in the context of why you think it doesn't work. "My solution to this map problem presents this specific UX problem. How can I solve it?" A question in this format (where you've done the heavy lifting) accompanied by mockups will do much better on UXSE.
    – dennislees
    Sep 27, 2017 at 16:24
  • I can't visualise what is being described here, so +1 for the request for a sketch or screenshot of your solution. Sep 29, 2017 at 14:43
  • Questions about "is there a standard way of..." can usually be answered on your own by doing a competitive audit. Go look at other map software and see how they handle the issue. (Zillow.com allows area selection. Other real estate sites might as well.) Nov 10, 2017 at 15:24

1 Answer 1


Since your container is small, sooner or later, there will be a lot of markers. It will be confusing to separate the same elements. Maybe you would have to use something like marker clustering

Still for the small area, dont want to try a concept for adding a new marker, if the user would like to add a new marker a dialog comes up, with only the related functions and a big map, so less pain for them to position it more precize. And also to give a new function like after dragging a editable input field that is this what you meant? Just as a confirmation, or this can be visible all the time, so it would be up to the user to choose if adding via input or drag and drop.

After adding the markers, maybe the map to be displayed for full width and the grid would be also full widht under the map, as maybe you to display more data sooner or later, or for the long text.

For the grid, what about the select to be the first column, and adding a delet icon to each item for the last element.

In this example there a couple of great ideas of how to start a polygon draw on a map, here google solved it by selection what you want to do (polylines), double click on the map, that initiates the function then just adding the lines.

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.