How can I represent multiple pins at the same location on a map?

Question

I'm building a very small app that allows my users to post content to a map.

The home screen of the app contains a map with all of the posts (as seen below).

PROBLEMS

01 - if a user posts a post from the same area, two pins will be on top of each other so you won't be able to access one of them

02 - if a lot of content is posted it will be hard to click on each pin

03 - when you zoom all the way out, there will be too many pins

Can anyone recommend trying anything else please?

Answer 1

"How do I do clustering on a map correctly" is a common question in mapping applications.

Short answer: Clustering doesn't work. There is no such thing as good clustering UX, as clustering is not good UX.

The reason is simple: The user is either interested in an area, or a point. He might be interested in the density of an area (population, number of ice cream shops within 5 minutes of walk, whatever), but points have no density.

The "average" of two points will be neither of them. Sometimes this is meaningful (the average of the stones of Stonehenge might represent the monument), but most of the time, it does not make any sense.

This perhaps explains why neither Google Maps, Nokia Maps, or any other large-scale map providers don't have clustering on their map. Note: most of them had it in concept phase, Google Maps' even reached A/B test stage when it was dropped.

Of course, like for every UX rule of thumb, there are exceptions. So far I have seen only one: property adverts. It is a meaningful information how many properties are on sale in a given area, albeit the one I saw had the notion of districts and neighborhoods for clustering. (it's http://otthonterkep.hu/ )

The solution is also connected to this: you should decide whether you have areas, or point of interests. Of course, what might be a point from "above" could be an area when looked closely: for example, a city.

An area can have density, and then you can do density coloring of the area. If you don't have defined geographical areas for whatever reason, you might use heatmaps, or cell-based density information (which are essentially artifical areas).

Clustering is essentially density information shown as points - again, with no attached meaning.

Display density based on regions if possible, always show top questions of any view as a list beneath the map, and show individual questions only once zoomed in enough so that they can be safely tapped independently.

Suppose you consider heatmaps, in case you don't have regions.

One of my map products once defined maximal heat of restaurants as any point, from where at least 20 restaurants are within 5 minutes of walking distance, medium heat was 10 restaurants, and no heat was defined for any place where at least 2 restaurants weren't available - so single-standing structures wouldn't cause "heat", as heat was about choice and abundance.

This was zoomlevel-agnostic - a common mistake what heatmap providers do is that they measure in pixels instead of meters, therefore their map tells a different story on each zoomlevel.

Once zoomed in, you've seen places meeting the best 10% criteria (or, to be more precise: the ones who were over the neck of the exponential curve of ratings) highlighted with big icons, while the rest of them were little dots - something like Google Maps does if it still does it for "restaurant" searches.

I hope it answers your questions.

The author works at a map-centered company, had 2 map-based startups, and worked for one of the biggest map providers of the word as a UX Designer/Prototyper at the Map Design department.

Answer 2

You're already communicating two dimensions of information with your icons:

• Number of likes
• Type of icon (question, post)

You want to add a third dimension (multiple posts per icon). It's going to be difficult to do this because:

• Having icons communicate more than 2 dimensions of information is not a good idea.
• You are going to need some way to aggregate the number of posts / questions for a multiple icon.

Here's one possibility:

• Use the + sign to denote some kind of aggregation of the likes contained within the multi-icon (e.g. select the modal number of likes, or the total number of likes.
• Tapping on a multi-icon brings up a modal panel with the posts/questions in that location, then user can select which one she wants to see.

---

Implementing this will be really hard

Google maps, Yelp, Hotels.com, and many others have failed to do a good job here because the algorithms for geographical clustering aren't easy.

• For example, imagine you have 10 points in a straight line.
• Do you group them in to 2 groups of 5, 3 groups of 3 or 4, or 5 groups of 2?
• Where do you determine the location of the multi-pointer? How are you going to do this in real time as the user zooms in and out of the map?

If you do succeed in creating decent zoomable clustering, please drop a note to show us your results because someone might buy your company just for that algorithm!!

Answer 3

This is a common problem with maps. There is a solution called MarkerClustering. You can read more about it on the web. Here are some starting points: https://developers.google.com/maps/articles/toomanymarkers

And here is an example of its implementation: http://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.388.html