Handling collision in static maps

3 min read

I want to share the story behind a custom map I built to visualize the members of a research center. The project started because the client needed to replace their old Google Maps solution. It was becoming too expensive and difficult to maintain manually, and they wanted something they could control completely.

Each color on this map represents a different membership category within the research community
Each color on this map represents a different membership category within the research community

The Challenge

The client was previously using a standard Google Maps embed. While this is often the easiest way to put a map on a website, it became a maintenance burden as their list of members grew. They found themselves manually pinning locations one by one, which is slow and prone to error. They wanted a workflow where they could simply upload a spreadsheet and have the visualization update itself, without worrying about API quotas or monthly billing.

From a technical perspective, the real constraint was data density. Many researchers work at the same university, sharing identical GPS coordinates. Most maps handle this by clustering (grouping them into a single “10” bubble), but that hides the individuals. The client needed a way to see every single member distinctively, even when they shared an office, while keeping the deployment simple enough to run on a basic WordPress page.

The Solution: A Static Map Generator

After looking at different options, I decided to use R and Leaflet. Instead of running a live server like Shiny, which costs money and needs constant maintenance, I used R as a build tool. The idea is simple: the script reads the CSV data, processes the location logic, and then compiles everything into a single, standalone HTML file. This file contains all the data and the Javascript code. We can then just drop this file into WordPress or any web host, and it works with zero running costs.

The most interesting technical challenge was handling the clusters. When you have ten people at one university, standard maps usually just group them into a number, like a green circle saying “10”. This is good for data density, but it is bad for a directory where you want to see specific names and individual identities.

To fix this, we used a spiderfying algorithm. The code first checks if multiple markers share the exact same latitude and longitude coordinates. Instead of stacking them, it pushes these points outward into a circle around the center. It calculates the new positions for the markers using a radial offset, placing each item at an angle determined by the total number of overlapping items. This way, we keep the exact location context on the map, but every single person becomes visible and clickable for the user.

The workflow follows a straight line. We start with the raw CSV data which goes into the R build script. That script produces the static HTML file and an export module, which finally gets embedded into the WordPress page.

flowchart LR
    A[CSV Data] --> B[R Build Script] 
    B --> C[Static HTML File]
    B --> D[Export Module]
    C --> E[WordPress Page]

The client was very happy with the spider feature because it elegantly solved the overlapping problem. Also, the new map showed patterns they didn’t notice before, like where most members are concentrated and how international their network really is. Link to the map.