[fix] Remove split map controls from legend in exported image (#2234)

src/components/src/map/map-control-panel.tsx

@@ -19,7 +19,7 @@
 // THE SOFTWARE.
 
 import React, {useCallback} from 'react';
-import styled from 'styled-components';
+import styled, {StyledComponent} from 'styled-components';
 import {FormattedMessage} from '@kepler.gl/localization';
 import {CenterFlexbox, IconRoundSmall} from '../common/styled-components';
 import {Close, Pin} from '../common/icons';
@@ -66,7 +66,16 @@ const StyledMapControlPanelHeader = styled.div.attrs({
   }
 `;
 
-const StyledMapControlPanelHeaderSplitViewportsTools = styled(StyledMapControlPanelHeader)`
+const StyledMapControlPanelHeaderSplitViewportsTools: StyledComponent<
+  'div',
+  any,
+  {
+    className: 'map-control__panel-split-viewport-tools';
+  },
+  'className'
+> = styled(StyledMapControlPanelHeader).attrs({
+  className: 'map-control__panel-split-viewport-tools'
+})`
   display: flex;
   flex-direction: column;
   justify-content: space-between;

src/components/src/plot-container.tsx

@@ -44,17 +44,24 @@ import {
 } from '@kepler.gl/actions';
 import {mapFieldsSelector} from './kepler-gl';
 
-const CLASS_FILTER = ['mapboxgl-control-container', 'attrition-link', 'attrition-logo'];
+const CLASS_FILTER = [
+  'mapboxgl-control-container',
+  'attrition-link',
+  'attrition-logo',
+  'map-control__panel-split-viewport-tools'
+];
 const DOM_FILTER_FUNC = node => !CLASS_FILTER.includes(node.className);
 const OUT_OF_SCREEN_POSITION = -9999;
 
 PlotContainerFactory.deps = [MapContainerFactory, MapsLayoutFactory];
 
 // Remove mapbox logo in exported map, because it contains non-ascii characters
+// Remove split viewport UI controls from exported images when the legend is shown
 const StyledPlotContainer = styled.div`
   .mapboxgl-ctrl-bottom-left,
   .mapboxgl-ctrl-bottom-right,
-  .mapbox-attribution-container {
+  .mapbox-attribution-container,
+  .map-control__panel-split-viewport-tools {
     display: none;
   }