Display a map

Replicates the MapLibre example Display a map: initialize a map in an HTML element. The upstream version is an HTML page with a script block; here the entire map is one YAML document.

The complete document

display-a-map.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/display-a-map/
type: map
id: display-a-map
config:
  center: [0, 20]
  zoom: 1
  mapStyle: "https://demotiles.maplibre.org/style.json"

What to notice

• config.center, config.zoom, and config.mapStyle are the whole story — layers: defaults to an empty list, so the smallest useful map is five meaningful lines.
• Embed it with <ml-map src="display-a-map.yaml">, the Astro <Map> component, or export to a plain style.json with mlym emit.