source is required by some layer types in the Mapbox style specification. If is used as the child of a Source component, this prop will be overwritten by the id of the parent source.
This documentation implies to me that specifying a source for a Layer is optional in some situations, and that the source is meaningless if nested under a Source, because then the prop is overwritten by the id of the parent source.
That does seem to be the case in my testing when a Layer is a direct/immediate child/descendant of a Source.
For reasons unclear to me it seems that if a Layer component is NOT a direct child, like if it's wrapped in MyHelperWhateverComponent, then the automatic source <=> layer connection breaks. In this case I must pass an explicit source for the Layer to work properly with the Source data despite what the documentation says.
<Source
id="the-source"
type="geojson"
data={{
type: "FeatureCollection",
features: [
{
type: "Feature",
properties: {
lat_y: 37.8,
long_x: -122.4,
nation1: null,
nation2: null,
note: null
},
geometry: {
type: "Point",
coordinates: [-122.4, 37.8]
}
}
]
}}
>
{/* This wraps the exact same functionality as the Layer below. It is seemingly identical to the code below, but requires an explicit sourceId or it will not render the Layer within */}
<MyLayer sourceId="the-source" />
{/* No source prop required. Source is inferred automatically and things work perfectly fine */
{/* <Layer
type="symbol"
layout={{
"icon-allow-overlap": true,
"icon-ignore-placement": true,
"text-allow-overlap": true,
"text-ignore-placement": true,
"icon-size": 1,
"icon-image": "myImage"
}}
/> */}
</Source>
Expected Behavior
Based on the documentation I would assume that a Layer does not need a source specified if it's a child of a Source. Regardless of the exact tree hierarchy of components.
Description
Documentation for
Layer
states the following.This documentation implies to me that specifying a
source
for aLayer
is optional in some situations, and that thesource
is meaningless if nested under aSource
, because then the prop is overwritten by the id of the parent source.That does seem to be the case in my testing when a
Layer
is a direct/immediate child/descendant of aSource
.For reasons unclear to me it seems that if a
Layer
component is NOT a direct child, like if it's wrapped inMyHelperWhateverComponent
, then the automaticsource <=> layer
connection breaks. In this case I must pass an explicitsource
for theLayer
to work properly with theSource
data despite what the documentation says.Expected Behavior
Based on the documentation I would assume that a
Layer
does not need asource
specified if it's a child of aSource
. Regardless of the exact tree hierarchy of components.Steps to Reproduce
https://codesandbox.io/s/cranky-night-ni263i?file=/src/index.js
<Source />
layer without an explicitid
<Layer />
without an explicit source id<Layer />
as above<Layer />
does not render without an explicit source id attachedEnvironment
Logs
No response