feat[map-and-label]: repopulate list map when clicking back

editor.planx.uk/src/@planx/components/List/Public/index.tsx

@@ -113,7 +113,7 @@ const InactiveListCard: React.FC<{
               <TableCell>
                 {formatSchemaDisplayValue(
                   formik.values.schemaData[i][field.data.fn],
-                  schema.fields[j],
+                  schema.fields[j]
                 )}
               </TableCell>
             </TableRow>
@@ -162,7 +162,7 @@ const Root = () => {
   const hasMapField = schema.fields.some((field) => field.type === "map");
   const { longitude, latitude } = useStore(
     (state) =>
-      (state.computePassport()?.data?.["_address"] as SiteAddress) || {},
+      (state.computePassport()?.data?.["_address"] as SiteAddress) || {}
   );
 
   if (hasMapField && (!longitude || !latitude)) {
@@ -201,7 +201,7 @@ const Root = () => {
               <ActiveListCard key={`card-${i}`} index={i} />
             ) : (
               <InactiveListCard key={`card-${i}`} index={i} />
-            ),
+            )
           )}
           {shouldShowAddAnotherButton && (
             <ErrorWrapper

editor.planx.uk/src/@planx/components/List/schemas/Trees.ts

@@ -66,8 +66,8 @@ export const Trees: Schema = {
         title: "Where is it?",
         fn: "features",
         mapOptions: {
-          basemap: "OSVectorTile",
-          drawType: "Point",
+          basemap: "MapboxSatellite",
+          drawType: "Polygon",
           drawColor: "#66ff00",
         },
       },

editor.planx.uk/src/@planx/components/List/utils.tsx

@@ -17,7 +17,7 @@ const List = styled("ul")(() => ({
  */
 export function formatSchemaDisplayValue(
   value: string | string[],
-  field: Field,
+  field: Field
 ) {
   switch (field.type) {
     case "number":
@@ -27,7 +27,7 @@ export function formatSchemaDisplayValue(
       return value;
     case "checklist": {
       const matchingOptions = field.data.options.filter((option) =>
-        (value as string[]).includes(option.id),
+        (value as string[]).includes(option.id)
       );
       return (
         <List>
@@ -39,12 +39,17 @@ export function formatSchemaDisplayValue(
     }
     case "question": {
       const matchingOption = field.data.options.find(
-        (option) => option.data.text === value || option.data.val === value,
+        (option) => option.data.text === value || option.data.val === value
       );
       return matchingOption?.data.text;
     }
     case "map": {
-      const feature = value[0];
+      const feature = {
+        type: "FeatureCollection",
+        features: value,
+      };
+
+      console.log(feature);
       return (
         <>
           {/* @ts-ignore */}
@@ -53,10 +58,11 @@ export function formatSchemaDisplayValue(
             basemap={field.data.mapOptions?.basemap}
             geojsonData={JSON.stringify(feature)}
             geojsonColor={field.data.mapOptions?.drawColor}
-            geojsonFill
+            geojsonFill={true}
             geojsonBuffer={20}
-            osProxyEndpoint={`${import.meta.env.VITE_APP_API_URL
-              }/proxy/ordnance-survey`}
+            osProxyEndpoint={`${
+              import.meta.env.VITE_APP_API_URL
+            }/proxy/ordnance-survey`}
             hideResetControl
             staticMode
             style={{ width: "100%", height: "30vh" }}
@@ -82,7 +88,7 @@ export function formatSchemaDisplayValue(
  */
 export function sumIdenticalUnits(
   fn: string,
-  passportData: Record<string, SchemaUserResponse[]>,
+  passportData: Record<string, SchemaUserResponse[]>
 ): number {
   let sum = 0;
   passportData[`${fn}`].map((item) => {
@@ -101,7 +107,7 @@ export function sumIdenticalUnits(
  */
 export function sumIdenticalUnitsByDevelopmentType(
   fn: string,
-  passportData: Record<string, SchemaUserResponse[]>,
+  passportData: Record<string, SchemaUserResponse[]>
 ): Record<string, number> {
   // Sum identical units by development type (@todo read all possible option `val` from Schema in future)
   const baseSums: Record<string, number> = {
@@ -144,7 +150,7 @@ interface FlattenOptions {
  */
 export function flatten<T extends Record<string, any>>(
   object: T,
-  { depth = Infinity, path = null, separator = "." }: FlattenOptions = {},
+  { depth = Infinity, path = null, separator = "." }: FlattenOptions = {}
 ): T {
   return Object.keys(object).reduce((acc: T, key: string): T => {
     const value = object[key];
@@ -165,9 +171,9 @@ export function flatten<T extends Record<string, any>>(
 
     return isObject && depth > 0
       ? {
-        ...acc,
-        ...flatten(value, { depth: depth - 1, path: newPath, separator }),
-      }
+          ...acc,
+          ...flatten(value, { depth: depth - 1, path: newPath, separator }),
+        }
       : { ...acc, [newPath]: value };
   }, {} as T);
 }

editor.planx.uk/src/@planx/components/shared/Schema/InputFields/MapFieldInput.tsx

@@ -14,6 +14,8 @@ export const MapFieldInput: React.FC<Props<MapField>> = (props) => {
     data: { title, mapOptions },
   } = props;
   const { id, errorMessage, name } = getFieldProps(props);
+  const geojsonFieldProp =
+    props.formik.values.schemaData[props.activeIndex].features[0];
 
   const teamSettings = useStore.getState().teamSettings;
   const passport = useStore((state) => state.computePassport());
@@ -73,6 +75,7 @@ export const MapFieldInput: React.FC<Props<MapField>> = (props) => {
               teamSettings?.boundaryBBox &&
               JSON.stringify(teamSettings?.boundaryBBox)
             }
+            drawGeojsonData={JSON.stringify(geojsonFieldProp) || null}
             mapboxAccessToken={import.meta.env.VITE_APP_MAPBOX_ACCESS_TOKEN}
             collapseAttributions
           />