Add a WMS source

Replicates the MapLibre example Add a WMS source: OpenStreetMap imagery served by terrestris’ WMS endpoint. (The upstream example’s NJ WMS does not serve CORS headers, so it fails in a browser — a WMS you embed must.)

The complete document

add-a-wms-source.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/add-a-wms-source/
# A WMS endpoint is just a raster tile URL template with a bbox placeholder.
type: map
id: add-a-wms-source
config:
  center: [-74.5447, 40.6892]
  zoom: 8
  mapStyle: "https://demotiles.maplibre.org/style.json"
layers:
  - id: wms-imagery
    type: raster
    source:
      type: raster
      tiles:
        - "https://ows.terrestris.de/osm/service?bbox={bbox-epsg-3857}&format=image/png&service=WMS&version=1.1.1&request=GetMap&srs=EPSG:3857&transparent=true&width=256&height=256&layers=OSM-WMS&styles="
      tileSize: 256
      attribution: "© OpenStreetMap contributors, rendered by terrestris"
    paint:
      raster-opacity: 0.9

What to notice

• There is no special WMS source type — a GetMap URL with the {bbox-epsg-3857} placeholder is a raster tile template, exactly as upstream.
• Raster paint keys (raster-opacity here) apply like any other layer styling.