React-mapbox-gl: Layer event handlers are not being triggered as expected when using type raster

[laithalzyoud]

Hello everybody,

I'm trying to use the OnClick,OnMouseEnter,OnMouseLeave event handlers within the Layer component and they are not doing anything, i'm rendering images on the map using a source of type image and a layer of type raster and want to be able to click the image but when I click nothing happens! Here is how i'm implementing it:

const renderedImagesLayers = renderedImagesData.map((data) => 
            <Layer
            id={data.id}
            type={data.type}
            sourceId={data.sourceId}
            before={data.before}
            onMouseEnter={e => this.onToggleHover(e,'pointer')}
            onMouseLeave={e => this.onToggleHover(e,'')}
            onClick={e=>console.log(e)}
            ></Layer>
        )

I'm using the onClick method in the Map component as well, can this be causing the above issue?
I'm using the following versions:
react-mapbox-gl: "4.6.0"
react: "16.9.0",

[Robert-OP]

Hello, I have the same issue, no event handlers trigger when using Layer component of type "raster"

      <Source
        id="source_id"
        tileJsonSource={RASTER_SOURCE_OPTIONS}
      />
      <Layer
        type="raster"
        id="layer_id"
        sourceId="source_id"
        onClick={() => console.log('layer click')}
      />

[jevy-wangfei]

Same here, Mouse enter/leave and click are not triggered:

<Source id="source_id" tileJsonSource={Image_SOURCE_OPTIONS} />
<Layer type="raster" id="layer_id" sourceId="source_id"
            onMouseEnter={(map) => console.log('mouse enter', map)}
            onMouseLeave ={(map) => console.log('mouse leave', map)}
            onClick ={(map) => console.log('onclick', map)}
 />

[jussirantala]

I got the same problem with Layer and Feature when using heatmap type.

I use:
react-mapbox-gl @ 4.8.2
react @ 16.12.0
react-dom @ 16.12.0

[laithalzyoud]

Here is a workaround I used to avoid this bug by using a transparent GeoJSONLayer over my raster with the same size:

const polygonGeoJSON = {
                "type": "FeatureCollection",
                "features": [{
                    "id": "ID",
                    "type": "Feature",
                    "properties": {
                        "sourceId": SOURCE_ID
                   },
                    "geometry": {
                        "type": "Polygon",
                        "coordinates": YOUR_COORDINATES
                    }
                }]
}
const fillLayout = { visibility: 'visible' };
const fillPaint = {
    'fill-color': '#FFFFFF',
    'fill-opacity': 0
};

<GeoJSONLayer
     id={'geojson-' + IMAGE_KEY.id}
     data={polygonGeoJSON}
     fillLayout={fillLayout}
     fillPaint={fillPaint}
     fillOnClick={YOU_FUNCTION}
     fillOnMouseEnter={e => this.onToggleHover(e, 'pointer')}
     fillOnMouseLeave={e => this.onToggleHover(e, '')}
/>