Map Clustering with React Native (Expo)
The code for this example can be found here.
Goal
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
- Install Node (if you haven’t)
- Install the Expo CLI and yarn.
npm install expo-cli yarn --global
- Create your Expo project.
expo init rn-clustering-example
- 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.
Then we need a cluster component to render. This will be ClusterMarker.js
.
Notice how we’re passing in count
as a prop.
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.
To finish it off we need to put together the basic map, the cluster component, and the cluster logic.
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.
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)