4

In our mapping application the user is able to look up an adress which is then indicated by a pin on the map. In cases where this pin would cover some underlying icons (can be clickable) I would like to provide the opportunity for the user to hide ("x") the pin so that the underlying icons become visible.

enter image description here

Is there a common pattern for this problem? Any advice or idea?

1
  • The solution should also work on touchscreens.
    – pseudonym
    Mar 8, 2014 at 15:25

3 Answers 3

2

There is no such pattern. Special difficulty is in touchscreen, because in other case you can show hide icon on hover.

I suppose clicking on pin shows some popover with information about pin — so to solve the problem add there "Hide pin" button/link. Also don't forget to add on map control panel button with text similar to "Restore hidden pins (XX)" (XX is amount of hidden pins). If there are no hidden pins — hide or disable this button (depends on behaviour of other controls of your project).

mockup

download bmml source – Wireframes created with Balsamiq Mockups

UPD: Another approach to the problem, without icon hiding.

mockup

download bmml source

3
  • The pin is just an indicator showing the location of the adress searched for without any click-action. All the popovers appear by clicking on the icons (POIs) within the map. Sometimes it can happen that the pin covers the icon partly or completely and the icon can't (easily) be clicked. We therefore want to make the pin removable.
    – pseudonym
    Mar 8, 2014 at 16:18
  • 1
    @pseudonym Oh, now I understand the difficulty. You may consider popular solution for situations when overlapping occures (not only with pin and icon, but also when several icons overlap — for instance, when the zoom level leads to high density of icons). When the user clicks on this overlapping point — the icons "pull apart" or tiny dialog with the list of all overlapping elements appears, and the user can more conveniently choose the necessary item (by clickin on it). Something similar is made in Android Chrome with low level of page zoom when the user touches one of hyperlinks. Mar 8, 2014 at 17:57
  • @pseudonym I've added visualization of this solution in the answer Mar 8, 2014 at 18:05
1

... without any click-action.

If the pin does not currently have any click-action then you could include a close icon on the pin itself and give it a click-action (click to close):

close icon on pin itself

However, this does go against convention a bit, as users often expect to click the pin to get more information. Although with a big red cross maybe this message is made clear?

Alternatively you could simply have a Hide Pins button/icon either on the corner of the map (overlaying the map), or just off it?

1

Potential solutions:

  • Use a simple marker (like a pulsating circle) to indicate the search location, this will allow your users to still see other features in close proximity
  • Zoom the map to a larger scale (street level) which in most cases is desired anyway and has the advantage of spreading features out
  • Depending on the reason and type of the search opening an info window with action buttons could be a desired next step so that users start another workflow right after, e.g. we've added 'Analyze property' or 'Find ... around me' in the past. In that way there is less emphasis on the actual visual analysis of the map and you wouldn't run into your issue
  • Yet another approach is to show an info window with a large scale map inside - but that's just a crazy idea ;)

Cheers

0

Your Answer

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

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