feat: add more export options for kepler map export

src/components/src/plot-container.tsx

@@ -39,6 +39,18 @@ const CLASS_FILTER = [
 const DOM_FILTER_FUNC = node => !CLASS_FILTER.includes(node.className);
 const OUT_OF_SCREEN_POSITION = -9999;
 
+/**
+ * Linearly remaps the export scale range [1..5] to a reduced legend scale [1..3].
+ * Prevents the legend from scaling as aggressively as the exported image.
+ * @param scale - scale factor (e.g., 1, 2, 3, 4, 5)
+ * @returns remapped scale factor
+ */
+function remapLegendScale(scale: number): number {
+  const max = 5;
+  const t = (scale - 1) / (max - 1);
+  return 1 + t * 2;
+}
+
 PlotContainerFactory.deps = [MapContainerFactory, MapsLayoutFactory];
 
 // Remove mapbox logo in exported map, because it contains non-ascii characters
@@ -57,6 +69,11 @@ const StyledPlotContainer = styled.div`
   position: absolute;
   top: ${OUT_OF_SCREEN_POSITION}px;
   left: ${OUT_OF_SCREEN_POSITION}px;
+
+  /* Apply logarithmic zoom to legend panel */
+  .map-control-panel {
+    zoom: var(--legend-scale, 1) !important;
+  }
 `;
 
 interface StyledMapContainerProps {
@@ -312,7 +329,12 @@ export default function PlotContainerFactory(
     );
 
     return (
-      <StyledPlotContainer className="export-map-instance">
+      <StyledPlotContainer 
+        className="export-map-instance"
+        style={{
+          '--legend-scale': remapLegendScale(scale)
+        } as React.CSSProperties}
+      >
         <StyledMapContainer ref={plottingAreaRef} width={size.width} height={size.height}>
           <MapViewStateContextProvider mapState={newMapState}>
             {mapContainers}

src/constants/src/default-settings.ts

@@ -973,7 +973,10 @@ export const MAX_DEFAULT_TOOLTIPS = 5;
 
 export const RESOLUTIONS = keyMirror({
   ONE_X: null,
-  TWO_X: null
+  TWO_X: null,
+  THREE_X: null,
+  FOUR_X: null,
+  FIVE_X: null
 });
 
 export const EXPORT_IMG_RATIOS = keyMirror({
@@ -1055,9 +1058,45 @@ export const TwoXResolutionOption: ImageResolutionOption = {
   })
 };
 
+export const ThreeXResolutionOption: ImageResolutionOption = {
+  id: RESOLUTIONS.THREE_X,
+  label: '3x',
+  available: true,
+  scale: 3,
+  getSize: (screenW, screenH) => ({
+    width: screenW * 3,
+    height: screenH * 3
+  })
+};
+
+export const FourXResolutionOption: ImageResolutionOption = {
+  id: RESOLUTIONS.FOUR_X,
+  label: '4x',
+  available: true,
+  scale: 4,
+  getSize: (screenW, screenH) => ({
+    width: screenW * 4,
+    height: screenH * 4
+  })
+};
+
+export const FiveXResolutionOption: ImageResolutionOption = {
+  id: RESOLUTIONS.FIVE_X,
+  label: '5x',
+  available: true,
+  scale: 5,
+  getSize: (screenW, screenH) => ({
+    width: screenW * 5,
+    height: screenH * 5
+  })
+};
+
 export const EXPORT_IMG_RESOLUTION_OPTIONS: ReadonlyArray<ImageResolutionOption> = [
   OneXResolutionOption,
-  TwoXResolutionOption
+  TwoXResolutionOption,
+  ThreeXResolutionOption,
+  FourXResolutionOption,
+  FiveXResolutionOption
 ];
 
 export const EXPORT_DATA_TYPE = keyMirror({

src/types/reducers.d.ts

@@ -372,7 +372,7 @@ export type BaseMapStyle = {
 
 export declare type ExportImage = {
   ratio: 'SCREEN' | 'FOUR_BY_THREE' | 'SIXTEEN_BY_NINE' | 'CUSTOM';
-  resolution: 'ONE_X' | 'TWO_X';
+  resolution: 'ONE_X' | 'TWO_X' | 'THREE_X' | 'FOUR_X' | 'FIVE_X';
   legend: boolean;
   mapH: number;
   mapW: number;

test/browser/components/modals/export-image-modal-test.js

@@ -72,7 +72,7 @@ test('Components -> ExportImageModal.mount', t => {
     .find(SelectionButton)
     .map(c => c.text());
 
-  t.deepEqual(resolutionOpts, ['1x', '2x'], 'should render correct ratio options');
+  t.deepEqual(resolutionOpts, ['1x', '2x', '3x', '4x', '5x'], 'should render correct resolution options');
 
   t.ok(
     wrapper