Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix rendering issue with globe view at high zoom #1831

Closed
wants to merge 3 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/mapbox/mapbox.ts
Original file line number Diff line number Diff line change
Expand Up @@ -851,7 +851,9 @@ export default class Mapbox {
// Replace map.transform with ours during the callbacks
map.transform = this._renderTransform;
baseFire.call(map, event, properties);
const savedProjection = map.transform.projection;
map.transform = tr;
map.transform.projection = savedProjection;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks like the auto switching of projection happens in map._render:

https://github.com/mapbox/mapbox-gl-js/blob/9fff53107b78bdaae875693b7b34c7f9acb5a1ae/src/ui/map.js#L2950

Would it make more sense for us to match the two transforms in

this._map.transform = tr;

tr.projection = this._map.transform.projection?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried that initially, and while it fixes the rendering issue, it introduces a bug where the map position jumps on zooming out past the Mercator/Globe threshold.

Screen.Recording.2022-04-26.at.4.16.07.PM.mov

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have seen the same issue in matching elevation between the two transforms. In addition to assigning

tr.projection = this._renderTransform.projection

You may also need to call _calcMatrices() on the transform.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you, I'll give that a try!


return map;
}
Expand Down
3 changes: 3 additions & 0 deletions src/types/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ export type {
ScaleControl as MapboxScaleControl
} from 'mapbox-gl';

import type {ProjectionSpecification} from '../types';

/**
* Stub for mapbox's Transform class
* https://github.com/mapbox/mapbox-gl-js/blob/main/src/geo/transform.js
Expand All @@ -29,6 +31,7 @@ export type Transform = {
bearing: number;
pitch: number;
padding: PaddingOptions;
projection: ProjectionSpecification;
elevation: any;
pixelsToGLUnits: [number, number];

Expand Down