Client Side marker clustering with React Native

Hello, I will tell you about the client-side clustering with react native and javascript.

Actually client-side clustering it’s too hard but if you are using kdbush it’s too easy. That is supported 400k marker with min 56fps.

What is that KDBUSH ?

Is a very fast static spatial index for 2D points based on a flat KD-tree. I know you do not like ear. Actually, the job is very simple and very easy. Firstly comparing coordinates and indexing keys by location coordinates.

Note: Supercluster supported just geoJSON data type.

How can i use in React Native ?

Initially we have to add some dependencies for map and clustering. Supercluster respond cluster trees and point coordinates to us. Now we will add our packages.

npm install react-native-maps supercluster --save

Everything is okay right ?

Not yet! we forgot link the packages.

react-native link

Working Order

1. Firstly creating cluster datasets

2. Now, we have to convert data for geoJSON

3. We getting map zoom-level for clusters

Actually this code block it's looks like so complicated but it's meaningful. We got it user longitudeDelta for find map screen width by pixel dimension.

If you wanna learn more thing look it

Stackoverflow
Google Groups

4. Now we have to get clusters/points coordinates

We will implented bbox array for find points.

[westLng, southLat, eastLng, northLat]
Variables
padding = 0.5
longitude - (longitudeDelta * (0.5 + padding)
latitude - (latitudeDelta * (0.5 + padding)
longitude + (longitudeDelta * (0.5 + padding)
latitude + (latitudeDelta * (0.5 + padding)

Actually everything it's ready for development just thing left you have to customizing map and markers 😄 😄

Keep Building! 🚀🚀

Thank you..