diff --git a/src/ui/marker.ts b/src/ui/marker.ts index 9610f80449c..d95c795c77b 100644 --- a/src/ui/marker.ts +++ b/src/ui/marker.ts @@ -90,7 +90,6 @@ export default class Marker extends Evented { _pitchAlignment: string; _rotationAlignment: string; _originalTabIndex: string | null | undefined; // original tabindex of _element - _fadeTimer: number | null | undefined; _updateFrameId: number; _updateMoving: () => void; _occludedOpacity: number; @@ -110,7 +109,6 @@ export default class Marker extends Evented { '_addDragHandler', '_onMapClick', '_onKeyPress', - '_clearFadeTimer' ], this); this._anchor = (options && options.anchor) || 'center'; @@ -217,7 +215,6 @@ export default class Marker extends Evented { map.getCanvasContainer().appendChild(this._element); map.on('move', this._updateMoving); map.on('moveend', this._update); - map.on('remove', this._clearFadeTimer); map._addMarker(this); this.setDraggable(this._draggable); this._update(); @@ -250,11 +247,9 @@ export default class Marker extends Evented { map.off('touchend', this._onUp); map.off('mousemove', this._onMove); map.off('touchmove', this._onMove); - map.off('remove', this._clearFadeTimer); map._removeMarker(this); this._map = undefined; } - this._clearFadeTimer(); this._element.remove(); if (this._popup) this._popup.remove(); return this; @@ -453,7 +448,6 @@ export default class Marker extends Evented { const pos = this._pos; if (!pos || pos.x < 0 || pos.x > map.transform.width || pos.y < 0 || pos.y > map.transform.height) { - this._clearFadeTimer(); return; } const mapLocation = map.unproject(pos); @@ -472,15 +466,6 @@ export default class Marker extends Evented { if (this._popup) { this._popup._setOpacity(opacity); } - - this._fadeTimer = null; - } - - _clearFadeTimer() { - if (this._fadeTimer) { - clearTimeout(this._fadeTimer); - this._fadeTimer = null; - } } _updateDOM() { @@ -594,8 +579,8 @@ export default class Marker extends Evented { this._updateDOM(); } - if ((map._showingGlobe() || map.getTerrain() || map.getFog()) && !this._fadeTimer) { - this._fadeTimer = window.setTimeout(this._evaluateOpacity.bind(this), 60); + if (map._showingGlobe() || map.getTerrain() || map.getFog()) { + this._evaluateOpacity(); } }); } diff --git a/test/unit/terrain/terrain.test.ts b/test/unit/terrain/terrain.test.ts index cee7116a98c..5f2ccb13eba 100644 --- a/test/unit/terrain/terrain.test.ts +++ b/test/unit/terrain/terrain.test.ts @@ -1523,9 +1523,6 @@ describe('Marker interaction and raycast', () => { }); test('Occluded', async () => { - marker._fadeTimer = null; - // Occlusion is happening with Timers API. Advance them - vi.spyOn(window, 'setTimeout').mockImplementation((cb) => cb()); marker.setLngLat(terrainTopLngLat); const bottomLngLat = tr.pointLocation3D(new Point(terrainTop.x, tr.height)); // Raycast returns distance to closer point evaluates to occluded marker. diff --git a/test/unit/ui/marker.test.ts b/test/unit/ui/marker.test.ts index e66bd996771..f0c0f9e4bd2 100644 --- a/test/unit/ui/marker.test.ts +++ b/test/unit/ui/marker.test.ts @@ -1128,6 +1128,8 @@ describe('Marker and fog', () => { map.setBearing(90); map.setPitch(70); marker.setLngLat([4, 0]); + + expect(marker.getElement().style.opacity).toEqual('0'); await new Promise(resolve => { setTimeout(() => {