Symbol rotation

[MatisseBE]

Hi

I know some basic coding but I don't know where to start in this case...

Currently, the signal icons are always up-right. This makes sense for symmetrical signals, but is a little odd for asymmetrical signals, like those in Belgium. So I want to try and put them in the same orientation as the direction indicator. Just locally of course.

It seems not too difficult but I guess I could use a little head start. Any help is much appreciated!

[MatisseBE]

Looks pretty good!

In styles.mjs, for railway_signals_medium only:

rotating the icon on the 'way' direction:
'icon-rotate': ['get', 'azimuth']

I also applied a offset, which ideally is based on the signal position tag, but in my specific case, the regime tag works best.
Lastly, I also had to update the 'imageLayerWithOutline', because the anchoring caused the outline to be exposed, "deforming" the signal icon. So I am now not casting a "shadow" for signals.

...imageLayerWithOutline(
  `railway_signals_medium_${featureIndex}`,
  ['get', `feature${featureIndex}`],
  {
    type: 'symbol',
    minzoom: 13,
    maxzoom: 16,
    source: 'openrailwaymap_signals',
    'source-layer': 'signals_railway_signals',
    layout: {
      'icon-rotate': ['get', 'azimuth'],
      'symbol-z-order': 'source',
      'icon-overlap': 'always',
      'icon-anchor': ['case',
        // ['==', ['get', 'railway:signal:position'], 'left'], 'top-right',
        // ['==', ['get', 'railway:signal:position'], 'right'], 'top-left',
        ['==', ['get', 'railway:signal:regime'], 'normal'], 'top-right', //Als sein links staat, anker rechts (sein toont aan linker kant)
        ['==', ['get', 'railway:signal:regime'], 'opposite'], 'top-left', //Als sein rechts staat, anker links       
        'top'
      ],
      'icon-offset': featureIndex === 0
        ? ['literal', [0, 0]]
        : ['interpolate', ['linear'],
          ['+', ['get', `offset${featureIndex}`], 2 * featureIndex],
          0, ['literal', [0, 0]],
          1000, ['literal', [0, -1000]],
        ],
    },
  },
),

const imageLayerWithOutline = (id, spriteExpression, layer, skipOutline = false) => 
  skipOutline 
    ? [
        // Only the image layer for signals
        {
          id: `${id}_image`,
          ...layer,
          layout: {
            ...(layer.layout || {}),
            'icon-image': ['image', spriteExpression],
          },
        },
      ]
    : [
        // Outline layer for everything else
        {
          id: `${id}_outline`,
          ...layer,
          paint: {
            'icon-halo-color': ['case',
              ['boolean', ['feature-state', 'hover'], false], colors.hover.iconHalo,
              colors.iconHalo,
            ],
            'icon-halo-blur': ['case',
              ['boolean', ['feature-state', 'hover'], false], 1.0,
              0.0,
            ],
            'icon-halo-width': ['case',
              ['boolean', ['feature-state', 'hover'], false], 3.0,
              2.0,
            ],
          },
          layout: {
            ...(layer.layout || {}),
            'icon-image': ['image', ['concat', 'sdf:', spriteExpression]],
          },
        },
        // Image layer
        {
          id: `${id}_image`,
          ...layer,
          layout: {
            ...(layer.layout || {}),
            'icon-image': ['image', spriteExpression],
          },
        },
      ];