How to make drawn items appear on the top layer?

[Falke-Design]

Discussed in geoman-io/leaflet-geoman#1562

^{Originally posted by sarahjiang888 February 14, 2025}
The library I use is MapLibre-Geoman
I am building a map layer by layer with geoman.mapAdapter.addSource & geoman.mapAdapter.addLayer function.
But when I try to draw rectangle / polygon / ..., those drawn items will appear under above layer
Is there any way to make drawn items always appear on top of layer drawn with geoman.mapAdapter.addLayer?

the blue one is actually a drawn rectangle, but it appears under the layer drawn with geoman.mapAdapter.addLayer function, and causes it be partial-hidden.

`

    const mapStyles: maplibregl.StyleSpecification = {
        version: 8,
        sources: {},
        layers: [
            {
                id: 'background',
                type: 'background',
                paint: {
                    'background-color': 'white',
                },
            },
        ],
    };

    let geoman: Geoman;

    try {
        map.current = new maplibregl.Map({
            container: mapContainer.current as HTMLElement,
            style: mapStyles,
            center: displayCenter,
            zoom: zoomLevel,
            attributionControl: false,
        });

        geoman = new Geoman(map.current, {
            settings: {
                controlsPosition: 'top-right',
                throttlingDelay: 100,
            },
        });
    catch (error) {
        //...
    }

    if (map.current) {
        map.current.on('gm:loaded', async function () {
            try {
                // add layer by layer with geoman.mapAdapter.addSource & geoman.mapAdapter.addLayer function
            } catch (error) {
                //...
            }
        });
    }

`

[zxwild]

Maybe you add your layers after geoman adds its own layers. This case your layers are placed at the end, so they are on top.
So either add your layers before the geoman initilizing, or use moveLayer() maplibre method to move them deeper.