Skip to content

feat(TileMap): add terrain and pitch props, upgrade to MapLibre 6.3 - #495

Open
palewire wants to merge 1 commit into
mainfrom
palewire-tilemap-terrain-props
Open

feat(TileMap): add terrain and pitch props, upgrade to MapLibre 6.3#495
palewire wants to merge 1 commit into
mainfrom
palewire-tilemap-terrain-props

Conversation

@palewire

Copy link
Copy Markdown
Contributor

Follow-up to #492, which landed the terrain docs. This lands the actual component work — it was written against that branch but got stranded when #492 merged first, so it never reached main.

terrain and pitch props

Terrain was a hand-rolled onMapReady closure. TileMap now takes it directly:

<TileMap center={[-3.7, 40.2]} zoom={5} terrain pitch={60} />

terrain accepts true or a numeric exaggeration. It warns and no-ops when the style lacks the DEM source, so a project pinned to an older style fails loudly instead of silently rendering nothing — which is exactly what made the original bug so hard to see.

maplibre-gl 5.15 → 6.3

Upgraded rather than backported. Three things broke:

  • ESM-only, no default export. import maplibregl from 'maplibre-gl' now yields undefined. Three default imports became namespace imports (TileMap, TileMapCallout, TemperatureToggle docs).
  • setPaintProperty / setLayoutProperty are now generic over the style-spec property maps. Those types aren't re-exported by maplibre-gl, and @maplibre/maplibre-gl-style-spec isn't a direct dependency, so TileMapLayer derives them from the method signatures via Parameters<…> rather than taking on a new dependency.

Context: the relief is now live

The published Reuters style declared a reuters-world-terrain DEM source but no layer ever rendered it, so no consumer got relief above zoom 5 — and this story sits at exactly zoom={5}. Fixed in tr/newsapps_reuters-protomaps#28 and promoted to production, which took the style from 65 to 66 layers.

So the docs now distinguish two separate things: 3D terrain (opt-in, only visible when pitched) and shaded relief (flat, always on at z ≥ 5, shipped in the style itself).

Verification

  • pnpm run check — 0 errors (17 pre-existing warnings in unrelated components)
  • pnpm test — 18 files, 144 tests pass
  • pnpm exec eslint — clean
  • pnpm run build — publint "All good!"
  • pnpm run build:docs — Storybook builds on MapLibre 6.3

Expect a Chromatic diff on the Terrain story: it should now show real relief where it previously showed a flat map.

Terrain was documented as a hand-rolled onMapReady closure, and the
Terrain story passed exaggeration: 120 -- a multiplier, which made
Everest about 1,000 km tall and produced degenerate geometry.

Give TileMap first-class terrain and pitch props instead. terrain accepts
true or a numeric exaggeration, warns and no-ops when the style lacks the
DEM source, and the story reduces to declarative markup.

Upgrading maplibre-gl from 5.15 to 6.3 required three fixes:

- MapLibre 6 is ESM-only with no default export, so three default imports
  become namespace imports.
- setPaintProperty and setLayoutProperty are now generic over the style
  spec property maps. Those types are not re-exported by maplibre-gl and
  the style-spec package is not a direct dependency, so TileMapLayer
  derives them from the method signatures instead.

Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com>
@palewire
palewire requested a review from hobbes7878 as a code owner August 13, 2026 01:41
@changeset-bot

changeset-bot Bot commented Aug 13, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: e3f1957

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@reuters-graphics/graphics-components Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@pkg-pr-new

pkg-pr-new Bot commented Aug 13, 2026

Copy link
Copy Markdown

Open in StackBlitz

pnpm add https://pkg.pr.new/@reuters-graphics/graphics-components@495

commit: e3f1957

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant