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 show’s:
Error: layers.transport-icon.layout.icon-rotation-alignment: data expressions not supported
How is it possible? What am I missing?!
Thanks for help!
If I try to output property manually in console like:
console.log(transportIconGeoJsonData.features[0].properties.alignment);
Work’s perfectly and show’s “map” or “viewport” (if ..features.[1])