Scaling smart maps: server-side clustering with Laravel and Google Maps

The problem wasn’t just aesthetic, it was technical:

• Performance: Rendering and clustering thousands of markers in the browser severely impacts JS performance.

• Data transfer: Sending all point data to the client isn’t scalable.

• Real-time UX: We wanted clusters to update as users moved the map, without overloading their device.

• Volume: With thousands of entries, we need a system that can grow.

We used geohashing to group nearby points together at varying levels of precision.

A geohash is a short alphanumeric string that encodes a geographic location. What makes geohashes especially useful for clustering is their hierarchical nature: each additional character in the geohash increases the precision and narrows down the location.

For example, the geohash u173z7 is a more precise location within the larger area defined by u173, and so on.

This property allows us to group entries dynamically depending on the zoom level, shorter hashes represent larger clusters, longer hashes zoom in to finer detail.

Each new photo entry is geotagged and stored as a watcher_entry. From there, we generate clusters and store them in a separate geo_clusters table using the beste/latlon-geohash package.

Each entry generates 12 cluster records, one for each geohash level (from 1 to 12). So with 10.000 photo uploads, we’re managing around 100.000 geo_cluster entries.

Each cluster contains:

• The geohash

• Zoom level (hash_length)

• Number of points in that cluster

• A calculated centroid (lat/lng)

On map move or zoom, the Vue.js frontend requests only the relevant clusters from Meilisearch, using its geosearch functionality to select entries within the map bounds and a matching hash length.

The result? A fast, scalable map that shows meaningful clusters at every zoom level, without overwhelming the browser.

Here’s how it all fits together:

• Laravel Observers: When a watcher_entry is added, an observer updates the geo_clusters table accordingly—incrementing cluster sizes and recalculating centroids.

• Meilisearch: Clusters are indexed and queried using its fast geo search.

• Vue.js & Google Maps: The frontend queries for the visible area and renders clusters based on zoom.

• Filament Admin Panel: Used to manage entries, draw “bonus zones”, and trigger updates.

We also created a custom Filament field that lets admins draw polygon zones on the map. These zones award double points for entries submitted inside them. To detect whether an entry falls inside such a zone, we use the mjaschen/phpgeo package.

No system is without trade-offs. While server-side clustering significantly improves performance and scalability, it does introduce some new challenges:

• Filtering complexity: Fine-grained filtering, like showing only entries from a specific user, time period, or status, becomes more complex. Since clusters are precomputed and not tied to dynamic query parameters, applying detailed filters means recalculating or bypassing the clustering logic altogether.

• Reload on map movement: Each pan or zoom event triggers a full reload of the cluster data. This keeps the map accurate, but can result in minor loading delays on slower connections.

• Initial load in new areas: When zooming out or jumping to a different region, there may be a brief moment where no clusters are shown until new data is fetched.

These limitations are acceptable in our current context, but we’re exploring improvements, like hybrid client/server clustering or background data prefetching, to smooth out the user experience even further.