Display and style rich text labels

Replicates the MapLibre example Display and style rich text labels: two type sizes in one label.

The complete document

# yaml-language-server: $schema=https://docs.maplibre-yaml.org/schema/latest/map.schema.json
# Gallery twin of https://maplibre.org/maplibre-gl-js/docs/examples/display-and-style-rich-text-labels/
# The `format` expression mixes sizes within one label, verbatim style-spec.
type: map
id: display-and-style-rich-text-labels
config:
  center: [10, 20]
  zoom: 1.5
  mapStyle: "https://demotiles.maplibre.org/style.json"
layers:
  - id: city-labels
    type: symbol
    source:
      type: geojson
      locations:
        - { coordinates: [-0.1276, 51.5072], name: London, description: United Kingdom }
        - { coordinates: [139.6917, 35.6895], name: Tokyo, description: Japan }
        - { coordinates: [-46.6333, -23.5505], name: "São Paulo", description: Brazil }
        - { coordinates: [36.8219, -1.2921], name: Nairobi, description: Kenya }
    layout:
      text-font: ["Noto Sans Regular"]
      text-field:
        - format
        - ["get", "name"]
        - { "font-scale": 1.3 }
        - "\n"
        - {}
        - ["get", "description"]
        - { "font-scale": 0.8 }
    paint:
      text-color: "#1d3557"
      text-halo-color: "#ffffff"
      text-halo-width: 1.5

What to notice

The format expression mixes sections with per-section font-scale — verbatim style-spec, where YAML’s block form keeps the sections readable.
text-font must name a face the basemap’s glyph server carries (demotiles ships Noto Sans Regular).