feat:types for map

package.json

@@ -137,10 +137,12 @@
     "@types/d3-ease": "^1.0.9",
     "@types/express-slow-down": "^1.3.2",
     "@types/file-saver": "^2.0.5",
+    "@types/geojson-validation": "^1.0.0",
     "@types/node": "^14.0.26",
     "@types/react": "^16.9.49",
     "@types/react-dom": "^18.0.11",
-    "@types/react-map-gl": "^5.2.11",
+    "@types/react-json-editor-ajrm": "^2.5.3",
+    "@types/react-map-gl": "^6.1.3",
     "@types/styled-jsx": "^2.2.8",
     "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "^5.41.0",

src/features/common/CopyToClipboard/index.tsx

@@ -14,7 +14,7 @@ const Alert = styled(MuiAlert)(({ theme }) => {
 
 interface Props {
   text: string;
-  isButton: boolean;
+  isButton?: boolean;
 }
 
 export default function CopyToClipboard({

src/features/common/types/map.d.ts

@@ -0,0 +1,202 @@
+import {
+  TreeProjectClassification,
+  CountryCode,
+  CurrencyCode,
+  TreeProjectMetadata,
+  DefaultPaymentConfig,
+  Tpo,
+  UnitTypes,
+} from '@planet-sdk/common';
+import { Nullable } from '@planet-sdk/common/build/types/util';
+import { ContributionProps } from "../../user/RegisterTrees/RegisterTrees/SingleContribution";
+import { FlyToInterpolator } from "react-map-gl";
+
+
+
+export interface ViewportProps {
+    height: number | string ;
+    width:  number | string ;
+    zoom:  number | undefined;
+    latitude?: number;
+    longitude?: number;
+    center?: number[];
+    transitionDuration?: number | undefined;
+    transitionInterpolator?: FlyToInterpolator | undefined;
+    transitionEasing?: (normalizedTime: number) => number 
+}
+
+export interface ProjectGeoJsonProps {
+    type: 'Feature';
+    geometry: {
+      type: string;
+      coordinates: number[];
+    };
+    properties: {
+      allowDonations: boolean;
+      classification: TreeProjectClassification;
+      countPlanted: number;
+      countTarget: number;
+      country: CountryCode;
+      currency: CurrencyCode;
+      id: string;
+      image: string;
+      isApproved: boolean;
+      isFeatured: boolean;
+      isTopProject: boolean;
+      location: Nullable<string>;
+      metadata: TreeProjectMetadata;
+      minTreeCount: number;
+      name: string;
+      paymentDefaults: Nullable<DefaultPaymentConfig>;
+      purpose: 'trees';
+      unit: 'tree';
+      slug: string;
+      taxDeductionCountries: CountryCode[];
+      tpo: Tpo;
+      treeCost: number;
+      unitCost: number;
+      unitType: UnitTypes;
+    };
+  }
+
+
+  export interface RegisterTreeGeometry {
+    features?: [];
+    coordinates: [number, number] | number[][];
+    type: 'Polygon' | 'Point';
+}
+
+  export interface RegisterTreesFormProps {
+    setContributionGUID: React.Dispatch<React.SetStateAction<string>>;
+    setContributionDetails: React.Dispatch<
+      React.SetStateAction<ContributionProps | null>
+    >;
+    setRegistered: React.Dispatch<React.SetStateAction<boolean>>;
+  }
+
+
+
+  // Map styling 
+
+  export interface MapStyle {
+    version: number
+    sprite: string
+    glyphs: string
+    sources: Sources
+    layers: Layer[]
+    metadata: Metadata
+  }
+
+  export type RequiredMapStyle = Omit<MapStyle, "sprite", "glyphs","metadata">
+
+  export interface Sources {
+    esri: Esri
+  }
+
+  export interface Esri {
+    type: string
+    scheme: string
+    tilejson: string
+    format: string
+    maxzoom: number
+    tiles: string[]
+    name: string
+  }
+
+  export interface Layer {
+    id: string
+    type: string
+    paint: Paint
+    layout: Layout
+    showProperties?: boolean
+    source?: string
+    "source-layer"?: string
+    minzoom?: number
+    maxzoom?: number
+    filter?: any[]
+  }
+
+  export interface Paint {
+    "background-color"?: string
+    "fill-color": any
+    "fill-outline-color"?: string
+    "fill-pattern"?: string
+    "fill-opacity"?: number
+    "line-color": any
+    "line-width": any
+    "line-dasharray"?: number[]
+    "text-color"?: string
+    "text-halo-color"?: string
+    "fill-translate"?: FillTranslate
+    "fill-translate-anchor"?: string
+    "line-opacity"?: number
+    "text-halo-blur"?: number
+    "text-halo-width"?: number
+  }
+
+  export interface FillTranslate {
+    stops: [number, number[]][]
+  }
+
+  export interface Layout {
+    visibility?: string
+    "line-join"?: string
+    "line-cap"?: string
+    "symbol-placement"?: string
+    "symbol-avoid-edges"?: boolean
+    "icon-image"?: string
+    "symbol-spacing"?: number
+    "icon-rotation-alignment"?: string
+    "icon-allow-overlap"?: boolean
+    "icon-padding"?: number
+    "text-font"?: string[]
+    "text-size": any
+    "text-letter-spacing": any
+    "text-line-height"?: number
+    "text-max-width"?: number
+    "text-field"?: string
+    "text-padding"?: number
+    "text-max-angle"?: number
+    "text-offset"?: number[]
+    "text-rotation-alignment"?: string
+    "text-transform"?: string
+    "text-optional"?: boolean
+  }
+
+  export interface Metadata {
+    arcgisStyleUrl: string
+    arcgisOriginalItemTitle: string
+    arcgisQuickEditorWarning: boolean
+    arcgisQuickEditor: ArcgisQuickEditor
+    arcgisEditorExtents: ArcgisEditorExtent[]
+    arcgisMinimapVisibility: boolean
+  }
+
+  export interface ArcgisQuickEditor {
+    labelTextColor: string
+    labelHaloColor: string
+    baseColor: string
+    spriteProcessing: boolean
+    labelContrast: number
+    labelColorMode: string
+    colorMode: string
+    colors: Colors
+    boundaries: string
+  }
+
+  export interface Colors {
+    boundaries: string
+  }
+
+  export interface ArcgisEditorExtent {
+    spatialReference: SpatialReference
+    xmin: number
+    ymin: number
+    xmax: number
+    ymax: number
+  }
+
+  export interface SpatialReference {
+    wkid: number
+    latestWkid?: number
+  }

src/features/common/types/plantLocation.d.ts

@@ -1,6 +1,21 @@
 import { DateString } from './common';
-import { Polygon, Point } from 'geojson';
 import { Links } from './payments';
+import { Polygon, Point } from 'geojson';
+
+export interface Geometry {
+  coordinates: number[][][];
+  type: string;
+  properties: Properties;
+}
+export interface GeometryOfSinglePlant {
+  coordinates: number[];
+  type: string;
+  properties: Properties;
+}
+
+export interface Properties {
+  id: string;
+}
 
 export interface PlantLocationBase {
   hid: string;
@@ -23,34 +38,35 @@ export interface PlantLocationBase {
   status: string | null; // currently always null. Should we do something here?
   statusReason: string | null; // currently always null. Should we do something here?
 }
-
 export interface PlantLocationSingle extends PlantLocationBase {
-  type: 'single';
+  type: PlantLocationType;
   scientificName: string | null;
   scientificSpecies: string | null;
   tag: string | null;
   measurements: Measurements;
   originalGeometry: Point;
-  geometry: Point;
+  geometry: GeometryOfSinglePlant;
+  sampleTrees: SamplePlantLocation[];
 }
 
 export interface PlantLocationMulti extends PlantLocationBase {
-  type: 'multi';
+  type: PlantLocationType;
   nextMeasurementDate: DateString | null;
   plantDateStart: DateString | null;
   plantDateEnd: DateString | null;
   sampleTreeCount: number;
   samplePlantLocations: SamplePlantLocation[];
   plantedSpecies: PlantedSpecies[];
   originalGeometry: Polygon;
-  geometry: Polygon;
+  geometry: Geometry;
+  sampleTrees: SamplePlantLocation[];
 }
 
 export type PlantLocation = PlantLocationSingle | PlantLocationMulti;
 
 export interface SamplePlantLocation
   extends Omit<PlantLocationBase, 'plantProject'> {
-  type: 'sample';
+  type: Type;
   /** parent plant location */
   parent: string;
   /** tpo profile id */
@@ -63,6 +79,7 @@ export interface SamplePlantLocation
   measurements: Measurements;
   originalGeometry: Point;
   geometry: Point;
+  sampleTrees?: PlantLocation[];
 }
 
 export interface Metadata {

src/features/projects/components/ProjectsMap.tsx

@@ -13,6 +13,11 @@ import { useTranslation } from 'next-i18next';
 import { ParamsContext } from '../../common/Layout/QueryParamsContext';
 import { PopupData } from './maps/Markers';
 
+interface ShowDetailsProps {
+  coordinates: [number, number] | null;
+  show: boolean;
+}
+
 export default function ProjectsMap(): ReactElement {
   const {
     project,
@@ -63,8 +68,8 @@ export default function ProjectsMap(): ReactElement {
     loadMapStyle();
   }, []);
 
-  const [showDetails, setShowDetails] = React.useState<DetailsType>({
-    coordinates: [],
+  const [showDetails, setShowDetails] = React.useState<ShowDetailsProps>({
+    coordinates: null,
     show: false,
   });
 
@@ -186,8 +191,12 @@ export default function ProjectsMap(): ReactElement {
         </div>
         {showDetails.show && (
           <Popup
-            latitude={showDetails.coordinates[1]}
-            longitude={showDetails.coordinates[0]}
+            latitude={
+              showDetails?.coordinates ? showDetails?.coordinates[1] : 0
+            }
+            longitude={
+              showDetails?.coordinates ? showDetails?.coordinates[1] : 0
+            }
             closeButton={false}
             closeOnClick={false}
             onClose={() => setPopupData({ show: false })}