From c2900768a6ec1f06fa7b72d1693a893a1def4799 Mon Sep 17 00:00:00 2001 From: abhilash-aot Date: Wed, 10 Jul 2024 15:08:59 -0700 Subject: [PATCH 1/2] Readonly in view submission mode --- components/src/components/Map/Component.ts | 2 ++ .../src/components/Map/services/MapService.ts | 30 +++++++++++++------ 2 files changed, 23 insertions(+), 9 deletions(-) diff --git a/components/src/components/Map/Component.ts b/components/src/components/Map/Component.ts index c69c858ab..a0c9aefb8 100644 --- a/components/src/components/Map/Component.ts +++ b/components/src/components/Map/Component.ts @@ -72,6 +72,7 @@ export default class Component extends (FieldComponent as any) { } const { numPoints, defaultZoom, readOnlyMap, center } = this.component; + const { readOnly: viewMode } = this.options; let parsedCenter; if (center) { @@ -87,6 +88,7 @@ export default class Component extends (FieldComponent as any) { defaultZoom, readOnlyMap, onDrawnItemsChange: this.saveDrawnItems.bind(this), + viewMode, }); // Load existing data if available diff --git a/components/src/components/Map/services/MapService.ts b/components/src/components/Map/services/MapService.ts index 46585a644..d9f07bd48 100644 --- a/components/src/components/Map/services/MapService.ts +++ b/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 From 263774042a588841889cf4064ab4b8e405637e33 Mon Sep 17 00:00:00 2001 From: abhilash-aot Date: Tue, 16 Jul 2024 09:27:56 -0700 Subject: [PATCH 2/2] Updated for Map data Submission to be an Json --- components/src/components/Map/Component.ts | 38 +++++++++---------- .../src/components/Map/services/MapService.ts | 8 ++-- 2 files changed, 21 insertions(+), 25 deletions(-) diff --git a/components/src/components/Map/Component.ts b/components/src/components/Map/Component.ts index a0c9aefb8..131a5eb07 100644 --- 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,10 +93,9 @@ 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); } @@ -103,11 +103,11 @@ export default class Component extends (FieldComponent as any) { } 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 index d9f07bd48..fe6d28abf 100644 --- 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) {