CODEWITHSUNDEEP
javascriptreactjstypescriptgoogle-mapsmarkerclusterer
Maramal
Maramal

Reputation: 3465

How to use use-supercluster with Typescript

I am having troubles while implementing use-supercluster with TypeScript. I am trying to use clusters to differentiate two types of data in a Google Map with something like red clusters vs. green clusters.

I can't find any documentation related to use this library with TypeScript and I am not getting enough information from its types:

So, what is argument P? I was following the use-supercluster creator's guide to add clusters but after installing supercluster types I am getting errors here:

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

Error 1:

errors on points

I have tried to create manually a GeoJSONProperty interface with the following attributes:

interface GeoJSONProperty {
    cluster: boolean;
    pdId: string;
    category: string;
}

Then I have tried to assert points with PointFeature<GeoJSONProperty> but I got a different error: attempt

Error 2:

errors on bounds

This one I was able to "solve" it with const [bounds, setBounds] = useState(undefined);. But not sure whether that is a good practice.

So, do you know any documentation related to useSuperCluster + TypeScript or just do you know what am I doing wrong here?

Upvotes: 3

Views: 2672

Answers (1)

Maramal
Maramal

Reputation: 3465

Well... I found this file on the library's repo on Github and it explains pretty straightforward how to use useSuperCluster() on TypeScript.

Answering to my own question, it seems that points is in fact declared as an array of PointFeature<GeoJsonProperties> where JsonProperties comes from geojson library.

Imports:

import { PointFeature } from 'supercluster';
import { BBox, GeoJsonProperties } from 'geojson';

Then:

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 ] }
}));

Also, bounds seems to be declared as BBox, also comes from geojson library. So, to make this work I had to define the bounds in the same state, not after:

const [bounds, setBounds] = useState([
    -52.13013780765266,
    -33.853076010021674,
    -57.12647659234733,
    -32.851013577053855
] as BBox);

Upvotes: 4

Related Questions