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: [email protected]
• 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. [email protected])

[manodupont]

@Pessimistress
[email protected]

[chrisgervang]

@manodupont I read through your code and if I understand, you're creating one <Source>. Is the <Source> working at all? Does tileName ever change? "Dynamic" can mean many things. The Source docs say

Once a <Source> is mounted, the following props should not change... id type

I see you're using key correctly.. can you see if the old Source is unmounting when its value is changed?

[manodupont]

@chrisgervang Hi thanks for this reply. Its been a while I may not remember but it seemed like when the component was unmounting it was not remounting correctly.

Note that I switched library now and I am using TrimbleMaps so I think something might have changed.