Skip to content

Fit a map to a bounding box

Replicates the MapLibre example Fit a map to a bounding box: the initial view frames a bounding box (here Kenya) regardless of the container’s pixel size.

fit-a-map-to-a-bounding-box.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/fit-a-map-to-a-bounding-box/
# The initial viewport is the bounding box, whatever the container's pixels.
type: map
id: fit-a-map-to-a-bounding-box
config:
center: [0, 0]
zoom: 1
bounds: [32.958984, -5.353521, 43.50585, 5.615985]
mapStyle: "https://demotiles.maplibre.org/style.json"
  • config.bounds ([west, south, east, north]) wins over center/zoom for the initial camera — the upstream version needs a fitBounds() call after construction.
  • Fitting to a source’s extent rather than literal bounds is a tracked gap (see the gallery index).