Custom markers throw error on map zoom event v2.1.1 "cannot read property "tranform" of undefined"

[ajbraudev]

We are using Mapbox gl js with react and nextjs.
After adding these markers to the map, on a zoom event, we are seeing this error:
Unhandled Runtime Error
TypeError: Cannot read property 'transform' of undefined
Call Stack
na._onOcclusionTimer

it is not a breaking error, everything is running smoothly, but we still get that error, and this error is not caught by the map.on('error') handler. (That would be sufficient for now just to have that work).

import { render } from "react-dom";
const markerEl = new mapboxgl.Marker().setLngLat(marker.lng_lat).addTo(map);

        render(
            <SquareMapIcon id={marker.id} color={marker.color} Icon={WanderIcons[marker.icon]} />,
            markerEl.getElement(),
        );

This was working on version 1, and is no longer working on v2

        markerEl.markerId = marker.id;`

[mourner]

Looks like a bug that occurs because we don't clear this timeout when a marker is removed:

mapbox-gl-js/src/ui/marker.js

Line 445 in b66fb77

this._occlusionTimer = setTimeout(this._onOcclusionTimer.bind(this), 60);

Should be an easy fix on our side, but meanwhile, you can work around this by clearing the timer manually when a marker or a map its added to is removed:

clearTimeout(marker._occlusionTimer);

[ajbraudev]

Looks like a bug that occurs because we don't clear this timeout when a marker is removed:

mapbox-gl-js/src/ui/marker.js

Line 445 in b66fb77

this._occlusionTimer = setTimeout(this._onOcclusionTimer.bind(this), 60);

Should be an easy fix on our side, but meanwhile, you can work around this by clearing the timer manually when a marker or a map its added to is removed:

clearTimeout(marker._occlusionTimer);

That workaround works great, thank you so much!