Updated for Map data Submission to be an Json

RyanBirtch-aot · Jul 16, 2024 · 2637740 · 2637740
1 parent c290076
commit 2637740
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 25 deletions.
diff --git a/components/src/components/Map/Component.ts b/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,
     });
   }
@@ -74,15 +75,15 @@ 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,
@@ -92,22 +93,21 @@ export default class Component extends (FieldComponent as any) {
     });
 
     // 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 {
@@ -117,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);
       }

diff --git a/components/src/components/Map/services/MapService.ts b/components/src/components/Map/services/MapService.ts
@@ -157,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) {