React-map-gl: Typescript - Source props is not fully defined

[kentongray]

I noticed after upgrading to React Map GL I could no longer set the source props on the layer for cluster (like in the example).

Also in general the types are not exported making it difficult to work with (with the definitely typed I'd reference the source props and things like PointerEvent types)

Here is the source from the definitely typed repo which is what I was using with version 5 and it worked well. I'd recommend basing the types off of that.

Hopefully I'm not doing something dumb, thanks!

DefinitelyTyped Definition

export interface SourceProps {
    id?: string;
    type: string;
    url?: string;
    tiles?: string[];
    tileSize?: number;
    bounds?: number[];
    scheme?: 'xyz' | 'tms';
    minzoom?: number;
    maxzoom?: number;
    attribution?: string;
    encoding?: 'terrarium' | 'mapbox';
    data?: GeoJSON.Feature<GeoJSON.Geometry> | GeoJSON.FeatureCollection<GeoJSON.Geometry> | string;
    buffer?: number;
    tolerance?: number;
    cluster?: boolean;
    clusterRadius?: number;
    clusterProperties?: object;
    clusterMaxZoom?: number;
    lineMetrics?: boolean;
    generateId?: boolean;
    coordinates?: number[][];
    urls?: string[];
    children?: React.ReactNode;
}

Source.d.ts in Repo

type SourceProps = {
  id?: string,
  type: string,
  children?: any,
  data?: any,
  coordinates?: any,
  url?: any,
  tiles?: any
};

[Pessimistress]

@kentongray Thanks for the report. We don't use TypeScript in all the examples so it's hard to catch such issues. Would you open a PR to fix the SourceProps typing and maybe suggest which ones we should export?

[ediblecode]

I've come across the same problem today with clusters specifically:

In terms of exporting props, I think probably the props for each component makes sense. Using the clusters example I get the following type error:

Types of property 'type' are incompatible. Type 'string' is not assignable to type '"symbol" | "circle" | "line" | "raster"...

For:

const clusterLayer = {
    id: "clusters",
    type: "circle",
        ...
}
...
<Layer {...clusterLayer} />

We can get round it in the mean time by casting the type property directly to "circle" specifically like this:

const clusterLayer = {
    id: "clusters",
-   type: "circle",
+   type: "circle" as "circle",

But that's obviously not ideal. It would be better to be able to import LayerProps like:

-import MapGL, { ViewportProps, Layer, Source } from "react-map-gl";
+import MapGL, { ViewportProps, Layer, Source, LayerProps } from "react-map-gl";
-const clusterLayer = {
+const clusterLayer: LayerProps = {

Happy to contribute/QA if you need @kentongray?

[kentongray]

@ediblecode I started working on this here https://github.com/Datagration/react-map-gl so far have done Source and about to do point events and some other ones. I'm really mimicking /copying and pasting from the definitelytyped repo (https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-map-gl ) as I used it on version 5 and didn't have any problems. I am basically trying to make my app work and then get a PR but feel free to pile on!

[kentongray]

@ediblecode yarn add @datagration/react-map-gl if you want to play along

[ediblecode]

Ok "making your app work" is probably the best place to start to be honest. I've had a quick look at your fork and it looks like you've covered everything so not sure I can add much. But I will will pull it down into my project to check the bits I'm using.

[Pessimistress]

Fix published in v5.3.1 and v6.1.1. Thank you!

[kentongray]

thanks @Pessimistress for the quick turn around! If I run into more typescript issues and will just create PRs as I run into them!