[Bug]: aboveLayerID and belowLayerID is not working

[somasekharkakarla]

Mapbox Implementation

Mapbox

Mapbox Version

10.0.11

Platform

Android

@rnmapbox/maps version

10.0.11

Standalone component to reproduce

import React from 'react';
import {View, SafeAreaView} from 'react-native';
import Mapbox from '@rnmapbox/maps';
Mapbox.setWellKnownTileServer('mapbox');

function App() {
  return (
    <SafeAreaView style={{flex: 1}}>
      <View style={{flex: 1}}>
        <View style={{flex: 1}}>
          <Mapbox.MapView style={{flex: 1}}>
            <Mapbox.ShapeSource
              id="layerShape1"
              shape={{
                type: 'FeatureCollection',
                features: [
                  {
                    type: 'Feature',
                    properties: {},
                    geometry: {
                      coordinates: [
                        [
                          [21.45378587617762, -30.927389493460453],
                          [28.45632001172416, -30.927389493460453],
                          [28.45632001172416, -26.785285894952878],
                          [21.45378587617762, -26.785285894952878],
                          [21.45378587617762, -30.927389493460453],
                        ],
                      ],
                      type: 'Polygon',
                    },
                  },
                ],
              }}>
              <Mapbox.FillLayer
                id="layerShape1_1"
                belowLayerID={'layerShape2_1'}
                style={{
                  fillColor: 'red',
                  fillOpacity: 0.5,
                }}
              />
            </Mapbox.ShapeSource>
            <Mapbox.ShapeSource
              id="layerShape2"
              shape={{
                type: 'FeatureCollection',
                features: [
                  {
                    type: 'Feature',
                    properties: {},
                    geometry: {
                      coordinates: [
                        [
                          [20.301493903642296, -25.99586902816941],
                          [20.301493903642296, -30.141598495038032],
                          [27.41504821231871, -30.141598495038032],
                          [27.41504821231871, -25.99586902816941],
                          [20.301493903642296, -25.99586902816941],
                        ],
                      ],
                      type: 'Polygon',
                    },
                  },
                ],
              }}>
              <Mapbox.FillLayer
                aboveLayerID={'layerShape1_1'}
                belowLayerID={'layerShape3_1'}
                id="layerShape2_1"
                style={{
                  fillColor: 'blue',
                  fillOpacity: 0.5,
                }}
              />
            </Mapbox.ShapeSource>

            <Mapbox.ShapeSource
              id="layerShape3"
              shape={{
                type: 'FeatureCollection',
                features: [
                  {
                    type: 'Feature',
                    properties: {},
                    geometry: {
                      coordinates: [
                        [
                          [18.49727785709905, -24.446994796685757],
                          [18.49727785709905, -29.024343444057266],
                          [26.161309407118722, -29.024343444057266],
                          [26.161309407118722, -24.446994796685757],
                          [18.49727785709905, -24.446994796685757],
                        ],
                      ],
                      type: 'Polygon',
                    },
                  },
                ],
              }}>
              <Mapbox.FillLayer
                id="layerShape3_1"
                aboveLayerID={'layerShape2_1'}
                style={{
                  fillColor: 'green',
                  fillOpacity: 0.5,
                }}
              />
            </Mapbox.ShapeSource>

            <Mapbox.Camera
              // minZoomLevel={mapMetaData.minzoom}
              zoomLevel={3}
              centerCoordinate={[21.45378587617762, -30.927389493460453, 5]}
              animationMode="flyTo"
            />
          </Mapbox.MapView>
        </View>
      </View>
    </SafeAreaView>
  );
}

export default App;

Observed behavior and steps to reproduce

in 10.0.10 it is working in android but not in ios. Now 10.0.11 it stopped working in android too. if i place in an order in return also 70% time it is not following order (tested in 10.0.10). Is there any other way i can achieve this.

Expected behavior

to work with by layers defined

Notes / preliminary analysis

No response

Additional links and references

No response

[somasekharkakarla]

Hi @mfazekas, can you please review it. Our clients rising to many tickets mainly form iOS

[paperrin]

Your aboveLayerId and belowLayerId that exactly match the default render order (so they have no effect in this case)

Here is how I understand it :

• 1_1; 2_1; 3_1 (render order; so, from back to front of screen)
• 1_1 below 2_1 => 1_1; 2_1; 3_1 (changes nothing)
• 2_1 above 1_1 => 1_1; 2_1; 3_1 (changes nothing)
• 2_1 below 3_1 => 1_1; 2_1; 3_1 (changes nothing)
• 3_1 above 2_1 => 1_1; 2_1; 3_1 (changes nothing)

What order do you want those layers in, what result do you except from front to back of screen for example ?

I might just be wrong though, I'm using this library daily, but some parts are still not well documented and understandable, and there are many bugs...

[somasekharkakarla]

Hi @paperrin i want to render like

layerShape3   -> top
------------
layerShape2  -> middle
-----------
layerShape1. -> bottom

if i don't give above and below. the order is changing

[somasekharkakarla]

Hi @mfazekas and @paperrin

Here's what we are trying to achieve:

We want to render all three layers but define the order such that we control what is visible on top. For example, we want to render feature layer on top of a custom raster layer.

It was working fine on Android in the older version (tested in 10.0.6) but now it is not working in latest version and old version also (tested in my repo it has old version 10.0.6 which is not updated since May) . However in the iOS, it's only considering the top layer i.e we can't see the custom raster layer, only the one features layer is visible. I'm attaching the screenshots for comparison.

Version :

"@rnmapbox/maps": "10.0.11",
    "react": "18.2.0",
    "react-native": "0.71.4"

code:

return (
    <SafeAreaView style={{flex: 1}}>
      <View style={{flex: 1}}>
        <View style={{flex: 1}}>
          <Mapbox.MapView style={{flex: 1}}>
            <Mapbox.ShapeSource
              id="layerShape1"
              shape={{
                type: 'FeatureCollection',
                features: [
                  {
                    type: 'Feature',
                    properties: {},
                    geometry: {
                      coordinates: [
                        [
                          [21.45378587617762, -30.927389493460453],
                          [28.45632001172416, -30.927389493460453],
                          [28.45632001172416, -26.785285894952878],
                          [21.45378587617762, -26.785285894952878],
                          [21.45378587617762, -30.927389493460453],
                        ],
                      ],
                      type: 'Polygon',
                    },
                  },
                ],
              }}>
              <Mapbox.FillLayer
                id="layerShape11"
                belowLayerID={'layerShape21'}
                style={{
                  fillColor: 'red',
                  fillOpacity: 0.5,
                }}
              />
            </Mapbox.ShapeSource>
            <Mapbox.ShapeSource
              id="layerShape2"
              shape={{
                type: 'FeatureCollection',
                features: [
                  {
                    type: 'Feature',
                    properties: {},
                    geometry: {
                      coordinates: [
                        [
                          [20.301493903642296, -25.99586902816941],
                          [20.301493903642296, -30.141598495038032],
                          [27.41504821231871, -30.141598495038032],
                          [27.41504821231871, -25.99586902816941],
                          [20.301493903642296, -25.99586902816941],
                        ],
                      ],
                      type: 'Polygon',
                    },
                  },
                ],
              }}>
              <Mapbox.FillLayer
                aboveLayerID={'layerShape11'}
                belowLayerID={'layerShape31'}
                id="layerShape21"
                style={{
                  fillColor: 'blue',
                  fillOpacity: 0.5,
                }}
              />
            </Mapbox.ShapeSource>

            <Mapbox.ShapeSource
              id="layerShape3"
              shape={{
                type: 'FeatureCollection',
                features: [
                  {
                    type: 'Feature',
                    properties: {},
                    geometry: {
                      coordinates: [
                        [
                          [18.49727785709905, -24.446994796685757],
                          [18.49727785709905, -29.024343444057266],
                          [26.161309407118722, -29.024343444057266],
                          [26.161309407118722, -24.446994796685757],
                          [18.49727785709905, -24.446994796685757],
                        ],
                      ],
                      type: 'Polygon',
                    },
                  },
                ],
              }}>
              <Mapbox.FillLayer
                id="layerShape31"
                aboveLayerID={'layerShape21'}
                style={{
                  fillColor: 'green',
                  fillOpacity: 0.5,
                }}
              />
            </Mapbox.ShapeSource>

            <Mapbox.Camera
              // minZoomLevel={mapMetaData.minzoom}
              zoomLevel={3}
              centerCoordinate={[21.45378587617762, -30.927389493460453, 5]}
              animationMode="flyTo"
            />
          </Mapbox.MapView>
        </View>
      </View>
    </SafeAreaView>
  );

return (
    <SafeAreaView style={{flex: 1}}>
      <View style={{flex: 1}}>
        <View style={{flex: 1}}>
          <Mapbox.MapView style={{flex: 1}}>
            <Mapbox.ShapeSource
              id="layerShape1"
              shape={{
                type: 'FeatureCollection',
                features: [
                  {
                    type: 'Feature',
                    properties: {},
                    geometry: {
                      coordinates: [
                        [
                          [21.45378587617762, -30.927389493460453],
                          [28.45632001172416, -30.927389493460453],
                          [28.45632001172416, -26.785285894952878],
                          [21.45378587617762, -26.785285894952878],
                          [21.45378587617762, -30.927389493460453],
                        ],
                      ],
                      type: 'Polygon',
                    },
                  },
                ],
              }}>
              <Mapbox.FillLayer
                id="layerShape11"
                belowLayerID={'layerShape21'}    ----------> removing this
                style={{
                  fillColor: 'red',
                  fillOpacity: 0.5,
                }}
              />
            </Mapbox.ShapeSource>
            <Mapbox.ShapeSource
              id="layerShape2"
              shape={{
                type: 'FeatureCollection',
                features: [
                  {
                    type: 'Feature',
                    properties: {},
                    geometry: {
                      coordinates: [
                        [
                          [20.301493903642296, -25.99586902816941],
                          [20.301493903642296, -30.141598495038032],
                          [27.41504821231871, -30.141598495038032],
                          [27.41504821231871, -25.99586902816941],
                          [20.301493903642296, -25.99586902816941],
                        ],
                      ],
                      type: 'Polygon',
                    },
                  },
                ],
              }}>
              <Mapbox.FillLayer
                aboveLayerID={'layerShape11'}
                belowLayerID={'layerShape31'}
                id="layerShape21"
                style={{
                  fillColor: 'blue',
                  fillOpacity: 0.5,
                }}
              />
            </Mapbox.ShapeSource>

            <Mapbox.ShapeSource
              id="layerShape3"
              shape={{
                type: 'FeatureCollection',
                features: [
                  {
                    type: 'Feature',
                    properties: {},
                    geometry: {
                      coordinates: [
                        [
                          [18.49727785709905, -24.446994796685757],
                          [18.49727785709905, -29.024343444057266],
                          [26.161309407118722, -29.024343444057266],
                          [26.161309407118722, -24.446994796685757],
                          [18.49727785709905, -24.446994796685757],
                        ],
                      ],
                      type: 'Polygon',
                    },
                  },
                ],
              }}>
              <Mapbox.FillLayer
                id="layerShape31"
                aboveLayerID={'layerShape21'}
                style={{
                  fillColor: 'green',
                  fillOpacity: 0.5,
                }}
              />
            </Mapbox.ShapeSource>

            <Mapbox.Camera
              // minZoomLevel={mapMetaData.minzoom}
              zoomLevel={3}
              centerCoordinate={[21.45378587617762, -30.927389493460453, 5]}
              animationMode="flyTo"
            />
          </Mapbox.MapView>
        </View>
      </View>
    </SafeAreaView>
  );

[mfazekas]

@somasekharkakarla first you don't want to have both above and below layer id as only one of them is considered, we'll add a warning for that use.
second you don't want to make a cycle of with above/below layer id's as before adding a layer it waits for the layer with after or below to be added. But if there is a cycle none of the layers will be added in the end