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 your data.
It forces users to click blindly, hoping the blob 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 consist of a zoom to reveal a marker and angles to point the marker based on zoom. The result is that each marker is optimally positioned to maximize clarity and information density.
Lets examine a similar issue as before but solve with a better way.
Managing the same markers with arenarium/maps we get:
By avoiding clustering, we maintain spatial integrity. 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 and priority:
- 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.
- The Tooltip: The primary layer. These are revealed based on rank when space allows. They contain the basic information that is always visible.
- 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:
- The Core Library (
@arenarium/maps): The npm package that manages state logic and coordinates with the optimization compute API. - 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.
Images at top of article provided by source
Top comments (0)