search
Cloud Blog – How to group markers on maps

How to group markers on maps

If you need to show a lot of geographic information in an accessible way, you are most likely using a map. But it should be presented so that users can easily and quickly see the big picture and, if desired, get detailed information. Hundreds of point markers put together can become an obstacle.

In this post, we’ll show you how to use the marker grouping JavaScript library to present the same information in a grouped way without displaying all the markers overlapping each other. We’ll also talk a bit about how it works to help you better understand how you can customize marker groups in your projects.

Why do we need marker grouping at all?

To understand, let’s look at this map of New Zealand and Australia with a group of markers scattered around it:

 

 

Even though we have added a label for each marker, many of them are so close that they overlap. There are less than 25 locations, but they are too close to be shown on the map without overlap.

If your card looks something like this, it prevents your customers from conveniently and correctly perceiving the information you provide. But there is a solution it is marker clustering. With a simple open source library and a slight change to your map code, marker grouping can be added to significantly improve the user experience for clients.

 

 

Marker clustering is a handy tool for visually consolidating markers and making it easier for clients to read the map as a whole. It groups markers that are nearby on the map into a cluster that is displayed as a single icon.

Enable marker clustering on your map

You can add marker clustering with a few extra lines of JavaScript. This example demonstrates how to do this on web maps, but there is a similar utility within the Android Maps platform and the Google Maps platform SDK. To create a marker cluster, let’s first look at how to develop non-clustered markers. By adding regular markers to the map, the code would look like this:

const pos1 = {lat: -33.727111, lng: 150.371124};
const marker1 = new google.maps.Marker({position: pos1, map: map});
const pos2 = {lat: -33.718234, lng: 150.363181};
const marker2 = new google.maps.Marker({position: pos2, map: map});

With dozens or more markers, it’s unlikely you’ll be able to create one at a time with your variables. However, these two markers are enough to see clustering in action.

You need to make two changes to the map code to enable marker clustering. First, download the marker clustering library. For production use, download it from GitHub and host the JavaScript on your server. For the purposes of this demo, we will download it from the Google Maps platform documentation site

<script src=”https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js”>

Next, bring the map and markers into the clustering library by adding these lines below the marker variables:

// create an array of all your markers
const markers = [marker1, marker2];
//Path for cluster icons to be appended (1.png, 2.png, etc.)
const imagePath = “https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m”;
// Enable marker clustering for this map and these markers
const markerClusterer = new MarkerClusterer(map, markers, {imagePath: imagePath});

Again, you will need to host cluster images on your servers for production use. This example will load m1.png because it only requires the minimum cluster size.

When you create a MarkerClusterer instance, you pass in your map variable, an array of markers, and an image path. The library, having received the information, displays the cluster icon with the number of points present in the cluster:

 

 

When you click on the cluster limits icon, the map is scaled to a level where both markers are visible.

 

 

When you zoom out a few levels, the cluster icon will return instead of two markers once the map is at a level where they can overlap.

 

This marker clustering guide has full details and examples with more points.

How marker clustering works

The marker clustering library is part of the open source map utilities on GitHub. You can access all the code and even make your own changes as needed. Let’s take a look at how the algorithm works in general.

To begin with, the algorithm divides the map into a grid, with each section of the grid being 60×60 pixels by default. Using the marker overlap example above, this can be visualized as:

In fact, the grid will not be exactly the same as above since it is based on the markers themselves. The first marker becomes the center of the first sector. The next markers in that sector will be added to the cluster for that sector, and then the cluster center will be updated based on the average level of all its markers. If a marker could be part of multiple clusters, it will be added to the nearest one based on the distance between marker coordinates.

The default algorithm settings cover most use cases, but since the code is entirely open source, you can make any changes you need.

Customize your clusters

There are many ways to customize the look and feel of your marker clusters. Many of them won’t even require changing the underlying library. However, several options can be set when creating clusters.

The easiest way to customize the cluster map is to use your own icons. In a simple clustering example, we passed the imagePath parameter. The cluster library will assign a number (1-5) to the end of the Path followed by the file extension (.png by default). You can use a different file type with the imageExtension parameter. Keep in mind that transparent icons look better on the map.

By default, only two markers are needed to create a cluster. You can use the minimalClusterSize option to change this setting. Increasing this number can cause markers to overlap, but you can also set the overlap threshold.

Here are a few other options for working with the library:

gridSize: number of pixels in the cluster grid
zoomOnClick: zoom in on a cluster when it is clicked
maxZoom: maximum zoom level before always displaying regular markers
styles: array of objects for each cluster type, including textColor, textSize, and other cluster functions

For example, you can use all of the above options together as follows:

// Options to pass along to the marker clusterer
const clusterOptions = {
imagePath: “https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m”,
gridSize: 30,
zoomOnClick: false
maxZoom: 10
};
// Add a marker clusterer to manage the markers.
const markerClusterer = new MarkerClusterer(map, markers, clusterOptions);
// Change styles after cluster is created
const styles = markerClusterer.getStyles();
for (let i=0; i<styles.length; i++) {
styles[i].textColor = “red”;
styles[i].textSize = 18;
}

For example, you can use all of the above options together as follows:

 

As you can see, there are 2 differences: more clusters (through a smaller grid size), and numbers are red and slightly larger.

When you click on a cluster, the scale will not change, but you can increase it manually. Individual markers will appear faster, grid size provides less chance of overlapping markers. Once you reach zoom level 10 (the map starts at level 3), all markers will be reflected no matter how close.

At this point, you’ve gone from a map spammed with markers to an elegantly clustered one. You can find more ways to customize the marker clustering library by reading its code. Use this new knowledge to give your users a better experience on maps with lots of markers.

Please get in touch with our Google Maps Platform team for advice or technical expertise to implement these and other features. In addition, Cloudfresh provides the ability to pay by bank transfer for enterprises with the preparation of all necessary accounting and legal documents.

Сторінка доступна українською мовою: Перейти