Map Marker Clusters

There isn’t a huge amount one can do when it comes to displaying a list of search results on a web page. With real estate portals, this is usually a list of real estate listings with properties for rent or for sale in a location the user has chosen to search in, possibly with some filters like the minimum number of bedrooms the property should have, for example.

Because real estate listings are primarily location based, we have the option of displaying the list of search results on a map, giving the user a visual representation of the listings at the property address. But, this can also pose a couple of issues:

1. Too many listings on the map making it difficult to select an individual listing marker to take further steps, like view the listing
2. The time to load the location of all the listings from the search results and place each of them onto the map with individual markers, could cause the map to load slowly, which does not provide a good user experience

The Problem

We chose to use Leaflet for our mapping components because of the styling customisations to the map, think the colours of the main roads, train lines, etc, as well as the extra layers of information it was able to handle with the base MapBox map.

One of those extra layers of information we used is to display an outline of the boundary for each location the user searched on. Another layer is used to display a marker on the map where the property address for the listing is.

Here’s what a search for the Melbourne suburb of Werribee looked like with displaying all of the listing markers without any clustering. It is taken from our dev environment.

Individual markers

As you can see from the gif above, with 149 individual markers being displayed on the map from the moment it is loaded, even in a fairly large suburb, in terms of area, like Werribee, it is overwhelming. There are small pockets on the map where there are multiple listings with overlapping markers. Not great from a usability perspective at the default zoom level of the map. You need to zoom in fairly close to see the individual markers and get the address of the listing when hovering over it.

The Solution

Instead of having, potentially, hundreds of individual listing markers being loaded and displayed on the search results map at a single time, we decided to utilise the Leaflet marker clusters feature and group listing markers that are in close proximity to each other and display the number of individual listing markers contained within the cluster.

I think the following gif speaks for itself. The video this gif was created from is taken from our production environment, which contains more active listings than our dev environment, further illustrating the map marker clustering is a more effective way of displaying the listings on a map.

Marker clusters

From the moment the map loads, you see the total number of listings in the suburb of Werribee contained within the outlined boundary of the search location. As the map zooms in to the level where it can display all of the search location at its largest size while still visible within the viewing window, the marker cluster break out into multiple markers clusters.

With each zoom level getting lower, depending on the amount of individual listing markers in proximity to others, the markers may break out into individual markers or stay as a cluster, just a smaller cluster than when the zoom level was higher. This will repeat until the zoom level gets down to a level of 15 ( think zoom level 0 as being able to see the whole world and zoom level 10 as being able to see main roads marked on the map ), where the individual marker listings will be displayed no matter how close they are to each other.

We decided on using zoom level 15 as the level to display all of the listing markers individually instead of clustered as this is where the map can distinguish individual buildings form each other. From that, we can confidently place individual markers at each each address knowing that it will not be overlapped by the listing marker form a different address. Having multiple listings at the same address however, like an apartment building, is a whole different story, and one which we will be working through very soon.

Some setting we used for the marker clusters were:

• showCoverageOnHover = false

This turned off the default to display a bounding box around the area the cluster is gathering individual markers from

• disableClusteringAtZoom = 15

This sets the zoom level to display the individual listing markers no matter how many would be in view at the time

You may also notice some additional styling with the individual listing markers changing colour when they have been clicked. This is another usability feature to help the user see which listing markers they have already clicked and hopefully only click again if they want to view the listing again.