Icon layer appears behind deck.gl overlay

[kaligrafy]

Hi!

I would like that the icons appear in front of the deck.gl overlay layer (the black lines with arrows).

I tried moving the overlay before the Source and add beforeId attribute but nothing works. Can someone explain how to fix that? Thanks!

<Map
    ref={mapRef}
    {...viewState}
    onMove={(evt) => setViewState(evt.viewState)}
    onLoad={onMapLoad}
    style={{ width: '100%', height: '100%' }}
    mapStyle={{
        version: 8,
        sources: {
            osm: {
                type: 'raster',
                tiles: ['https://c.tile.openstreetmap.org/{z}/{x}/{y}.png'],
                tileSize: 256,
                maxzoom: 20
            }
        },
        layers: [
            {
                id: 'osm-tiles',
                type: 'raster',
                source: 'osm',
                paint: {
                    'raster-opacity': 0.5
                }
            }
        ]
    }}
>
    {mapLoaded && (
        <Source id="places" type="geojson" data={props.places}>
            <Layer
                id="places-layer"
                type="symbol"
                layout={{
                    'icon-image': ['get', 'activity'],
                    'icon-size': [
                        'interpolate',
                        ['linear'],
                        ['zoom'],
                        8,
                        ['case', ['==', ['get', 'active'], 'true'], 0.3, 0.2], // Very small at low zoom
                        12,
                        ['case', ['==', ['get', 'active'], 'true'], 0.5, 0.4], // Medium at mid zoom
                        16,
                        ['case', ['==', ['get', 'active'], 'true'], 0.8, 0.6] // Current size at high zoom
                    ],
                    'icon-anchor': 'bottom',
                    'icon-allow-overlap': true,
                    'icon-ignore-placement': true,
                    'icon-optional': false,
                    'icon-pitch-alignment': 'viewport',
                    'icon-rotation-alignment': 'viewport'
                }}
                paint={{
                    'icon-opacity': 1,
                    'icon-halo-color': 'rgba(255, 255, 255, 0.8)',
                    'icon-halo-width': 2
                }}
            />
        </Source>
    )}
    <DeckGLOverlay layers={layers} interleaved={true} />
</Map>

[HarelM]

Why not use maplibre for this?
Generally speaking deck.gl is using maplibre as base map in most cases, so I would consider using the icons in a deck.gl layer or use maplibre fully to present the lines.

[kaligrafy]

Thanks for the suggestion, but creating custom shaders in mapllibre is way more complicated than with deck.gl. I tried to create my animated arrow line with maplibre and it involved recreating a whole program and bucket since we cannot just add a timer uniform to the line layer. On the image, we don't see it, but the arrows are moving.

[kaligrafy]

We should be able to render the overlay behind the maplibre layers. But I can't find out how.

[HarelM]

Try the deck.gl slack, maybe they will be more helpful than me... Sorry...

[kaligrafy]

I think it is the maplibre overlay that is always rendered on top of the rest. But I will check the code.

[kaligrafy]

Found how to do that: we need to add beforeId in the PathLayer params inside the deck.gl overlay, instead of the deck gl overlay params.