How to getCursor for an individual Layer

[gala-m]

I'm trying to get a specific layer to have a pointer instead of grab cursor. getCursor works in <ReactMapGL>, but that makes the whole map window have that same cursor.

Is there anyaway to have getCursor in <Layer> in a situation like this:

<Source
    id="points" 
    type="geojson" 
    data={allData} 
    >
    <Layer {...layerStyle} />
</Source> 

There may have been a similar issue here, with a solution that was a dead end link.

[sheethalpatila]

have you enabled the pop-up for that layer ?
i needed that solution so if you have tried that please reply...

i have tried like this but i am neither able to hover the layer nor to enable the popup

}} } > <Layer className="layeee" id={"deliverylineLayer"+index} type="line" source={"deliverylineLayer"+index} layout={{ "line-join": "round", "line-cap": "round" }} paint={{ "line-color": "#0033cc", "line-width":10 }} > </Layer>

[gala-m]

I found a work-around for my problem. I was not using any popups, but see if this is useful to you.

I changed the cursor manually by listening for when the mouse hovered over the specific layer.

Here, set the normal pointer:

const [pointer, setPointer] = useState(() => 
    ({isHovering, isDragging}) => isDragging ? 'grabbing' : isHovering ? 'grab' : 'grab'
)

The id of my layerStyle is 'points'.

This is the function that the ReactMapGL calls when any part/layer of the map is hovered:

const onHover = useCallback(event => {
    const feature = event.features && event.features[0];

    if (feature && feature.layer.id === "points") {
        setPointer(() => 
            ({isHovering, isDragging}) => isDragging ? 'grabbing' : isHovering ? 'pointer' : 'pointer'
        )
    } else {
        setPointer(() => 
            ({isHovering, isDragging}) => isDragging ? 'grabbing' : isHovering ? 'grab' : 'grab'
        )           
    }
}, []);

Then in the render (where the Source and Layer parts are still the same):

<ReactMapGL 
    {...viewport} 
    width="100vw" 
    height="100vh" 
    onViewportChange={setViewport} 
    mapStyle={'mapbox://styles/mapbox/streets-v11'}
    getCursor={pointer} 
    onHover={onHover} <----
    >
    <Source
        id="stops" 
        type="geojson" 
        data={allData} 
        >
        <Layer {...layerStyle}/>
    </Source>

And that changes the cursor from a grab to pointer, whenever you hover over the 'points' layer.

[Pessimistress]

https://visgl.github.io/react-map-gl/examples/custom-cursor