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

Markers update on terrain change #10985

Merged
merged 5 commits into from
Sep 14, 2021
Merged
Show file tree
Hide file tree
Changes from 4 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: 1 addition & 1 deletion debug/markers.html
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@
});

document.getElementById('terrain-checkbox').onclick = function() {
map.setTerrain(this.checked ? {"source": "mapbox-dem"} : null);
map.setTerrain(this.checked ? {"source": "mapbox-dem", "exaggeration": 10} : null);
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Higher terrain exaggeration makes the bug more visible.

};

</script>
Expand Down
4 changes: 4 additions & 0 deletions src/ui/map.js
Original file line number Diff line number Diff line change
Expand Up @@ -2764,6 +2764,10 @@ class Map extends Camera {
this.painter._updateFog(this.style);
this._updateTerrain(); // Terrain DEM source updates here and skips update in style._updateSources.
this.style._updateSources(this.transform);
// Update positions of markers on enabling/disabling terrain
for (const marker of this._markers) {
Copy link
Contributor

Choose a reason for hiding this comment

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

TBH I don't immediately see why this is the correct location at which to update judiciously in order to fix the bug, but it looks reasonable, and if it fixes the issue, then it seems correct.

Copy link
Contributor

Choose a reason for hiding this comment

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

could you put these three lines into _forceMarkerUpdate() function so that its easier to reason about and use in other cases as they come up?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

@arindam1993 Done!
@rreusser The update needs to happen after _updateSources is called, since the markers derive their position from map.transform which has no knowledge of terrain until that function is called.

marker._update();
}
}

this._placementDirty = this.style && this.style._updatePlacement(this.painter.transform, this.showCollisionBoxes, fadeDuration, this._crossSourceCollisions);
Expand Down
22 changes: 20 additions & 2 deletions test/unit/terrain/terrain.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -1380,10 +1380,28 @@ test('Marker interaction and raycast', (t) => {
const bottomLngLat = tr.pointLocation3D(new Point(terrainTop.x, tr.height));
// Raycast returns distance to closer point evaluates to occluded marker.
t.stub(tr, 'pointLocation3D').returns(bottomLngLat);
setTimeout(() => {
Copy link
Contributor Author

@SnailBones SnailBones Sep 9, 2021

Choose a reason for hiding this comment

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

setTimeout in a test seems hacky

map.once('render', () => {
t.deepEqual(marker.getElement().style.opacity, 0.2);
t.end();
}, 100);
});
});

t.test(`Marker updates position on removing terrain (#10982)`, (t) => {
const update = t.spy(marker, "_update");
map.setTerrain(null);
map.once('render', () => {
t.same(update.callCount, 1);
t.end();
});
});

t.test(`Marker updates position on adding terrain (#10982)`, (t) => {
const update = t.spy(marker, "_update");
map.setTerrain({"source": "mapbox-dem"});
map.once('render', () => {
t.same(update.callCount, 1);
t.end();
});
});

t.end();
Expand Down