I still don't understand how the dots help when multiple dots need to be at the exact same coordinates at the lowest zoom level. How do you open a list of them?
I'm working on a project (using Protimaps and MapLibre, even, so this is very timely for me) where users create groups at physical locations. If 12 groups choose the local public library's schedulable meeting room as their meeting space, how would anyone click to see the list of groups that use that one room? Wouldn't I just end up with what looks like one very dark dot?
I typically deal with dots at the same place as a single dot and, when clicked, open an infowindow/infopanel that will let people see all of the points’ data.
ie you do need to deal with this issue (by default, no mapping library will do it for you) - and most clustering librairies (or at least their default settings) will also not solve this for you.
The ui for what happens when a point (or even a cluster) is clicked but that point contains more than one point’s worth of data is its own separate problem basically
Does it end up a darker or at least fully opaque dot to show it's not the same as the individual dots elsewhere? Like from your example in the article, I might make that dot maroon (or some other color entirely) instead of red so people understand "there are multiple things here."
This has been my first adventure dealing with maps with user-generated points and I'm discovering how much goes on behind the scenes that I never noticed!
It’s not easy for sure and I’m not a designer or ui/ux expert - just been around maps for a while
I agree with you that the point itself could show that it’s special - or - rely on users tapping/clicking it and then show all the info
In a sense, maybe conveying that the point has more than one data point attached to it isn’t critical - as long as you can see everything inside when clicking it!
Feel free to email me, would love to jam/chat about this!
Checkout how leaflet does this, it is the "spiderfy" part of markercluster. So you click down into the number bubble, and at the lowest zoom explodes out into multiple point markers.
I think for my purposes, people would rather see a list of the groups meeting at that place than click individual identical markers arranged around the point to see what's there.
I can see why this would be helpful in other use cases though!
That is a good point (spiderfy is good if you want to show multiple icons and click on each one specifically).
If you do not like the cluster-marker, you could have an icon just list the total number at that location, and then on hover (or click for tooltip) show the table. And that may honestly be better than the spiderfy example for most applications now that I am thinking about it.
Maybe a better example, ESRI when you click a popup has a series of HTML, https://data-ral.opendata.arcgis.com/datasets/raleigh-police..., so if you click one of the grey circles it contains multiple points, you can basically go through different views (either all the elements or click through to a more detailed view of the individual point).
The clustered markers in leaflet are jarring (I like them, but when I show maps I make my wife she finds the transitions nauseating).
The default heatmaps for these maps are bad. Heatmaps should use filled contours so the gradations are more easily identified. (Continuous raster maps are blobby.) See the ascii glyph map in this post, https://andrewpwheeler.com/2015/06/12/favorite-maps-and-grap.... I think those should be static for various levels of zooms as well, and not recalibrated when zooming.
Another option (not shown here) is to just use polygons and aggregations, and when zoomed in can turn on that point layer (or just have it appear). Or can just make actual clusters (like DBSCAN).
Yeah, whatever approach to heatmaps was taken for the example in the article needed some work. It basically just turns into red when you zoom out. Whereas the opaque dots actually give you a nice sense of varying density.
Point datasets have two distinct modes of visualization. First is an aggregate view which serves to show you the trends and spatial distribution. Second is the individual view showing details about the point itself, its attributes, etc.
Clustering (for all its faults) is the only off-the-shelf technique for seamlessly switching between these two modalities without having to change the underlying data representation. Need more detail? Zoom in. And the zoom level is adaptive so it works with any scale.
There are better aggregation techniques (summing to a hexagonal grid, heatmaps, etc) but they generally require a separate calculation (possibly server side) and then switching to the raw source for the individual point view, either manually or at some hardcoded zoom level. It's not the same experience - it feels like two separate map layers instead of one integrated clustered layer.
This is mostly a matter of what's available in the mapping libraries. You could imagine building an alternative to clustering that calculates a heatmap on the fly when zoomed out, eventually revealing points as you zoom in. But presently this is something you'd have to DIY. For now, clustering is the only thing that works right out of the box.
This is one of the major gripes that real estate sales agents have.
I’ve consistently heard complaints from customers that they don’t like it. At this point, map technology has come far enough that we could visualize thousands of points using Cesium on consumer-grade hardware so I don’t think it’s a performance issue either.
When it comes to overlapping dots, we generally solve this by displacing the dots minimally so that they’re all still in the same building or same area but visibly different locations.
As somebody who makes maps for a living, I think clusters are overrated (I have had, on multiple occasions, had to talk people out of it). The leaflet extension that gives you a preview of the area covered by the cluster and allows you to click to zoom to the extent of cluster I do feel is a good setup for situations where just putting all the dots down isn't going to give you good information. That being said doesn't work great on mobile.
Also pour one out to google fusion tables which back in the day was the amazing way to get tons of dots onto a map.
The map in hotels.com does a good job of clustering. For example, searching for hotels in a high density area like NYC. Airbnb, conversely, does not seem to have any clustering. Properties vanish and reappear at various zoom levels.
I really enjoyed this article because it happens to focus on a problem I'm knee-deep in at the moment, although I'm not ready to throw clustering out the window just yet.
There's a deeper issue which the author touches on, showing too much information on a map. This is possible independent of technology limits depending on what level of focus you wish each point to have. For many maps, showing a bunch of small points is an elegant solution, the map turns into more of a data visualization. But a bunch of points tells you very little about a particular thing. It is rich in aggregated information and poor in specific information.
If Google Maps just gave you a bunch of points instead of labels, it would be less functional. Every city would just be a large collection of points. Great, that might be interesting if you want to visualize how the locations are distributed in the region, but you are probably looking at the map because you want to find a particular thing.
Clustering is the natural choice: show the most important thing out of all the points in the area. A label is important, a big circle with a number in it is the worst out all the options discussed. My issue with Google Maps is that there is no visual indicator that there are other points there, and that seems to be largely driven by the fact that it is a marketing platform.
I'm working on a map that uses a hybrid approach. Each map has a narrow focus and is tied to a particular community/interest: concerts, bear sightings, hostels, food trucks, whatever you want. For each point of focus, there is a label and a thumbnail. Showing a bunch of these all in the same place is a bad user experience, so it ranks them and shows the most important one, and the thumbnail is replaced by a number indicating there are other points of focus in the vicinity. Users can click on the item to get a side panel that shows a listing of all the points.
There are also other points on the map that are secondary to its focus, public transportation vehicles and other location points that the user can filter. These are displayed as little dots, similar to the example that the author provides. If you zoom in far enough, they become more than just dots.
In designing the user experience, I tried to make it like a map experience that you might find in a strategy game. Each focus point is like a unit that will bring up more information in a side panel. If there is more than one unit there, show an overview of the units. It's a work in progress, but I'm happy with the result so far.
I have an app that is heavily map-based. It's an iOS app that uses Apple Maps (I know, I know, controversy, yadda, yadda; but there's a good reason -many of them, in fact- that I use Apple Maps).
I found that the built-in AM clustering truly sucks, so I wrote my own. It's not perfect, but delivers a much better experience than the native one.
The Atlas Obscura version of clustering seems especially bad. The presence of the cluster circles with unchanged numbers, even after zooming in, is just plain wrong.
I have seen some better clustering implementations, which give good sense for whats inside the cluster if you click on it.
Generally agree that the stacked individual points are a much better approach on modern hardware.
WebGL is a major upgrade for maps. But as an old school web maps person, the obvious solution to the first problem (nearby points clustered even on the city level) is to use the maxZoom option which is in most clustering libraries.
>You don’t have to cluster anymore. You can just be.
Try to get Google Maps or Apple Maps running on a phone with more than 200 Markers/Annotations, then come back to me with that. Their performance is fucking dreadful. Google Maps released a new renderer that just OOMs if you're rendering a Polyline with 5k segments. Decimate it or face consequences.
As far as I know, MapBox is about the only one that has tolerable performance. Anyone else doing heavy work and using the gmaps SDK is figuring out tricks: overlay rendering (drawing on a canvas above the map, which requires expensive RPC calls to get visible bounds / map projection which makes performance shit if you're not careful and always lags a frame behind), intense caching of marker descriptors, careful management of markers (dropping 200 Markers from scrolling the map + adding 200? Enjoy your main thread work that freezes the map), etc, etc.
> Try to get Google Maps or Apple Maps running on a phone with more than 200 Markers/Annotations
That the big tech version of this is pretty shit, should come as a surprise to no one. The OP's visualisation runs fine on my phone, presumably Google/Apple could do this too, if they were willing to spend a big of engineering time on it
My iOS app using MapKit is smooth with ~4k annotations on an iPhone 14. My experience is that it doesn't really start to choke until you get closer to ~10k.
It does save a purpose. For example in the OP's non-clustering example all of the Britain is covered in dots, I'm talking at the highest zoom level, while the Atlas Obscura version, the one that uses clustering, does a better job of providing data by mentioning how many points that general area contains.
In such cases I generally prefer displaying counts of points in defined areas, rather than using clustering (e.g., when zoomed out, show counts per country, and when zoomed in more show counts for states or equivalent sub-national areas).
If you have less than hundreds of thousands of points, you can probably get away with drawing individual dots on the map. Computer screens are high res.
It's technically feasible to just draw all the individual dots but it doesn't necessarily convey the information better.
When individual points are drawn close together, they're hard to discern without zooming right in. Even with additive opacity, they max out quite quickly once a couple of dots overlap.
Then, the dots should be less than 100% opacity, which helps convey density wherever they overlap. It's feasible in overpass turbo with its rather simplistic MapCSS, so it should be possible in proper web mapping libraries.
I'm working on a project (using Protimaps and MapLibre, even, so this is very timely for me) where users create groups at physical locations. If 12 groups choose the local public library's schedulable meeting room as their meeting space, how would anyone click to see the list of groups that use that one room? Wouldn't I just end up with what looks like one very dark dot?
I typically deal with dots at the same place as a single dot and, when clicked, open an infowindow/infopanel that will let people see all of the points’ data.
ie you do need to deal with this issue (by default, no mapping library will do it for you) - and most clustering librairies (or at least their default settings) will also not solve this for you.
The ui for what happens when a point (or even a cluster) is clicked but that point contains more than one point’s worth of data is its own separate problem basically
This has been my first adventure dealing with maps with user-generated points and I'm discovering how much goes on behind the scenes that I never noticed!
I agree with you that the point itself could show that it’s special - or - rely on users tapping/clicking it and then show all the info
In a sense, maybe conveying that the point has more than one data point attached to it isn’t critical - as long as you can see everything inside when clicking it!
Feel free to email me, would love to jam/chat about this!
I can see why this would be helpful in other use cases though!
If you do not like the cluster-marker, you could have an icon just list the total number at that location, and then on hover (or click for tooltip) show the table. And that may honestly be better than the spiderfy example for most applications now that I am thinking about it.
Maybe a better example, ESRI when you click a popup has a series of HTML, https://data-ral.opendata.arcgis.com/datasets/raleigh-police..., so if you click one of the grey circles it contains multiple points, you can basically go through different views (either all the elements or click through to a more detailed view of the individual point).
The default heatmaps for these maps are bad. Heatmaps should use filled contours so the gradations are more easily identified. (Continuous raster maps are blobby.) See the ascii glyph map in this post, https://andrewpwheeler.com/2015/06/12/favorite-maps-and-grap.... I think those should be static for various levels of zooms as well, and not recalibrated when zooming.
Another option (not shown here) is to just use polygons and aggregations, and when zoomed in can turn on that point layer (or just have it appear). Or can just make actual clusters (like DBSCAN).
I have a map I made on my website that shows these (with various interaction tooltips/hover), https://crimede-coder.com/graphs/DurhamHotspots (hotspots of crime in Durham, NC). And an explanation of the cartographic decisions and when to use the different techniques, https://www.youtube.com/watch?v=mBm6sTR08BI
Clustering (for all its faults) is the only off-the-shelf technique for seamlessly switching between these two modalities without having to change the underlying data representation. Need more detail? Zoom in. And the zoom level is adaptive so it works with any scale.
There are better aggregation techniques (summing to a hexagonal grid, heatmaps, etc) but they generally require a separate calculation (possibly server side) and then switching to the raw source for the individual point view, either manually or at some hardcoded zoom level. It's not the same experience - it feels like two separate map layers instead of one integrated clustered layer.
This is mostly a matter of what's available in the mapping libraries. You could imagine building an alternative to clustering that calculates a heatmap on the fly when zoomed out, eventually revealing points as you zoom in. But presently this is something you'd have to DIY. For now, clustering is the only thing that works right out of the box.
I’ve consistently heard complaints from customers that they don’t like it. At this point, map technology has come far enough that we could visualize thousands of points using Cesium on consumer-grade hardware so I don’t think it’s a performance issue either.
When it comes to overlapping dots, we generally solve this by displacing the dots minimally so that they’re all still in the same building or same area but visibly different locations.
Also pour one out to google fusion tables which back in the day was the amazing way to get tons of dots onto a map.
The dataset he's using is like 10x smaller than the one displayed in AO.
There's a deeper issue which the author touches on, showing too much information on a map. This is possible independent of technology limits depending on what level of focus you wish each point to have. For many maps, showing a bunch of small points is an elegant solution, the map turns into more of a data visualization. But a bunch of points tells you very little about a particular thing. It is rich in aggregated information and poor in specific information.
If Google Maps just gave you a bunch of points instead of labels, it would be less functional. Every city would just be a large collection of points. Great, that might be interesting if you want to visualize how the locations are distributed in the region, but you are probably looking at the map because you want to find a particular thing.
Clustering is the natural choice: show the most important thing out of all the points in the area. A label is important, a big circle with a number in it is the worst out all the options discussed. My issue with Google Maps is that there is no visual indicator that there are other points there, and that seems to be largely driven by the fact that it is a marketing platform.
I'm working on a map that uses a hybrid approach. Each map has a narrow focus and is tied to a particular community/interest: concerts, bear sightings, hostels, food trucks, whatever you want. For each point of focus, there is a label and a thumbnail. Showing a bunch of these all in the same place is a bad user experience, so it ranks them and shows the most important one, and the thumbnail is replaced by a number indicating there are other points of focus in the vicinity. Users can click on the item to get a side panel that shows a listing of all the points.
There are also other points on the map that are secondary to its focus, public transportation vehicles and other location points that the user can filter. These are displayed as little dots, similar to the example that the author provides. If you zoom in far enough, they become more than just dots.
In designing the user experience, I tried to make it like a map experience that you might find in a strategy game. Each focus point is like a unit that will bring up more information in a side panel. If there is more than one unit there, show an overview of the units. It's a work in progress, but I'm happy with the result so far.
I found that the built-in AM clustering truly sucks, so I wrote my own. It's not perfect, but delivers a much better experience than the native one.
I have seen some better clustering implementations, which give good sense for whats inside the cluster if you click on it.
Generally agree that the stacked individual points are a much better approach on modern hardware.
Try to get Google Maps or Apple Maps running on a phone with more than 200 Markers/Annotations, then come back to me with that. Their performance is fucking dreadful. Google Maps released a new renderer that just OOMs if you're rendering a Polyline with 5k segments. Decimate it or face consequences.
As far as I know, MapBox is about the only one that has tolerable performance. Anyone else doing heavy work and using the gmaps SDK is figuring out tricks: overlay rendering (drawing on a canvas above the map, which requires expensive RPC calls to get visible bounds / map projection which makes performance shit if you're not careful and always lags a frame behind), intense caching of marker descriptors, careful management of markers (dropping 200 Markers from scrolling the map + adding 200? Enjoy your main thread work that freezes the map), etc, etc.
First party map tools are absolute dog shit.
That the big tech version of this is pretty shit, should come as a surprise to no one. The OP's visualisation runs fine on my phone, presumably Google/Apple could do this too, if they were willing to spend a big of engineering time on it
When individual points are drawn close together, they're hard to discern without zooming right in. Even with additive opacity, they max out quite quickly once a couple of dots overlap.