mapbox / mapbox/mapbox-gl-js

Issue with Building Animation Downward Transition

Open
#13,159 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

auto-triaged needs information :pray:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

**mapbox-gl-js version**:

### Question
Hi there,

I'm currently implementing a feature where building animations rise and fall based on the zoom level in MapLibre. I've successfully managed the upward animation from 0 to the maximum height of the buildings. However, I'm encountering an issue with the animation when buildings descend from their maximum height to ground level.

Here's the code snippet I'm using to achieve this:
```
map.setPaintProperty(
'3d-buildings',
'fill-extrusion-height',
[
"interpolate",
["linear"],
["zoom"],
15.5,
["get", "render_height"],
15,
0
]
);
```

However, this implementation throws an error:
`Error: layers.3d-buildings.paint.fill-extrusion-height[5]: Input/output pairs for "interpolate" expressions must be arranged with input values in strictly ascending order.`

In my scenario, the building descent animation should commence when the zoom level is below 15.5 and conclude at zoom level 15. How can I achieve this specific use case without encountering the error mentioned above?

Thanks,

### Links to related documentation

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the fill-extrusion-height property and interpolate expression documentation, using the map.setPaintProperty example and the reported ascending-order validation error as entry points. Verify the documented behavior for zoom-based building transitions and capture a reproducible explanation or documentation improvement that addresses the requested downward animation.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Documentation
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.