add new resolution options

Author: bdjulbic

src/components/src/plot-container.tsx

@@ -39,11 +39,33 @@ const CLASS_FILTER = [
 const DOM_FILTER_FUNC = node => !CLASS_FILTER.includes(node.className);
 const OUT_OF_SCREEN_POSITION = -9999;
 
+/**
+ * Calculates legend zoom based on export height
+ * Maps export height to a zoom factor between 0.5 and 3
+ * @param height - export height in pixels
+ * @returns zoom factor for legend panel
+ */
+function calculateLegendZoom(height: number): number {
+  const baseHeight = 1080; // 1x zoom reference height
+  const minZoom = 0.5;
+  const maxZoom = 3;
+  
+  // Linear mapping: height / baseHeight gives us the scale
+  const zoomFactor = height / baseHeight;
+  
+  // Clamp between min and max
+  return Math.max(minZoom, Math.min(maxZoom, zoomFactor));
+}
+
 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`
+interface StyledPlotContainerProps {
+  legendZoom?: number;
+}
+
+const StyledPlotContainer = styled.div<StyledPlotContainerProps>`
   .maplibregl-ctrl-bottom-left,
   .maplibregl-ctrl-bottom-right,
   .maplibre-attribution-container,
@@ -57,6 +79,11 @@ const StyledPlotContainer = styled.div`
   position: absolute;
   top: ${OUT_OF_SCREEN_POSITION}px;
   left: ${OUT_OF_SCREEN_POSITION}px;
+
+  /* Apply zoom to legend panel based on export height */
+  .map-control-panel {
+    zoom: ${props => props.legendZoom || 1} !important;
+  }
 `;
 
 interface StyledMapContainerProps {
@@ -153,6 +180,11 @@ export default function PlotContainerFactory(
       mapState.isSplit
     ]);
 
+    // Memoize the legend zoom calculation based on export height
+    const legendZoom = useMemo(() => {
+      return calculateLegendZoom(imageSize.imageH);
+    }, [imageSize.imageH]);
+
     // Memoize the map style
     const scaledMapStyle = useMemo(() => {
       const mapStyle = mapFields.mapStyle;
@@ -312,7 +344,7 @@ export default function PlotContainerFactory(
     );
 
     return (
-      <StyledPlotContainer className="export-map-instance">
+      <StyledPlotContainer className="export-map-instance" legendZoom={legendZoom}>
         <StyledMapContainer ref={plottingAreaRef} width={size.width} height={size.height}>
           <MapViewStateContextProvider mapState={newMapState}>
             {mapContainers}

src/constants/src/default-settings.ts

@@ -1025,11 +1025,24 @@ export const EXPORT_IMG_RATIO_OPTIONS: ReadonlyArray<ImageRatioOption> = [
   SixteenByNineRatioOption
 ];
 
+export type ExportResolutionOption = 
+  | keyof typeof RESOLUTIONS
+  | '1280x720'
+  | '1920x1080'
+  | '2560x1440'
+  | '3840x2160'
+  | '1600x900'
+  | '1024x768'
+  | '1280x960'
+  | '1600x1200'
+  | '1920x1440'
+  | '2048x1536';
+
 export type ImageResolutionOption = {
-  id: keyof typeof RESOLUTIONS;
+  id: ExportResolutionOption;
   label: string;
   available: boolean;
-  scale: number;
+  scale?: number;
   getSize: (screenW: number, screenH: number) => {width: number; height: number};
 };
 
@@ -1055,9 +1068,90 @@ export const TwoXResolutionOption: ImageResolutionOption = {
   })
 };
 
+// Fixed dimension options
+export const Resolution1920x1080Option: ImageResolutionOption = {
+  id: '1920x1080',
+  label: '1920 × 1080 (16:9)',
+  available: true,
+  getSize: () => ({width: 1920, height: 1080})
+};
+
+export const Resolution1280x720Option: ImageResolutionOption = {
+  id: '1280x720',
+  label: '1280 × 720 (16:9)',
+  available: true,
+  getSize: () => ({width: 1280, height: 720})
+};
+
+export const Resolution2560x1440Option: ImageResolutionOption = {
+  id: '2560x1440',
+  label: '2560 × 1440 (16:9)',
+  available: true,
+  getSize: () => ({width: 2560, height: 1440})
+};
+
+export const Resolution3840x2160Option: ImageResolutionOption = {
+  id: '3840x2160',
+  label: '3840 × 2160 (16:9)',
+  available: true,
+  getSize: () => ({width: 3840, height: 2160})
+};
+
+export const Resolution1600x900Option: ImageResolutionOption = {
+  id: '1600x900',
+  label: '1600 × 900 (16:9)',
+  available: true,
+  getSize: () => ({width: 1600, height: 900})
+};
+
+export const Resolution1024x768Option: ImageResolutionOption = {
+  id: '1024x768',
+  label: '1024 × 768 (4:3)',
+  available: true,
+  getSize: () => ({width: 1024, height: 768})
+};
+
+export const Resolution1280x960Option: ImageResolutionOption = {
+  id: '1280x960',
+  label: '1280 × 960 (4:3)',
+  available: true,
+  getSize: () => ({width: 1280, height: 960})
+};
+
+export const Resolution1600x1200Option: ImageResolutionOption = {
+  id: '1600x1200',
+  label: '1600 × 1200 (4:3)',
+  available: true,
+  getSize: () => ({width: 1600, height: 1200})
+};
+
+export const Resolution1920x1440Option: ImageResolutionOption = {
+  id: '1920x1440',
+  label: '1920 × 1440 (4:3)',
+  available: true,
+  getSize: () => ({width: 1920, height: 1440})
+};
+
+export const Resolution2048x1536Option: ImageResolutionOption = {
+  id: '2048x1536',
+  label: '2048 × 1536 (4:3)',
+  available: true,
+  getSize: () => ({width: 2048, height: 1536})
+};
+
 export const EXPORT_IMG_RESOLUTION_OPTIONS: ReadonlyArray<ImageResolutionOption> = [
   OneXResolutionOption,
-  TwoXResolutionOption
+  TwoXResolutionOption,
+  Resolution1280x720Option,
+  Resolution1920x1080Option,
+  Resolution2560x1440Option,
+  Resolution3840x2160Option,
+  Resolution1600x900Option,
+  Resolution1024x768Option,
+  Resolution1280x960Option,
+  Resolution1600x1200Option,
+  Resolution1920x1440Option,
+  Resolution2048x1536Option
 ];
 
 export const EXPORT_DATA_TYPE = keyMirror({

src/types/reducers.d.ts

@@ -3,6 +3,7 @@
 
 import {Field, Millisecond} from './types';
 import type {MapViewState} from '@deck.gl/core/typed';
+import type {ExportResolutionOption} from '@kepler.gl/constants';
 
 export type MapState = {
   pitch: number;
@@ -372,7 +373,7 @@ export type BaseMapStyle = {
 
 export declare type ExportImage = {
   ratio: 'SCREEN' | 'FOUR_BY_THREE' | 'SIXTEEN_BY_NINE' | 'CUSTOM';
-  resolution: 'ONE_X' | 'TWO_X';
+  resolution: ExportResolutionOption;
   legend: boolean;
   mapH: number;
   mapW: number;

src/utils/src/export-utils.ts

@@ -7,10 +7,10 @@ import get from 'lodash/get';
 import {
   EXPORT_IMG_RESOLUTION_OPTIONS,
   EXPORT_IMG_RATIO_OPTIONS,
-  RESOLUTIONS,
   EXPORT_IMG_RATIOS,
   FourByThreeRatioOption,
-  OneXResolutionOption
+  OneXResolutionOption,
+  type ExportResolutionOption
 } from '@kepler.gl/constants';
 import {ExportImage} from '@kepler.gl/types';
 import {generateHashId} from '@kepler.gl/common-utils';
@@ -47,7 +47,7 @@ export function calculateExportImageSize({
   mapW: number;
   mapH: number;
   ratio: keyof typeof EXPORT_IMG_RATIOS;
-  resolution: keyof typeof RESOLUTIONS;
+  resolution: ExportResolutionOption;
 }) {
   if (mapW <= 0 || mapH <= 0) {
     return null;

test/node/utils/export-utils-test.js

@@ -114,6 +114,40 @@ test('exportUtils -> calculateExportImageSize', t => {
     'Should return a correct valid with a non valid resolution param'
   );
 
+  // Test fixed resolution options
+  t.deepEqual(
+    calculateExportImageSize({
+      mapW: 1440,
+      mapH: 990,
+      ratio: EXPORT_IMG_RATIOS.SCREEN,
+      resolution: '1920x1080'
+    }),
+    {scale: undefined, imageW: 1920, imageH: 1080},
+    'Should return fixed resolution 1920x1080'
+  );
+
+  t.deepEqual(
+    calculateExportImageSize({
+      mapW: 1440,
+      mapH: 990,
+      ratio: EXPORT_IMG_RATIOS.SCREEN,
+      resolution: '1280x720'
+    }),
+    {scale: undefined, imageW: 1280, imageH: 720},
+    'Should return fixed resolution 1280x720'
+  );
+
+  t.deepEqual(
+    calculateExportImageSize({
+      mapW: 1440,
+      mapH: 990,
+      ratio: EXPORT_IMG_RATIOS.SCREEN,
+      resolution: '2560x1440'
+    }),
+    {scale: undefined, imageW: 2560, imageH: 1440},
+    'Should return fixed resolution 2560x1440'
+  );
+
   t.end();
 });