react-map-gl using multiple sources makes one of them invisible

Question

I've specified two <Source> elements under ReactMapGL trying to load two different FeatureCollections with different coloring. It doesn't work when both Sources are present as it hides the first (id: maps-with-yield) and shows the latter (id: maps-without-yield).

The following warning is also printed for the first Source.

TypeError: Cannot read property 'fill-color' of undefined

Are we not allowed to use multiple sources or am I doing something wrong here?

<MapGL
  {...viewport}
  mapboxApiAccessToken={accessToken}
  onViewportChange={viewport => setViewport(viewport)}
  onHover={onHover}
  onClick={onClick}
  onLoad={onLoad}
  width="100%"
  height="100%"
  scrollZoom={false}
  dragRotate={false}
  touchRotate={false}
  keyboard={false}
>
  {map && map.features.length > 0 ? (
    <Source id="maps-with-yield" type="geojson" data={map}>
      <Layer
        id="data"
        type="fill"
        paint={{
          'fill-color': {
            property: 'yield',
            stops: [
              [minYield, worstYieldColor],
              [maxYield, bestYieldColor]
            ]
          },
          'fill-outline-color': '#fff'
        }}
      />
    </Source>
  ) : null}
  {mapWithoutYield && mapWithoutYield.features.length > 0 ? (
    <Source id="maps-without-yield" type="geojson" data={mapWithoutYield}>
      <Layer
        id="data"
        type="fill"
        paint={{
          'fill-color': '#66AEEC',
          'fill-outline-color': '#fff'
        }}
      />
    </Source>
  ) : null}
</MapGL>

Note: property yield is always available as I've printed both map and mapWithoutYield data sets and checked.

Try to use same source and layer and modify features according type of data. — Dani Andújar, Nov 11 '21 at 17:17

score 3 · Answer 1 · answered Jun 13 '22 at 01:00

Based on my experience, react-map-gl does allow multiple sources. The problem here is likely to be the IDs given to different layers.

Even from different sources of data, you should still assign unique id to each individual layer for Mapbox to recognize them as well as make it easier for future development (for instance, setting active layers).

Same id ("data") will lead to your second layer overwritting the first one and that's the reason why the fill-color property cannot be read for your maps-with-yield layer.

score 0 · Answer 2 · answered Sep 12 '22 at 22:38

I had this problem and the issue was that I was using the same id for the two different layers, as described by Ethan. I had followed the GeoJSON code example, so I had this:

    const boundaryStyle = {
        'id': 'data',
        'type': 'line',
        'paint': {
            'line-color': "#f00"
        }
    }
    const protectedSegmentStyle = {
        'id': 'data',
        'type': 'line',
        'paint': {
            'line-color': "#00f",
            'line-width': 2
        }
    }

And then for the layers, I had the following:

          <Source type="geojson" data={protectedSegments}>
            <Layer {...protectedSegmentStyle} />
          </Source>
          <Source type="geojson" data={boundaries}>
            <Layer {...boundaryStyle} />
          </Source>

Of course, this was providing the same id of data for both layers, since the style objects were getting spread into the tag as arguments. So as soon as I provided unique ids in my style dictionaries, both layers appeared.

react-map-gl using multiple sources makes one of them invisible

2 Answers2