default interaction

Author: alexfauquette

docs/data/charts/map/ProjectionMapShape.js

@@ -78,7 +78,7 @@ export default function ProjectionMapShape() {
         <ChartsGeoDataProviderPremium
           geoData={isConicProjection(projection) ? USAStates : countries}
           projection={projection}
-          zoom={{ rotationAllowed: 'long', translationAllowed: 'both' }}
+          zoom
           height={360}
           apiRef={apiRef}
         >

docs/data/charts/map/ProjectionMapShape.tsx

@@ -90,7 +90,7 @@ export default function ProjectionMapShape() {
         <ChartsGeoDataProviderPremium
           geoData={isConicProjection(projection) ? USAStates : countries}
           projection={projection}
-          zoom={{ rotationAllowed: 'long', translationAllowed: 'both' }}
+          zoom
           height={360}
           apiRef={apiRef}
         >

docs/data/charts/map/map.md

@@ -217,7 +217,10 @@ The zoom object has two properties to limit this behavior:
 - `rotationAllowed`: `'both' | 'long' | 'lat' | 'none'` Limit how the center can be modified
 - `translationAllowed`: `'both' | 'x' | 'y' | 'none'` Limit how the translation can be modified
 
-In most cases, the configuration `{ translationAllowed: 'y', rotationAllowed: 'long' }` is the more appropriate.
+By default, both are derived from the chosen projection so each map behaves as expected without extra configuration:
+
+- Globe-like (azimuthal) and conic projections rotate the sphere (`{ rotationAllowed: 'both', translationAllowed: 'none' }`).
+- Flat (cylindrical) projections pan and wrap east–west (`{ rotationAllowed: 'long', translationAllowed: 'both' }`).
 
 You can also modify the zoom result with:
 

packages/x-charts-premium/src/internals/plugins/useGeoProjection/useGeoProjection.selectors.ts

@@ -6,4 +6,5 @@ export const selectorChartGeoProjectionState =
   useGeoProjectionSelectors.selectorChartGeoProjectionState;
 export const selectorChartGeoData = useGeoProjectionSelectors.selectorChartGeoData;
 export const selectorChartProjection = useGeoProjectionSelectors.selectorChartProjection;
+export const selectorChartRawProjection = useGeoProjectionSelectors.selectorChartRawProjection;
 export const selectorChartGeoPath = useGeoProjectionSelectors.selectorChartGeoPath;

packages/x-charts-premium/src/internals/plugins/useGeoProjectionZoom/mapZoom.utils.test.ts

@@ -1,7 +1,14 @@
 import { describe, it, expect } from 'vitest';
 import type { GeoProjection } from '@mui/x-charts-vendor/d3-geo';
-import { geoMercator, geoOrthographic } from '@mui/x-charts-vendor/d3-geo';
-import { clampTranslationAxis, getRotation } from './mapZoom.utils';
+import {
+  geoConicConformal,
+  geoAlbersUsa,
+  geoMercator,
+  geoOrthographic,
+  geoStereographic,
+  geoAlbers,
+} from '@mui/x-charts-vendor/d3-geo';
+import { clampTranslationAxis, getProjectionFamily, getRotation } from './mapZoom.utils';
 
 const EXTENT: [[number, number], [number, number]] = [
   [0, 0],
@@ -125,4 +132,26 @@ describe('mapZoomUtils', () => {
       );
     });
   });
+
+  describe('getProjectionFamily', () => {
+    it('conic detection', () => {
+      expect(getProjectionFamily(geoConicConformal())).to.deep.equal('conic');
+    });
+
+    it('conic detection for Albers', () => {
+      expect(getProjectionFamily(geoAlbers())).to.deep.equal('conic');
+    });
+
+    it('conic detection for Albers USA', () => {
+      expect(getProjectionFamily(geoAlbersUsa())).to.deep.equal('conic');
+    });
+
+    it('cylindrical detection for Mercator', () => {
+      expect(getProjectionFamily(geoMercator())).to.deep.equal('cylindrical');
+    });
+
+    it('azimuthal detection for Stereographic', () => {
+      expect(getProjectionFamily(geoStereographic())).to.deep.equal('azimuthal');
+    });
+  });
 });

packages/x-charts-premium/src/internals/plugins/useGeoProjectionZoom/mapZoom.utils.ts

@@ -1,13 +1,82 @@
 import type { GeoProjection } from '@mui/x-charts-vendor/d3-geo';
 import { geoPath } from '@mui/x-charts-vendor/d3-geo';
 import { selectorChartDrawingArea } from '@mui/x-charts/internals';
-import type { ChartUsedStore } from '@mui/x-charts/internals';
+import type { ChartUsedStore, useGeoProjectionTypes } from '@mui/x-charts/internals';
 import { selectorChartGeoData } from '../useGeoProjection/useGeoProjection.selectors';
 import type { MapRotationAxis, MapTranslationAxis } from './useGeoProjectionZoom.types';
 
 const DEG = Math.PI / 180;
 const clamp = (value: number, min: number, max: number) => Math.min(max, Math.max(min, value));
 
+type ProjectionFamily = 'azimuthal' | 'conic' | 'cylindrical';
+
+const PROJECTION_FAMILY: Record<useGeoProjectionTypes.D3NamedProjection, ProjectionFamily> = {
+  azimuthalEqualArea: 'azimuthal',
+  azimuthalEquidistant: 'azimuthal',
+  gnomonic: 'azimuthal',
+  orthographic: 'azimuthal',
+  stereographic: 'azimuthal',
+  conicConformal: 'conic',
+  conicEqualArea: 'conic',
+  conicEquidistant: 'conic',
+  albers: 'conic',
+  albersUsa: 'conic',
+  equirectangular: 'cylindrical',
+  mercator: 'cylindrical',
+  transverseMercator: 'cylindrical',
+  equalEarth: 'cylindrical',
+  naturalEarth1: 'cylindrical',
+};
+
+/**
+ * The interaction that feels natural for each projection family, used as the default for
+ * `rotationAllowed`/`translationAllowed` when the consumer does not set them explicitly.
+ */
+const FAMILY_INTERACTION: Record<
+  ProjectionFamily,
+  { rotationAllowed: MapRotationAxis; translationAllowed: MapTranslationAxis }
+> = {
+  azimuthal: { rotationAllowed: 'both', translationAllowed: 'none' },
+  conic: { rotationAllowed: 'both', translationAllowed: 'none' },
+  cylindrical: { rotationAllowed: 'long', translationAllowed: 'both' },
+};
+
+export function getProjectionFamily(
+  projection: useGeoProjectionTypes.GeoProjectionInput | null,
+): ProjectionFamily {
+  if (projection == null) {
+    return 'cylindrical'; // fallback to avoid useless edge cases
+  }
+  if (typeof projection === 'string') {
+    return PROJECTION_FAMILY[projection] ?? 'cylindrical';
+  }
+
+  // Try to guess if users provided custom projection
+
+  // Conic projections expose the `parallels` accessor (e.g. conicConformal, albers).
+  if ('parallels' in projection) {
+    return 'conic';
+  }
+  // Composite projections such as `albersUsa` stitch several conics together and so drop `rotate`
+  // (there is no single sphere to spin). Treat them like the conic family they are built from.
+  if (typeof projection.rotate !== 'function') {
+    return 'conic';
+  }
+  // Azimuthal projections clip the sphere to a disc, so their clip angle sits strictly between 0 and
+  // 180° (e.g. 90° for orthographic). Flat projections leave it at 0° (no clipping).
+  const clipAngle = projection.clipAngle?.();
+  if (typeof clipAngle === 'number' && clipAngle > 0 && clipAngle < 180) {
+    return 'azimuthal';
+  }
+  return 'cylindrical';
+}
+
+export function getDefaultMapInteraction(
+  projection: useGeoProjectionTypes.GeoProjectionInput | null,
+): { rotationAllowed: MapRotationAxis; translationAllowed: MapTranslationAxis } {
+  return FAMILY_INTERACTION[getProjectionFamily(projection)];
+}
+
 /**
  * The geographic `center` (`[longitude, latitude]`) such that, after scaling the projection by
  * `zoomFactor` and applying `rotate([-center[0], -center[1]])`, the geographic coordinate

packages/x-charts-premium/src/internals/plugins/useGeoProjectionZoom/useGeoProjectionZoom.ts

@@ -9,9 +9,12 @@ import {
   useRegisterZoomGestures,
 } from '@mui/x-charts-pro/internals';
 import type { GeoProjection } from '@mui/x-charts-vendor/d3-geo';
-import { selectorChartProjection } from '../useGeoProjection/useGeoProjection.selectors';
+import {
+  selectorChartProjection,
+  selectorChartRawProjection,
+} from '../useGeoProjection/useGeoProjection.selectors';
 import type { MapZoomView, UseGeoProjectionZoomSignature } from './useGeoProjectionZoom.types';
-import { getRotation, getTranslation } from './mapZoom.utils';
+import { getDefaultMapInteraction, getRotation, getTranslation } from './mapZoom.utils';
 
 /** Multiplicative zoom step applied per wheel tick. */
 const WHEEL_ZOOM_STEP = 1.1;
@@ -25,12 +28,14 @@ export const useGeoProjectionZoom: ChartPlugin<UseGeoProjectionZoomSignature> =
 }) => {
   const { zoom, onZoomChange, view } = params;
 
+  const interactionDefaults = getDefaultMapInteraction(selectorChartRawProjection(store.state));
+
   const {
     minZoomLevel = 1,
     maxZoomLevel = 8,
     maxGap = 0,
-    rotationAllowed = 'both',
-    translationAllowed = 'both',
+    rotationAllowed = interactionDefaults.rotationAllowed,
+    translationAllowed = interactionDefaults.translationAllowed,
   } = typeof zoom === 'object' ? zoom : {};
 
   // `zoom` is either a boolean or a config object; an object always enables the interaction.

packages/x-charts/src/internals/plugins/featurePlugins/useGeoProjectionZoom/useGeoProjectionZoom.types.ts

@@ -41,13 +41,11 @@ export interface MapZoomOptions {
   /**
    * Which axes the map can be rotated along while panning or zooming.
    * For example, `'long'` lets the map rotate east–west but locks the north–south tilt.
-   * @default 'both'
    */
   rotationAllowed?: MapRotationAxis;
   /**
    * Which axes the map can be translated along while panning or zooming.
    * For example, `'y'` lets the map translate vertically but locks the horizontal movement.
-   * @default 'both'
    */
   translationAllowed?: MapTranslationAxis;
   /**