How to get the leaves from a cluster using react mapbox gl? - reactjs

Question

I have tried on example from Youtube tutorial "Mapbox Marker clustering". I want to add getLeaves method to grab all of the items inside the cluster in order to visualize a popup with each details for every individual marker.
console.log(cluster.id) returns id of each cluster id, but
const items = supercluster.getLeaves(cluster.id) gets an error that "Error: No cluster with the specified id."
Is it possible to use getLeaves method with react mapbox gl?
For this react code and link to youtube video.
--
import React, { useState, useRef } from 'react';
import useSwr from "swr";
import ReactMapGL, { Marker, FlyToInterpolator, NavigationControl } from 'react-map-gl';
import useSupercluster from 'use-supercluster';
import Supercluster from 'supercluster';
import './App.css'
const fetcher = (...args) => fetch(...args).then(response => response.json());
export default function App(){
//navigation control
const navStyle = {
position: "absolute",
top: 0,
right: 10,
padding: "10px"
};
//set up map
const [viewport, setViewport ] = useState({
latitude: 52.6376,
longitude: -1.135171,
width: "100vw",
height: "100vh",
zoom: 12
});
const mapRef = useRef();
// load and prepare data
const url =
"https://data.police.uk/api/crimes-street/all-crime?lat=52.629729&lng=-1.131592&date=2019-10";
const {data, error} = useSwr(url, fetcher);
const crimes = data && !error ? data.slice(0, 200) : [];
const points = crimes.map(crime => ({
type: "Feature",
properties: {
cluster: false,
crimeId: crime.id,
category: crime.category
},
geometry: {
type: "Point",
coordinates: [
parseFloat(crime.location.longitude),
parseFloat(crime.location.latitude)
]
}
}));
// get map bounds
const bounds = mapRef.current
? mapRef.current
.getMap()
.getBounds()
.toArray()
.flat()
: null;
// get clusters
const {clusters, supercluster } = useSupercluster({
points,
zoom: viewport.zoom,
bounds,
options: { radius: 75, maxZoom: 20 }
});
// return map
return(
<div>
<ReactMapGL
{...viewport}
maxZoom={20}
mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN123}
mapStyle="mapbox://styles/shunsukeito/ckaanisi33g1k1ipowgmg8tdd"
onViewportChange={newViewport => {
setViewport({...newViewport});
}}
ref={mapRef}
>
<div className="nav" style={navStyle}>
<NavigationControl
/>
</div>
{clusters.map(cluster => {
const [longitude, latitude] = cluster.geometry.coordinates;
const {
cluster: isCluster,
point_count: pointCount
} = cluster.properties;
//where I get the error!!!
console.log(cluster.id)
const items = supercluster.getLeaves(cluster.id)
if (isCluster){
return(
<Marker key={cluster.id} latitude={latitude} longitude={longitude}>
<div className="cluster-marker"
style={{
width: '${10 + PointCount / points.lenght) * 50}px',
height: '${10 + PointCount / points.lenght) * 50}px'
}}
onClick={() => {
const expansionZoom = Math.min(
supercluster.getClusterExpansionZoom(cluster.id),
20
);
setViewport({
...viewport,
latitude,
longitude,
zoom: expansionZoom,
transitionInterpolator: new FlyToInterpolator({
spped: 2
}),
transitionDuration: "auto"
});
}}
>
{pointCount}
</div>
</Marker>
);
}
return (
<Marker
key={cluster.properties.crimeId}
latitude={latitude}
longitude={longitude}
>
<button className="crime-marker"
>
<img src="/custody.svg" alt="crime doesn't pay" />
</button>
</Marker>
);
})}
</ReactMapGL>
</div>
);
}
--
https://www.youtube.com/watch?v=3HYvbP2pQRA&t=12s
Any suggestions are welcomed.
Thank you,