Vertical alignment in format expression

[stanislawpuda-tomtom]

Related to issue: maplibre-style-spec

This PR introduces implementation of vertical align property in format expression. It enables to specify how each section should be positioned in relation to biggest element in line. There are three possible options:

• "baseline" default: text baseline or image bottom are in line - this is current behaviour.
• "center": image center or text center are in line.
• "top": image top and text top are in

How to run:

This code requires maplibre-style-spec with vertical align support. Checkout this PR maplibre/maplibre-style-spec#900, run npm run build and copy content from /dist to /node_modules/@maplibre/maplibre-gl-style-spec/dist.

How to compare

To easily compare between current behaviour and new changes we build small comparison app. Please download test.zip, unpack and run eg. with VSC Live Server extension.

• maplibre-gl-dev-MAIN.js file contains current maplibre-gl-js version. We've changed export variable to maplibreglMain.
• maplibre-gl-dev.js contains maplibre-gl-js with changes from this PR.

Download test package:
test.zip

Visual comparison

Screen.Recording.2024-11-13.at.17.55.12.mov

Launch Checklist

• Confirm your changes do not include backports from Mapbox projects (unless with compliant license) - if you are not sure about this, please ask!
• Briefly describe the changes in this PR.
• Link to related issues.
• Include before/after visuals or gifs if this PR includes visual changes.
• Write tests for all new functionality.
• Document any changes to public APIs.
• Post benchmark scores.
• Add an entry to CHANGELOG.md under the ## main section.

Authors: @zbigniewmatysek-tomtom @stanislawpuda-tomtom