mapbox / mapbox/mapbox-gl-js

Feature request: camera elevation

Open
#3,552 15 comments 6 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

3d :triangular_ruler: feature :green_apple:
Dominant language
TypeScript
Stars
12.4k
Forks
2.4k
PR merge metrics
No merged PRs in 30d

Description

## Motivation

With extruded geometries, there are use cases where the focus should be on a specific elevation.

The most obvious is to focus on a building rooftop with a call to `Map#flyTo`. With more 3D data, users might want to have a control to travel "up" and "down" besides moving N-S-W-E.

## Design

I suggest a new property in [`CameraOptions`](https://www.mapbox.com/mapbox-gl-js/api/#CameraOptions), named `height` or `elevation`, e.g.:

```
map.flyTo({
center: [ 63.5, 10.4 ],
zoom: 17,
bearing: 15,
pitch: 45,
elevation: 100 // assumed meters, or CRS units, as in the extrude height
})
```

### Implementation

I guess the internal camera state shall store the camera elevation somewhere, and modify the 3D transform matrix as appropriate.

This might change the viewport bounds, so the calculations for the tile ranges might change as well (my knowledge of the internals of this project is low, so I don't know if the 3D transform matrix is reused for this purpose).

Any easing function for the camera state (`flyTo` animations and the like) shall also ease and interpolate the elevation.

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 CameraOptions and Map#flyTo, then trace how camera state feeds the 3D transform matrix and viewport or tile-range calculations. Check how camera easing handles other properties. Done means elevation is accepted, affects the camera and relevant bounds, and is interpolated during flyTo animations.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
computer-graphics, frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.