How do I make a graphics layer appear above others

[CalvinLe360]

Hi, I'm looking to find out how to make a graphics layer appear above others after adding to map.

Let's say that I have two layers, each containing a circle at the same location and size, with the only difference being colour. The first layer will be hidden by the second, but at some point I want the first layer to hide the second instead.

// layerA appears over layerB because layerB is added earlier
const layerB = new GraphicsLayer();
const layerA = new GraphicsLayer();
map.layers.add(layerB);
map.layers.add(layerA);

// graphic stuff
const geometry = new Circle({
    center: {
        x: 0,
        y: 0,
    },
    radius: 100,
    radiusUnit: 'meters',
});
const symbolA = new SimpleFillSymbol({
    color: [0, 0, 0, 1],
    style: 'solid'
    outline: {
        color: [0, 0, 0, 0],
    },
});
const symbolB = symbolA.clone();
symbolB.g = 255;

layerA.add(new Graphic({
    geometry: geometry,
    symbol: symbolA,
});
layerB.add(new Graphic({
    geometry: geometry,
    symbol: symbolB,
});

// TODO: Make layerB appear over layerA

 Code might not be correct, but I wanted to lay out the form of the problem. If layerB gets put over layerA, then a green circle should appear instead of the black circle. How can I do this?

[CalvinLe360 · Accepted solution]

I sorted the layers on the map and it did what I wanted to do.