Deck.gl: Question: override cursor style in deckgl

[danygp]

Hello,

Following documentation, I´m trying to override some styles in DeckGL component using style prop but I´m not able to modify any property.

Example:

..........
style={{cursor: 'pointer'}}
/>

I can change the cursor to pointer in ReactMapGL but if I add DeckGL, cursor is overwritten by deckgl and I dont know how to change it.

It seems like cursor is properly changed but when layers are added, return to initial cursor. Reading documentation about layers, I haven´t found anything relative to modify styles.

Thank you in advance,
Best Regards

[SamSamskies]

I was just about to post this same issue. I made a couple sandboxes to demonstrate the problem.

deck.gl can't override cursor style example (update 3/17/19: figured out how to set cursor style and updated this example to show how to do it):
https://codesandbox.io/s/ql8r5w4yzw

react-map-gl can override cursor style example:
https://codesandbox.io/s/n97zjvlr0

I am trying to implement a draw polygon mode to allow users to draw a polygon layer. I'd like to set the cursor to a crosshair when in drawing mode.

[SamSamskies]

@danygp I dug into the source code more and I figured out how to override the cursor. You have to set a getCursor prop on your DeckGL component. For my use case, I'm returning 'crosshair' as long as I'm in drawing mode. Here's the line in the source code that helped me figure it out. https://github.com/uber/deck.gl/blob/995c3c1e3ea83a463bda32699a9529a84f906142/modules/core/src/lib/deck.js#L425

[danygp]

Thanks @SamSamskies !!!

It seems that using getCursor prop in DeckGL component, I can override cursor!!

The problem was that when I was reading documentation, I didn´t see any getCursor prop in DeckGL component, so I tested this prop in ReactMapGL component but not in DeckGL....

Thanks again!!

Best Regards

[adriangabardo]

Hey @danygp, can you provide the example code for this if you still have it? I've been beating my head against the wall because of this little thing

[SamSamskies]

@adriangabardo here's an example https://codesandbox.io/s/ql8r5w4yzw

Example of setting cursor style to crosshair using getCursor prop:

<DeckGL getCursor={() => "crosshair"} />

Cursor styles:
https://developer.mozilla.org/en-US/docs/Web/CSS/cursor

[adriangabardo]

That indeed works. Thanks for the help @SamSamskies

[Shadowsych]

I just found this out and wanted to share for anybody else who encounters this issue.

If you want Deckgl to inherit the same cursor as ReactMapGL, then use the inherit property:

<DeckGL getCursor={() => "inherit"} />