Use locally generated ideographs

Replicates the MapLibre example Use locally generated ideographs: CJK labels drawn from local fonts.

The complete document

use-locally-generated-ideographs.yaml

# 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/use-locally-generated-ideographs/
# CJK glyphs come from the local font stack instead of glyph-server requests
# — faster, and the ideographs render even if the server has no CJK ranges.
type: map
id: use-locally-generated-ideographs
config:
  center: [137.5, 36.5]
  zoom: 4.5
  localIdeographFontFamily: "'Noto Sans CJK JP', 'Hiragino Sans', sans-serif"
  mapStyle: "https://demotiles.maplibre.org/style.json"
layers:
  - id: city-labels-ja
    type: symbol
    source:
      type: geojson
      locations:
        - { coordinates: [139.6917, 35.6895], name: 東京 }
        - { coordinates: [135.5023, 34.6937], name: 大阪 }
        - { coordinates: [141.3545, 43.0621], name: 札幌 }
        - { coordinates: [130.4017, 33.5902], name: 福岡 }
    layout:
      text-font: ["Noto Sans Regular"]
      text-field: ["get", "name"]
      text-size: 16
    paint:
      text-color: "#1d3557"
      text-halo-color: "#ffffff"
      text-halo-width: 1.5

What to notice

• config.localIdeographFontFamily generates CJK/Hangul glyphs client-side from the named font stack instead of fetching glyph ranges — faster, and independent of the glyph server’s coverage.