React-mapbox-gl: GeoJSONLayer layerOptions Prop error

[dm261395]

@types/mapbox-gl": "0.45.0"
mapbox-gl": "0.46.0"
react-mapbox-gl": "3.8.0"

Hello. I have discovered a bug related to passing a layerOptions prop to the GeoJSONLayer component, specifically when setting the id prop of the layerOptions object.

In geojson-layer.ts, within the createLayer function, we see that map.addLayer is called when creating each internal layer for the GeoJSONLayer (symbol layer, line layer, etc.).

In particular, by spreading the layerOptions object, the ID for the layer being created is overwritten with the ID of the layerOptions object. This causes the error error: Error: Layer with id <id> already exists on this map, since multiple layers are being added to the map with the same ID.

The layerOptions prop is typed as Layer from MapboxGL, which requires an id prop. This does not seem appropriate.

This also caused my symbol mouse handlers to not work, and this may be the cause of previous issues https://github.com/alex3165/react-mapbox-gl/issues/483.

[admataz]

same error here, example:

<GeoJSONLayer
              data={countriesGeojson}
              fillPaint={{
                "fill-color": "purple",
                "fill-outline-color": "yellow"
              }}
              layerOptions={{
                filter:['==','iso_a3', 'AFG'],
                id:'thisisnotworking', 
                type:"fill",
              }}
            />

[rlueder]

Possibly related to https://github.com/alex3165/react-mapbox-gl/issues/652 ?

[qlerebours]

I fixed it in my local env, I'll make a PR soon

[qlerebours]

@dm261395 , this is fixed in my PR, if needed you can use npm patch package to patch the lib while this is not merged.

I will also comment #652 that will be fixed with this PR to show the working code

[AndrewEastwood]

if it's fixed ... then why it's not merged yet ?

[david-deepblocks]

I'm running into the same issue. It would be better imho to be able to name all the layers being created through GeoJSONLayer.