mapbox / mapbox/mapbox-gl-js

Polygon extrusion heights stretch as map moves

Open
#8,821 4 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

[Extruded Polygon Issue.zip](https://github.com/mapbox/mapbox-gl-js/files/3666475/Extruded.Polygon.Issue.zip)
I noticed recently that when zoomed out with extruded polygons, if I pan the map up and down, the height of the extrusions changes. If you rotate the map 90 degrees and pan left/right, the same effect occurs.

**mapbox-gl-js version**: 1.4.0

**browser**: Chrome

### Steps to Trigger Behavior

1. Sample attached
2. download and unzip code and add key to index.html [Extruded Polygon Issue.zip](https://github.com/mapbox/mapbox-gl-js/files/3666480/Extruded.Polygon.Issue.zip)
3. npm install
4. npm start
5. Pan map north/south and watch the height of the polygons.

(sample too big for jsbin so attached zip)

### Expected Behavior

As you move the map, extruded polygons should have a consistent height.

### Actual Behavior

They appear to be scaling based on the latitude. Here is an animation of what happens.

![ExtrudedPolygonIssue](https://user-images.githubusercontent.com/6459716/65828814-f3aee880-e253-11e9-8d94-2df7a1c9e2b6.gif)

I suspect the height measurement is based on the meters per pixels of the center of the map. For a more consistent experience it might be better to use the meters per pixel value for 0 degrees latitude. If backwards compatibility is needed (perhaps this effect is desired for buildings when zoomed in close) maybe introducing a style options would make sense.

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

Download and run the attached sample with npm install and npm start, then inspect index.html and the map setup while reproducing the issue by panning north/south and rotating the map. Trace the extrusion rendering path to determine why heights vary with latitude; done means polygon heights remain consistent during map movement without regressing the reported behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, typescript
Domain
computer-graphics, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.