Source and Layer update dynamically not working

[manodupont]

Description

Hi.

I still have issue with react-map-gl to update the Source dynamically. It may be super silly but I can't figure out whats wrong with this approach. Let's say I have multiple "tilesets" that are referenced by an id named tileName

Expected Behavior

No response

Steps to Reproduce

const sprayedLayer = {
        id: `sprayed-layer-${props.tileName}`, // Add id that's unique per map
        type: 'fill',
        source: `sprayed-tiles-${props.tileName}`,
        'source-layer': getSourceLayerId(),
        paint: {
            'fill-color': [
                'interpolate',
                ['linear'],
                ['get', 'ratio'],
                0, '#30dc30',  // Green at low values
                0.5, '#FFFF00',  // Yellow at medium values
                1, '#e60b0b'   // Red at high values
            ],
            'fill-opacity': fillOpacity
        }
    };

<Map
                {...viewport}
                style={{width: '100%', height: '100%'}}
                mapStyle="mapbox://styles/mapbox/satellite-streets-v11"
                mapboxAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
            >
                <Source
                    key={`source-${props.tileName}`}
                    id={`sprayed-tiles-${props.tileName}`}  // Add id that's unique per map
                    type="vector"
                    tiles={[`${process.env.REACT_APP_TILE_SERVER_HOST}/data/${props.tileName}/{z}/{x}/{y}.pbf`]}
                    minzoom={0}
                    maxzoom={12}
                >
                    <Layer key={`layer-${props.tileName}`}
                           {...sprayedLayer} />
                </Source>
                <ScaleControl/>
            </Map>

Environment

• Map library: react-map-gl@7.1.7
• Browser: Chrome 129
• OS: MacOS

Logs

No response

[brecistoptal]

I also want to dynamically add lines between markers. Markers can be added dynamically, as data changes, but changing the lines causes the error sourceID has changed. I even tried unmounting the map first manually.

[Pessimistress]

@brecistoptal can't say for sure what is happening with your app but it's unlikely the same issue as the original poster's.

Make sure you are following the Source docs recommendation:

If add/remove multiple JSX sources dynamically, make sure you use React's key prop to give each element a stable identity.

If you have any more questions, I suggest you open your own Discussion thread and share your code.

[Pessimistress]

@manodupont Please specify the map library you are using (e.g. mapbox-gl@3.0.0)

[manodupont]

@Pessimistress mapbox-gl@3.6.0