Default cursor behavior (flickering)

[wafisher]

I'd like for the cursor to be the -webkit-grab type while it's over anything but a marker. And for it turn into a pointer when it's over a (clickable) marker.

What I see instead is that the cursor flickers whenever it passes over a feature, though I'm not sure how react-map-gl defines a feature — it seems quite broadly. The relevant code in the repo is here. And here's a video I took of the behavior.

The examples confuse me because the author explicitly sets the cursor to be a crosshair. When I disable the effect of that in DevTools, the examples behave similarly strangely (as shown in the video).

Any insight into how to create the desired behavior?

Thanks,
Will

[Pessimistress]

You can provide your own getCursor prop to the map component. This is the default:
https://github.com/uber/react-map-gl/blob/fbdcbf389166965646b0483d8ce31d41b8ba929c/src/components/interactive-map.js#L114

[wafisher]

Great, so this is intended behavior (per repo authors). For anyone else wanting to fix/change this, I added this to ReactMapGL:

getCursor={({isDragging, isHovering}) => isDragging ? config.CURSOR.GRABBING : config.CURSOR.GRAB}

and copied react-map-gl/src/config.js into my src/ since create-react-app was having issues with me importing it directly.

[chriszrc]

@Pessimistress The docs still say that cursor only accepts a string:

https://visgl.github.io/react-map-gl/docs/api-reference/map#cursor

Had to dig up this issue to realize if I provide a custom cursor, that I also need to provide this custom fn.

[EDIT] oh, so now I'm realizing all of this is outdated. The custom cursor example doesn't cover leaving in the place the default cursor behavior:

https://github.com/visgl/react-map-gl/blob/7.0-release/examples/custom-cursor/src/app.tsx

Am I to assume we have to implement onDragStart, onDragEtc... to make this work normally again?

[chriszrc]

@Pessimistress Any word here on how to preserve the default isDragging cursor handling and also use a custom cursor for layer features? For now, I'm not use the react-mapbox-gl cursor property and instead using an event handler with "onMouseMove", that sets the cursor manually on the canvas:

mapRef!.current!.getCanvas().style.cursor = "pointer";
...
mapRef!.current!.getCanvas().style.cursor = "";

This preserves the default grab/grabbing behavior