From 07618b3237c58a36b43b4d8ca71c22e746cfde15 Mon Sep 17 00:00:00 2001 From: Igor Dykhta Date: Fri, 14 Jan 2022 20:15:42 +0200 Subject: [PATCH] fix(kepler-integration): remove mapboxMap.remove (#220) --- .../export-video/export-video-panel-preview.js | 17 ++++++++++++++++- 1 file changed, 16 insertions(+), 1 deletion(-) diff --git a/modules/react/src/components/export-video/export-video-panel-preview.js b/modules/react/src/components/export-video/export-video-panel-preview.js index 308691b7..cac5fdbc 100644 --- a/modules/react/src/components/export-video/export-video-panel-preview.js +++ b/modules/react/src/components/export-video/export-video-panel-preview.js @@ -62,7 +62,16 @@ export class ExportVideoPanelPreview extends Component { if (this.mapRef.current) { const map = this.mapRef.current.getMap(); - map.remove(); + + // remove all rendering related handlers to prevent rendering after unmount + const listeners = [...map._listeners.render]; + listeners.forEach(listener => { + map.off('render', listener); + }); + + this.state.mapboxLayerIds?.forEach(id => { + map.removeLayer(id); + }); } } @@ -132,16 +141,22 @@ export class ExportVideoPanelPreview extends Component { const keplerLayers = this.createLayers(); const beforeId = this.props.mapboxLayerBeforeId; + const mapboxLayerIds = []; + // If there aren't any layers, combine map and deck with a fake layer. if (!keplerLayers.length) { map.addLayer(new MapboxLayer({id: '%%blank-layer', deck})); + mapboxLayerIds.push('%%blank-layer'); } for (let i = 0; i < keplerLayers.length; i++) { // Adds DeckGL layers to Mapbox so Mapbox can be the bottom layer. Removing this clips DeckGL layers map.addLayer(new MapboxLayer({id: keplerLayers[i].id, deck}), beforeId); + mapboxLayerIds.push(keplerLayers[i].id); } + this.setState({mapboxLayerIds}); + map.on('render', this._onAfterRender); }