Beyond Marker Clustering

Learn about a better way to manage thousands of map markers by using priority-based ranking instead of traditional clustering.

title: Beyond Marker Clustering published: true description: Learn about a better way to manage thousands of map markers by using priority-based ranking instead of traditional clustering. tags: webdev, javascript, maps, performance cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/08t55ut0ocyw4gpfyekg.png # Replace with your actual cover image URL

The problem

Say you have a map with with lots of map markers.

The map is slow and cluttered. How would you solve this the standard way? Most map providers include a clustering feature that gets you the following result:

While clustering solved the problem of lag and overlap when using using a large number of densely placed markers on a map, it created a massive UX problem.

Clustering hides data.

It forces users to click and zoom and pan more, hoping the cluster they are expanding actually contains what they are looking for. It sacrifices geographical and contextual precision for the sake of performance.

A better way

I’ve been building arenarium/maps, a library that overcomes the clustering problems by focusing on the core problem - overlapping markers. It does this by computing the optimal state for each marker based on a user provider rank. State information consists of when to reveal a marker and where to position the marker based on zoom. The result is that each marker is optimally positioned as the user moves around the map to maximize clarity and information density.

Lets examine a similar issue as before, but solve it in a better way.

Managing the same markers with arenarium/maps we get:

By avoiding clustering, we maintain spatial integrity and increase information density. If a marker represents a specific building or an event, it stays on that coordinate. There is no merging or snapping. This leads to a more elegant, professional, and ultimately more useful map interface.

The structure of a marker

As the user moves around the map, markers transition between three states based on zoom level and rank:

1. The Pin: The background layer. It is meant to be a round element that represent the basic information about a marker using colors or icons. these provide a heat-map feel without cluttering the view.
2. The Tooltip: The primary layer. These are revealed based on rank when no overlap exits. They contain the basic information that is always visible.
3. The Popup: The extended layer. These are shown when a user clicks on a tooltip. They contain additional information that would make a tooltip too large such as images.

Here is a short gif showcasing a more complex markers. A user moves around a map viewing the markers and click on some of them for more information.

Provider compatibility

The tool is built to be a plug-and-play solution regardless of your mapping provider. The architecture is split into two core parts:

1. The Core Library (@arenarium/maps): The npm package that manages state logic and coordinates with the optimization compute API.
2. Integration Packages: The npm packages that serve as an abstraction layer for Google Maps, Mapbox, and MapLibre.

Check it out

The website with live demos and full documentation is at arenarium.dev.

What’s your biggest frustration with standard map markers or clustering? Let's talk in the comments.

<small>Images at top of article provided by source</small>