Get custom property in addLayer 'layout' - works selectively

Question

I'm using Mapbox GL JS to create custom maps with travel-tours and I have following "strange" error:

That's my "code":

const transportIconGeoJsonData = {
    'type': 'FeatureCollection',
    'features': [
        {
            'type': 'Feature',              
            'geometry': {
                'type': 'Point',
                'coordinates': [-59.492456, 13.074603]
            },
            'properties': {
                'icon': 'planeIcon',
                'rotate': true,
                'alignment': 'map'
            }
        },
        {
            'type': 'Feature',              
            'geometry': {
                'type': 'Point',
                'coordinates': [-60.992936, 14.020228]
            },
            'properties': {
                'icon': 'shipIcon',
                'rotate': false,
                'alignment': 'viewport'
            }
        },
    ]
};


map.on('load', () => {
    map.addSource('transportSourceIcon', {
        'type': 'geojson',
        'data': transportIconGeoJsonData
    });

    map.addLayer({
        id: 'transport-icon',
        type: 'symbol',
        source: 'transportSourceIcon',
        layout: {
            'icon-image': ['get', 'icon'], // <- works perfectly!
            'icon-size': 0.5,
            'icon-rotate': ['get', 'rotation'], // <- works perfectly!
            'icon-rotation-alignment': ['get', 'alignment'], // <- does not work ...
            'icon-allow-overlap': true,
            'icon-ignore-placement': true
        }
    });
});

I'm able to get properties "icon" and "rotation" but not "alignment". Console shows:

Error: layers.transport-icon.layout.icon-rotation-alignment: data expressions not supported

How is it possible? What am I missing?!

If I try to output property manually in console like: console.log(transportIconGeoJsonData.features[0].properties.alignment);

Works perfectly and shows "map" or "viewport" (if ..features.[1])

Not 100% sure if I found the right place, but it seems to me that the icon-rotation-alignment docs tell you that you can set it to either "map", "viewport" or "auto", whereas icon-rotate (docs) also allows "interpolate expressions" like ['get', 'rotation']. Additionally, if I understand it right, you have to specify symbol-placement as well. — Davi
– Davi, Commented Oct 21, 2024 at 10:36
@Davi, You're absolutely right, that's probably the answer. Parameter icon-rotation-alignment does not support intrepolate expressions ... (Which is very strange, because most of the other parameters support this possibility.) I guess, I need to find an another solution to get individual icon-alignment for every icon. — MeX
– MeX, Commented Oct 21, 2024 at 11:25

MeX · Accepted Answer · 2024-10-21 19:01:04Z

0

Like @Davi said, its not possible to use intrepolate expressions (like ['get', 'rotation']) with the property icon-rotation-alignment.

I also tried to find the way to update the properties of layer, which is actually possible with setLayoutProperty but not for single feature. (And actually even that is possible, but not for icon-rotation-alignment because of intrepolate expressions … Example: map.setPaintProperty('Icons', 'icon-opacity', ['match', ['get', 'id'], 'example-id', 0.5 , 1]);)

I guess for my task (individually change layout property for single feature) the only solution would be – to create separately source and layer for every feature (icon) with different properties.

Hope my experience will help someone ;)

answered Oct 21, 2024 at 19:01

MeX

113 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Get custom property in addLayer 'layout' - works selectively

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related