Mapbox crashes when using "aboveLayerID" property

[rnmapbox]

Mapbox crashes when using "aboveLayerID" property

[mfazekas]

@systemlevel with #57 you should be able to declare in any order and RNMapbox should wait for the layer to be inserted bellow.

[mfazekas]

See also nitaliano/react-native-mapbox-gl#1135.

The issue is that at the time #customSourceFill added to the map, the #aboveLayerID is not yet added to the map therefore it will not find the layer and that's the cause of crash.

Ideally in such cases we'd defer the insertion until the referred layer is added

[systemlevel]

@mfazekas Thank you for that insight. What is the best way to ensure a layer is added to the map? Does the order in which I define the layers have any impact on that order?

For example, if I were to switch these layers around:

       <Mapbox.RasterSource id="rasterSourceBasemap" tileSize={256} url={url}>
          <Mapbox.RasterLayer
            id="basemap"
            sourceID="rasterSourceBasemap"
            style={{rasterOpacity: 1}}
          />
        </Mapbox.RasterSource>

        <Mapbox.VectorSource
          id="customSourceExample"
          url={VECTOR_SOURCE_URL}
        >
          <Mapbox.FillLayer
            id="customSourceFill"
            sourceLayerID="roadless"
            style={mbStyles.boxFill}
            aboveLayerID="basemap"
          />
        </Mapbox.VectorSource>

Would that load in the proper order?

[mfazekas]

@systemlevel yep that should work.

[systemlevel]

@mfazekas Excellent update. Thank you. That is perfect!

[systemlevel]

@mfazekas Doing some more testing on this tonight. I'm still having some issues getting the aboveLayerID property working.

Here is some more context:

1. We have made a custom style map in mapbox studio
2. We have added various vector layers to that mapbox studio map (these are layers we uploaded into studio)
3. When I try to order those layers in the react-native-mapbox-gl client they don't seem to respond to the order I try to define whether it be via aboveLayerID or layerIndex.

I'm able to control the visibility but I'm unable to control where they sit in relation to the RasterSource layer:

       <Mapbox.RasterSource id="rasterSourceBasemap" tileSize={256} url={url}>
          <Mapbox.RasterLayer
            id="basemap"
            sourceID="rasterSourceBasemap"
            style={{rasterOpacity: 1}}
          />
        </Mapbox.RasterSource>