Consistent and reliable layer hierarchy

This is rather a conceptual problem we’re experiencing and not a code error or similar. Therefore, the issue template wasn’t applicable so far. Please just let me know if I should do something differently!

---

We’re trying to achieve a consistent order of layers in our App. Assume that we have the following layers we add.

• zone polygon
• user location
• zone markers

Now it’s clear that we can define this belowLayerID or aboveLayerID. The problem we’re having is that user location is only conditionally rendered in our App. What happens now when zone markers specify it as aboveLayerID but it doesn’t exist? I’d assume it moves to the same level as zone polygon which is not what we want.

We want to be deterministic no matter whether some layers of the “layer-chain” are rendered or not.

We were also looking into layerIndex. But here the behaviour was also pretty surprising and dynamic. At least it appeared to us like this. Using very high numbers (10000+) for the lowest element did result in Mapbox errors (some out of bounds exception). It was working somehow when we used numbers below 116, but also then it was sometimes even below mapbox rendered layers.

Is there some idiomatic way how we can do this? Can you recommend an approach for us?

We also did not find proper docs for layerIndex. Why is there a maximum number that we can give? We assumed it to be similar to z-index, but apparently there is something else behind it.

Thanks already everyone for making it that far reading through our issue! 😄 The example is of course simplified, there are many layers we are rendering in our App and it’s rather complicated.

[mfazekas]

Something like this can be tried, where we have persistent empty separator layers and we position above/below those.

import React from 'react';
import { Button } from 'react-native';
import {
  MapView,
  ShapeSource,
  SymbolLayer,
  CircleLayer,
  Camera,
} from '@rnmapbox/maps';

const styles = {
  mapView: { flex: 1 },
  circleLayer: {
    circleRadiusTransition: { duration: 5000, delay: 0 },
    circleColor: '#ff0000',
  },
};

const emptyFeatures = {
  type: 'FeatureCollection',
  features: [],
};

const features = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      id: 'a-feature',
      properties: {
        icon: 'example',
        text: 'example-icon-and-label',
      },
      geometry: {
        type: 'Point',
        coordinates: [-74.00597, 40.71427],
      },
    },
    {
      type: 'Feature',
      id: 'b-feature',
      properties: {
        text: 'just-label',
      },
      geometry: {
        type: 'Point',
        coordinates: [-74.001097, 40.71527],
      },
    },
    {
      type: 'Feature',
      id: 'c-feature',
      properties: {
        icon: 'example',
      },
      geometry: {
        type: 'Point',
        coordinates: [-74.00697, 40.72427],
      },
    },
  ],
};

function moveBy(features, d) {
  return {
    type: 'FeatureCollection',
    features: features.features.map((i) => ({
      ...i,
      geometry: {
        ...i.geometry,
        coordinates: [
          i.geometry.coordinates[0] + d,
          i.geometry.coordinates[1] + d,
        ],
      },
    })),
  };
}

const features1 = moveBy(features, 0.0001);
const features2 = moveBy(features, 0.0002);
const features3 = moveBy(features, 0.0003);

class BugReportExample extends React.Component {
  state = {
    radius: 20,
  };

  render() {
    const circleLayerStyle = {
      ...styles.circleLayer,
      ...{ circleRadius: this.state.radius },
    };

    return (
      <>
        <Button
          title="Grow"
          onPress={() => this.setState({ radius: this.state.radius + 20 })}
        />
        <MapView style={styles.mapView}>
          <Camera centerCoordinate={[-74.00597, 40.71427]} zoomLevel={14} />
          <ShapeSource id="separator-source" shape={emptyFeatures}>
            <CircleLayer id={'separator-1'} />
            <CircleLayer id={'separator-2'} />
            <CircleLayer id={'separator-3'} />
          </ShapeSource>

          {true && (
            <ShapeSource id={'shape-source-id-0'} shape={features}>
              <CircleLayer
                id={'circle-layer0'}
                style={{ circleRadius: 20, circleColor: 'red' }}
                belowLayerID={'separator-2'}
              />
            </ShapeSource>
          )}

          {true && (
            <ShapeSource id={'shape-source-id-1'} shape={features2}>
              <CircleLayer
                id={'circle-layer1'}
                style={{ circleRadius: 20, circleColor: 'green' }}
                aboveLayerID={'separator-2'}
              />
            </ShapeSource>
          )}
          {true && (
            <ShapeSource id={'shape-source-id-2'} shape={features3}>
              <CircleLayer
                id={'circle-layer3'}
                style={{ circleRadius: 20, circleColor: 'blue' }}
                aboveLayerID={'separator-3'}
              />
            </ShapeSource>
          )}
        </MapView>
      </>
    );
  }
}

export default BugReportExample;

[mwood23]

@mfazekas Could you provide a code snippet of how this would be implemented? I’m having trouble figuring out how to do that.