visgl / react-map-gl

React friendly API wrapper around MapboxGL JS
http://visgl.github.io/react-map-gl/
Other
7.88k stars 1.35k forks source link

[Bug] Layer component must have source prop when not an immediate descendent of Source component #2099

Open williamhaley opened 1 year ago

williamhaley commented 1 year ago

Description

Documentation for Layer states the following.

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.

Steps to Reproduce

https://codesandbox.io/s/cranky-night-ni263i?file=/src/index.js

Environment

Logs

No response

augini commented 1 year ago

I experienced the same issue and a fix would be really appreciated for this as it is not obvious in the documentation as well.