CODEWITHSUNDEEP
javascriptreactjstypescriptgoogle-mapsgoogle-map-react
Maramal
Maramal

Reputation: 3465

use-supercluster gets empty array

After figuring out how to deal with TypeScript and use-supercluster library I have "made it work" until I got a new problem: I get an empty array whenever I use useSuperCluster() function.

I am following the creator's guide so I can handle my own project.

This is what I do:

const [bounds, setBounds] = useState(undefined as BBox | undefined);
const { data, error } = useSwr(API_URL, fetcher);
const coords: Array<ParkingData> = data && !error ? data.data : [];
const points: Array<PointFeature<GeoJsonProperties>> = coords.map(pd => ({
    type: "Feature",
    properties: {
        cluster: false,
        pdId: pd._id,
        category: 'test'
    },
    geometry: { type: "Point", coordinates: [ pd.lat, pd.lng ] }
}));

const { clusters } = useSuperCluster({
    points,
    bounds,
    zoom,
    options: { radius: 75, maxZoom: 25 }
});

When I debug points I get something like:

But then, clusters is empty. I update bounds like in the video with a onChange attribute, like:

onChange={({ zoom, bounds }) => {
    setZoom(zoom);
    setBounds([
        bounds.nw.lng,
        bounds.se.lat,
        bounds.se.lng,
        bounds.nw.lat
    ]);
}}

So, what am I doing wrong?

Edit:

I had added supercluster object to useSuperCluster() destructuring like const { clusters, supercluster } = useSuperCluster(...) and after debugging it I get the following object:

Upvotes: 0

Views: 1448

Answers (1)

Laso
Laso

Reputation: 56

Try changing this line order:

geometry: { type: "Point", coordinates: [ pd.lat, pd.lng ] }

to:

geometry: { type: "Point", coordinates: [ pd.lng, pd.lat ] }

apparently, the order is that way, in my case i tried this change and it didn't work for me, but for you there's a chance it will work.

https://github.com/mapbox/supercluster/issues/45

Upvotes: 4

Related Questions