Sprite / hatching orientation when the map bearing is changed

[fxi]

Currently, when rotating the map, the rule’s hatching is not oriented correctly, leading to incorrect readings. A solution would be to update a CSS variable --mx_map_rotation to align the hatching properly with the map’s rotation.

map.on('rotate', () => {
    const bearing = map.getBearing();
    document.body.style.setProperty('--mx_map_rotation', `${bearing}deg`);
});

.mx-legend-vt-rule-background {
    transform: rotate(var(--mx_map_rotation));
}

mx_sync_sprites_rules.mp4