[Doc] MapboxOverlay type and example

[charlieforward9]

Link

https://deck.gl/docs/api-reference/mapbox/mapbox-overlay#:~:text=function%20DeckGLOverlay(props%3A%20DeckProps)%20%7B%0A%20%20const%20overlay%20%3D%20useControl%3CMapboxOverlay%3E(()%20%3D%3E%20new%20MapboxOverlay(props))%3B%0A%20%20overlay.setProps(props)%3B%0A%20%20return%20null%3B

Description

When I paste this code, I get this nice long ts error about how the types do not match up.

function DeckGLOverlay(props: DeckProps) {
  const overlay = useControl<MapboxOverlay>(() => new MapboxOverlay(props));
  overlay.setProps(props);
  return null;
}

Type 'MapboxOverlay' does not satisfy the constraint 'IControl'.
  Types of property 'onAdd' are incompatible.
    Type '(map: Map) => HTMLDivElement' is not assignable to type '(map: Map$1) => HTMLElement'.
      Types of parameters 'map' and 'map' are incompatible.
        Type 'Map$1' is not assignable to type 'Map'.
          Types of property 'addControl' are incompatible.
            Type '(control: IControl, position?: ControlPosition | undefined) => Map$1' is not assignable to type '(control: IControl, position?: ControlPosition | undefined) => any'.
              Types of parameters 'control' and 'control' are incompatible.
                Type 'import("/Users/crich/development/github/agroview-client/node_modules/.pnpm/@deck.gl+mapbox@9.1.0_@deck.gl+core@9.1.0_@luma.gl+core@9.1.0/node_modules/@deck.gl/mapbox/dist/types").IControl' is not assignable to type 'maplibregl.IControl'.
                  Types of property 'getDefaultPosition' are incompatible.
                    Type '(() => string) | undefined' is not assignable to type '(() => ControlPosition) | undefined'.
                      Type '() => string' is not assignable to type '() => ControlPosition'.
                        Type 'string' is not assignable to type 'ControlPosition'.

When I run my code, it all works fine, so this is not a huge priority, but the typefixes would be clean.

I am willing to contribute to the fix - it looks really simple - but, I would looooove to see this PR addressed first!

(not conditionally contributing, just making a note of my prior work to prevent it from getting stale!)

Versions

"react-map-gl/maplibre": "8.0.0-beta.1",
"@deck.gl/mapbox": "^9.1.0",
"deck.gl": "^9.1.0",

[WoutRenkin]

There is also a MapboxOverlayProps type, that works for me

import { MapboxOverlay, type MapboxOverlayProps } from "@deck.gl/mapbox";
import { useControl } from "react-map-gl/maplibre";

export function DeckGLOverlay(props: MapboxOverlayProps) {
  const overlay = useControl(() => new MapboxOverlay(props));
  overlay.setProps(props);

  return null;
}

[charlieforward9]

@WoutRenkin the issue isnt with the DeckProps, it is with useControl(() => new MapboxOverlay(props));

useControl is expecting a more strictly typed IControl object, and MapboxOverlay isnt cutting it.

[Pessimistress]

This should have been fixed by react-map-gl@8.0.0.

[nyates42]

I am still seeing this issue in react-map-gl@8.0.0. Doesn't seem fixed to me. Also tried out the example here:
https://github.com/visgl/react-map-gl/blob/master/examples/mapbox/deckgl-overlay/src/app.tsx
Still shows similar type issue. Have also tried latest deck.gl v9.1.0.

[charlieforward9]

Have you restarted your window?

[Fabioni]

Still an issue in

"react-map-gl": "^8.0.1",
"maplibre-gl": "^5.1.0",
"deck.gl": "9.0.40",

[nyates42]

Just checking in again. This is till an issue. I am just making it happy with dirty type casting and also the type that WoutRenkin used:

import { MapboxOverlay, MapboxOverlayProps } from '@deck.gl/mapbox';
import type { IControl } from 'mapbox-gl';

function DeckGLOverlay(props: MapboxOverlayProps) {
	const overlay = useControl<IControl>(() => new MapboxOverlay(props) as unknown as IControl);
	(overlay as unknown as MapboxOverlay).setProps(props);
	return null;
}

deck.gl@9.1.3
react-map-gl@8.0.1

And yes I have restarted my window :)

[Pessimistress]

Try 9.1.4.

[nyates42]

@Pessimistress Thank you sir