Skip to content

Fix rendering issue with globe view at high zoom #1831

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.

Sign up for GitHub

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

Closed
wants to merge 3 commits into from
Closed

Fix rendering issue with globe view at high zoom #1831

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5f6d73a
Fix rendering issue with globe view at high zoom
SnailBones Apr 15, 2022
e42431d
Merge branch 'master' into fix-globe-transition
SnailBones Apr 21, 2022
ede6447
Fix merge conflict
SnailBones Apr 26, 2022
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
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -852,7 +852,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

react-map-gl/src/mapbox/mapbox.ts

Line 884 in bf55149

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
View file
Open in desktop
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;

clone: () => Transform;
resize: (width: number, height: number) => void;
Expand Down