types

app/components/map/component.stories.tsx

@@ -12,7 +12,9 @@ import FitBoundsControl from 'components/map/controls/fit-bounds';
 import ZoomControl from 'components/map/controls/zoom';
 
 // Map
-import Map, { MapProps } from './component';
+import { MapProps } from 'types/map';
+
+import Map from './component';
 import LAYERS from './layers';
 
 const cartoProvider = new CartoProvider();

app/components/map/component.tsx

@@ -7,44 +7,9 @@ import cx from 'classnames';
 import { fitBounds } from '@math.gl/web-mercator';
 import { easeCubic } from 'd3-ease';
 import isEmpty from 'lodash/isEmpty';
-import { InteractiveMapProps } from 'react-map-gl/src/components/interactive-map';
 import { useDebouncedCallback } from 'use-debounce';
 
-export interface MapProps extends InteractiveMapProps {
-  // /** A function that returns the map instance */
-  children?: (map: any) => React.ReactNode;
-
-  /** Custom css class for styling */
-  className?: string;
-
-  /** An object that defines the viewport
-   * @see https://uber.github.io/react-map-gl/#/Documentation/api-reference/interactive-map?section=initialization
-   */
-  viewport?: Partial<ViewportProps>;
-
-  /** An object that defines the bounds */
-  bounds?: {
-    bbox: number[];
-    options?: {};
-    viewportOptions?: Partial<ViewportProps>;
-  };
-
-  screenshot?: boolean;
-
-  /** A function that exposes when the map is mounted.
-   * It receives and object with the `mapRef` and `mapContainerRef` reference. */
-  onMapReady?: ({ map, mapContainer }) => void;
-
-  /** A function that exposes when the map is loaded.
-   * It receives and object with the `mapRef` and `mapContainerRef` reference. */
-  onMapLoad?: ({ map, mapContainer }) => void;
-
-  /** A function that exposes the viewport */
-  onMapViewportChange?: (viewport: Partial<ViewportProps>) => void;
-
-  /** A function that exposes if current tiles on the viewport are loaded */
-  onMapTilesLoaded?: (loaded: boolean) => void;
-}
+import { MapProps } from 'types/map';
 
 const DEFAULT_VIEWPORT = {
   zoom: 2,

app/layout/projects/new/map/component.tsx

@@ -17,13 +17,12 @@ import {
 
 import Loading from 'components/loading';
 import Map from 'components/map';
-// Controls
-import { MapProps } from 'components/map/component';
 import Controls from 'components/map/controls';
 import FitBoundsControl from 'components/map/controls/fit-bounds';
 import LoadingControl from 'components/map/controls/loading';
 import ZoomControl from 'components/map/controls/zoom';
 import type { NewProjectFields } from 'layout/projects/new/form';
+import { MapProps } from 'types/map';
 
 const minZoom = 2;
 const maxZoom = 20;

app/layout/projects/show/map/index.tsx

@@ -30,7 +30,6 @@ import Select from 'components/forms/select';
 import Icon from 'components/icon/component';
 import Loading from 'components/loading';
 import Map from 'components/map';
-import { MapProps } from 'components/map/component';
 import Controls from 'components/map/controls';
 import FitBoundsControl from 'components/map/controls/fit-bounds';
 import LoadingControl from 'components/map/controls/loading';
@@ -43,6 +42,7 @@ import LegendTypeGradient from 'components/map/legend/types/gradient';
 import LegendTypeMatrix from 'components/map/legend/types/matrix';
 import HelpBeacon from 'layout/help/beacon';
 import { Scenario } from 'types/api/scenario';
+import { MapProps } from 'types/map';
 import { cn } from 'utils/cn';
 
 import PRINT_SVG from 'svgs/ui/print.svg?sprite';

app/layout/scenarios/edit/map/component.tsx

@@ -28,8 +28,6 @@ import { useWDPACategories } from 'hooks/wdpa';
 
 import Loading from 'components/loading';
 import Map from 'components/map';
-// Controls
-import { MapProps } from 'components/map/component';
 import Controls from 'components/map/controls';
 import FitBoundsControl from 'components/map/controls/fit-bounds';
 import LoadingControl from 'components/map/controls/loading';
@@ -42,6 +40,7 @@ import LegendTypeGradient from 'components/map/legend/types/gradient';
 import LegendTypeMatrix from 'components/map/legend/types/matrix';
 import { TABS } from 'layout/project/navigation/constants';
 import ScenariosDrawingManager from 'layout/scenarios/edit/map/drawing-manager';
+import { MapProps } from 'types/map';
 
 export const ScenariosEditMap = (): JSX.Element => {
   const [open, setOpen] = useState(true);

app/layout/scenarios/new/map/component.tsx

@@ -13,8 +13,6 @@ import { useProject } from 'hooks/projects';
 
 import Loading from 'components/loading';
 import Map from 'components/map';
-// Controls
-import { MapProps } from 'components/map/component';
 import Controls from 'components/map/controls';
 import FitBoundsControl from 'components/map/controls/fit-bounds';
 import LoadingControl from 'components/map/controls/loading';
@@ -26,6 +24,7 @@ import LegendTypeChoropleth from 'components/map/legend/types/choropleth';
 import LegendTypeGradient from 'components/map/legend/types/gradient';
 import LegendTypeMatrix from 'components/map/legend/types/matrix';
 import ScenariosDrawingManager from 'layout/scenarios/edit/map/drawing-manager';
+import { MapProps } from 'types/map';
 
 export interface ScenarioNewMapProps {}
 

app/types/map.d.ts

@@ -0,0 +1,39 @@
+import { ViewportProps } from 'react-map-gl';
+
+import { InteractiveMapProps } from 'react-map-gl/src/components/interactive-map';
+
+export interface MapProps extends InteractiveMapProps {
+  // /** A function that returns the map instance */
+  children?: (map: any) => React.ReactNode;
+
+  /** Custom css class for styling */
+  className?: string;
+
+  /** An object that defines the viewport
+   * @see https://uber.github.io/react-map-gl/#/Documentation/api-reference/interactive-map?section=initialization
+   */
+  viewport?: Partial<ViewportProps>;
+
+  /** An object that defines the bounds */
+  bounds?: {
+    bbox: number[];
+    options?: {};
+    viewportOptions?: Partial<ViewportProps>;
+  };
+
+  screenshot?: boolean;
+
+  /** A function that exposes when the map is mounted.
+   * It receives and object with the `mapRef` and `mapContainerRef` reference. */
+  onMapReady?: ({ map, mapContainer }) => void;
+
+  /** A function that exposes when the map is loaded.
+   * It receives and object with the `mapRef` and `mapContainerRef` reference. */
+  onMapLoad?: ({ map, mapContainer }) => void;
+
+  /** A function that exposes the viewport */
+  onMapViewportChange?: (viewport: Partial<ViewportProps>) => void;
+
+  /** A function that exposes if current tiles on the viewport are loaded */
+  onMapTilesLoaded?: (loaded: boolean) => void;
+}