Map Readonly in View Submission and Submission Data Update to Json

components/src/components/Map/Component.ts

@@ -15,6 +15,7 @@ export default class Component extends (FieldComponent as any) {
       label: 'Map',
       key: 'map',
       input: true,
+      defaultvalue: { features: [] },
       ...extend,
     });
   }
@@ -72,40 +73,41 @@ export default class Component extends (FieldComponent as any) {
     }
 
     const { numPoints, defaultZoom, readOnlyMap, center } = this.component;
+    const { readOnly: viewMode } = this.options;
 
-    let parsedCenter;
-    if (center) {
-      parsedCenter = JSON.parse(center).latlng;
+    let initialCenter;
+    if (center && center.features && center.features[0]) {
+      initialCenter = center.features[0].coordinates;
     }
 
     this.mapService = new MapService({
       mapContainer,
       drawOptions,
-      center: center ? parsedCenter : DEFAULT_CENTER,
+      center: center ? initialCenter : DEFAULT_CENTER,
       form,
       numPoints,
       defaultZoom,
       readOnlyMap,
       onDrawnItemsChange: this.saveDrawnItems.bind(this),
+      viewMode,
     });
 
     // Load existing data if available
-    if (this.dataValue) {
+    if (this.dataValue && this.dataValue.features) {
       try {
-        const parsedValue = JSON.parse(this.dataValue);
-        this.mapService.loadDrawnItems(parsedValue);
+        this.mapService.loadDrawnItems(this.dataValue.features);
       } catch (error) {
         console.error('Failed to parse dataValue:', error);
       }
     }
   }
 
   saveDrawnItems(drawnItems: L.Layer[]) {
-    const value = drawnItems.map((layer: any) => {
+    const features = drawnItems.map((layer: any) => {
       if (layer instanceof L.Marker) {
         return {
           type: 'marker',
-          latlng: layer.getLatLng(),
+          coordinates: layer.getLatLng(),
         };
       } else if (layer instanceof L.Rectangle) {
         return {
@@ -115,38 +117,34 @@ export default class Component extends (FieldComponent as any) {
       } else if (layer instanceof L.Circle) {
         return {
           type: 'circle',
-          latlng: layer.getLatLng(),
+          coordinates: layer.getLatLng(),
           radius: layer.getRadius(),
         };
       } else if (layer instanceof L.Polygon) {
         return {
           type: 'polygon',
-          latlngs: layer.getLatLngs(),
+          coordinates: layer.getLatLngs(),
         };
       } else if (layer instanceof L.Polyline) {
         return {
           type: 'polyline',
-          latlngs: layer.getLatLngs(),
+          coordinates: layer.getLatLngs(),
         };
       }
     });
 
-    // Convert to JSON string
-    const jsonValue =
-      this.component.numPoints === 1
-        ? JSON.stringify(value[0])
-        : JSON.stringify(value);
-    this.setValue(jsonValue);
+    this.setValue({ features });
   }
 
   setValue(value) {
     super.setValue(value);
 
     // Additional logic to render the saved data on the map if necessary
-    if (this.mapService && value) {
+    if (this.mapService && value && value.features) {
       try {
-        const parsedValue = JSON.parse(value);
-        this.mapService.loadDrawnItems(parsedValue);
+        //const parsedValue = JSON.parse(value);
+
+        this.mapService.loadDrawnItems(value.features);
       } catch (error) {
         console.error('Failed to parse value:', error);
       }

components/src/components/Map/services/MapService.ts

@@ -20,6 +20,7 @@ interface MapServiceOptions {
   defaultZoom?: number;
   readOnlyMap?: boolean;
   onDrawnItemsChange: (items: any) => void; // Support both single and multiple items
+  viewMode?: boolean;
 }
 
 class MapService {
@@ -29,6 +30,7 @@ class MapService {
 
   constructor(options: MapServiceOptions) {
     this.options = options;
+
     if (options.mapContainer) {
       const { map, drawnItems } = this.initializeMap(options);
       this.map = map;
@@ -53,8 +55,16 @@ class MapService {
   }
 
   initializeMap(options: MapServiceOptions) {
-    let { mapContainer, center, drawOptions, form, defaultZoom, readOnlyMap } =
-      options;
+    let {
+      mapContainer,
+      center,
+      drawOptions,
+      form,
+      defaultZoom,
+      readOnlyMap,
+      viewMode,
+    } = options;
+
     if (drawOptions.rectangle) {
       drawOptions.rectangle.showArea = false;
     }
@@ -72,13 +82,15 @@ class MapService {
 
     // Add Drawing Controllers
     if (!readOnlyMap) {
-      let drawControl = new L.Control.Draw({
-        draw: drawOptions,
-        edit: {
-          featureGroup: drawnItems,
-        },
-      });
-      map.addControl(drawControl);
+      if (!viewMode) {
+        let drawControl = new L.Control.Draw({
+          draw: drawOptions,
+          edit: {
+            featureGroup: drawnItems,
+          },
+        });
+        map.addControl(drawControl);
+      }
     }
 
     // Checking to see if the map should be interactable
@@ -145,15 +157,15 @@ class MapService {
     items.forEach((item) => {
       let layer;
       if (item.type === 'marker') {
-        layer = L.marker(item.latlng);
+        layer = L.marker(item.coordinates);
       } else if (item.type === 'rectangle') {
         layer = L.rectangle(item.bounds);
       } else if (item.type === 'circle') {
-        layer = L.circle(item.latlng, { radius: item.radius });
+        layer = L.circle(item.coordinates, { radius: item.radius });
       } else if (item.type === 'polygon') {
-        layer = L.polygon(item.latlngs);
+        layer = L.polygon(item.coordinates);
       } else if (item.type === 'polyline') {
-        layer = L.polyline(item.latlngs);
+        layer = L.polyline(item.coordinates);
       }
 
       if (layer) {