javascriptmapboxmapbox-gl-js

Get custom property in addLayer 'layout' - works selectively


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])


Solution

  • 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 ;)