Offset the vanishing point using padding

Replicates the MapLibre example Offset the vanishing point using padding. The pitched camera and the marker on the centre point are YAML (markers:). The two sidebars are page chrome in <ml-map>’s corner slots; opening one eases the camera’s padding on that side to the sidebar’s width, so the centre point and the horizon’s vanishing point shift out from under it.

↔

Left sidebar

↔

Right sidebar

Open and close the sidebars — the marker and the vanishing point slide aside

The YAML half

offset-the-vanishing-point-using-padding.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/offset-the-vanishing-point-using-padding/
# The YAML half: the pitched camera and the marker on the centre point.
# The sidebars are page chrome in <ml-map>'s corner slots; opening one
# eases the camera's padding so the vanishing point moves out from under
# it — see offset-the-vanishing-point-using-padding.js.
type: map
id: offset-the-vanishing-point-using-padding
config:
  center: [-77.01866, 38.888]
  zoom: 4
  pitch: 60
  mapStyle: "https://demotiles.maplibre.org/style.json"
markers:
  - at: [-77.01866, 38.888]

The page half

This markup goes inside <ml-map>; children with a slot ride its corner system.

offset-the-vanishing-point-using-padding.html

<style>
  /* A sidebar is a slot child whose width animates with the padding. */
  [data-sidebar] { width: 2.4rem; transition: width 1s; overflow: hidden; }
  [data-sidebar].open { width: 300px; max-width: none; box-sizing: border-box; min-height: 12rem; }
  [data-sidebar] p { display: none; color: #6c757d; font-size: 1.1rem; padding-top: 0.5rem; }
  [data-sidebar].open p { display: block; }
</style>
<aside slot="top-left" class="gallery-panel" data-sidebar="left">
  <button type="button" data-sidebar-toggle="left" aria-label="Toggle left sidebar">&harr;</button>
  <p>Left sidebar</p>
</aside>
<aside slot="top-right" class="gallery-panel" data-sidebar="right">
  <button type="button" data-sidebar-toggle="right" aria-label="Toggle right sidebar">&harr;</button>
  <p>Right sidebar</p>
</aside>

The JavaScript half

offset-the-vanishing-point-using-padding.js

// The JavaScript half: camera padding via easeTo. Padding shrinks the part
// of the canvas the camera treats as "the view", so the centre point and
// the vanishing point shift out from under an open sidebar. The sidebars
// are <ml-map> slot children; each toggle eases padding on its side to
// the sidebar's width.
const mapEl = document.querySelector("ml-map");
const SIDEBAR_WIDTH = 300; // px — matches the open sidebar's CSS width

async function toggleSidebar(side) {
  const sidebar = document.querySelector(`[data-sidebar="${side}"]`);
  const open = sidebar.classList.toggle("open");
  const map = await mapEl.mapReady();
  map.easeTo({ padding: { [side]: open ? SIDEBAR_WIDTH : 0 }, duration: 1000 });
}

for (const button of document.querySelectorAll("[data-sidebar-toggle]")) {
  button.addEventListener("click", () => toggleSidebar(button.dataset.sidebarToggle));
}

// Upstream opens the left sidebar once the map has loaded.
mapEl.mapReady().then(() => toggleSidebar("left"));

What to notice

• Padding shrinks the part of the canvas the camera treats as the view; it also applies to later flyTo/fitBounds calls until changed.
• The sidebars are slot children, so <ml-map> places them and keeps the map’s own gestures working around them — no absolute positioning in the page.