Map Clustering with React Native (Expo)

The code for this example can be found here.

Goal

Own The Spot app

Our goal is a well performing MapView that is easily configurable for your individual use case.

On the left is an example that just got pushed to production using an Over The Air update (thanks to Expo) and has shown a major performance increase.

Backstory

The problem originally arised in Own The Spot’s mobile app built with Expo. Specifically when rendering over 300 custom marker images on iOS.

Clustering the points seemed like the obvious solution.

Setup

1. Install Node (if you haven’t)
2. Install the Expo CLI and yarn. npm install expo-cli yarn --global
3. Create your Expo project. expo init rn-clustering-example
4. Navigate to the project. cd rn-clustering-example

5. Install Super Cluster. yarn add supercluster@4.1.1

6. Start up the server. expo start

Implementation

The first thing we need is a basic map with some spots. Nothing too complicated.

Initial MapScreen.js

Then we need a cluster component to render. This will be ClusterMarker.js.

Notice how we’re passing in count as a prop.

What the cluster will look like

Now we need to actually use supercluster. This will be handled in MapUtils.js. This is where all the logic decides what markers should be clustered, depth level, and cluster size. radius, maxZoom, and padding can be tweaked to fine tune the way that the clustering works.

utils/MapUtils.js handles a lot of the heavy lifting

To finish it off we need to put together the basic map, the cluster component, and the cluster logic.

Final MapScreen.js

Which will take us from…

To This…

We’re Done!

I appreciate any feedback or criticism.Thanks to padupuy for the clustering example to base this implementation on. Thanks to the Expo team and the Facebook for providing the platform to do all this on.

Photo by Josh Hild on Unsplash

You can find me on the internet or the other internet.

Check out Own The Spot and Alluxo because they’re doing cool things! (I may be biased)