added reorganization to settings page

components/src/components/Map/Component.ts

@@ -55,6 +55,7 @@ export default class Component extends (FieldComponent as any) {
   loadMap() {
     const mapContainer = document.getElementById(`map-${this.componentID}`);
     const form = document.getElementsByClassName('formio');
+
     const drawOptions = {
       marker: false,
       circlemarker: false,
@@ -63,19 +64,24 @@ export default class Component extends (FieldComponent as any) {
       circle: false,
       rectangle: null,
     };
+    // set marker type from user choice
+    if (this.component.markerType) {
+      for (const [key, value] of Object.entries(this.component.markerType)) {
+        drawOptions[key] = value;
+      }
+    }
 
     // Set drawing options based on markerType
-    if (this.component.markerType === 'rectangle') {
+    if (this.component?.markerType?.rectangle) {
       drawOptions.rectangle = { showArea: false }; // fixes a bug in Leaflet.Draw
     } else {
       drawOptions.rectangle = false;
-      drawOptions[this.component.markerType] = true; // set marker type from user choice
     }
 
     const {
       numPoints,
       defaultZoom,
-      readOnlyMap,
+      allowSubmissions,
       center,
       defaultValue,
       myLocation,
@@ -97,7 +103,7 @@ export default class Component extends (FieldComponent as any) {
       form,
       numPoints,
       defaultZoom,
-      readOnlyMap,
+      readOnlyMap: !allowSubmissions, // if allow submissions, read only is false
       defaultValue,
       onDrawnItemsChange: this.saveDrawnItems.bind(this),
       viewMode,

components/src/components/Map/editForm/Component.edit.data.ts

@@ -3,6 +3,14 @@ export default {
   label: 'Data',
   weight: 20,
   components: [
+    {
+      html: '<h2>Default Values</h2>',
+      key: 'simplecontent1',
+      type: 'simplecontent',
+      input: false,
+      tableView: false,
+      label: 'Text/Images',
+    },
     {
       type: 'map',
       label: 'Default Value',
@@ -13,29 +21,6 @@ export default {
         'This will be the value for this field, before user interaction.',
       input: true,
     },
-    {
-      label: 'Marker Type ',
-      values: [
-        {
-          label: 'Add a point marker (drop a pin)',
-          value: 'marker',
-        },
-        {
-          label:
-            'Add circular area of interest through a point and custom radius',
-          value: 'circle',
-        },
-        {
-          label:
-            'Add polygon',
-          value: 'polygon',
-        },
-      ],
-      defaultValue: 'marker',
-      key: 'markerType',
-      type: 'simpleradios',
-      input: true,
-    },
     {
       label: 'How many Markers per Submission?',
       key: 'numPoints',
@@ -67,27 +52,66 @@ export default {
       label: 'Default Center',
       numPoints: 1,
       tableView: false,
-      markerType: 'marker',
+      markerType: { marker: true },
       defaultZoom: 5,
-      readOnlyMap: false,
+      allowSubmissions: true,
       description:
         'Please select the desired default center using a single marker',
     },
     {
-      label: 'Read Only Map',
+      html: '<h2>Submitter Options</h2>',
+      key: 'simplecontent1',
+      type: 'simplecontent',
+      input: false,
+      tableView: false,
+      label: 'Text/Images',
+    },
+    {
+      label: 'Allow submitters to add input on the map',
       description:
         'This allows for the user to view and scroll the map, but not add any input',
-      key: 'readOnlyMap',
+      key: 'allowSubmissions',
       type: 'simplecheckbox',
+      defaultValue: true,
       input: true,
     },
     {
-      label: 'Submitter "My Location" button',
+      label: 'Marker Type ',
+      values: [
+        {
+          label: 'Add a point marker (drop a pin)',
+          value: 'marker',
+        },
+        {
+          label:
+            'Add circular area of interest through a point and custom radius',
+          value: 'circle',
+        },
+        {
+          label: 'Add a polygon',
+          value: 'polygon',
+        },
+      ],
+      defaultValue: 'marker',
+      key: 'markerType',
+      type: 'simplecheckboxes',
+      input: true,
+    },
+    {
+      label: 'How many Markers per Submission?',
+      key: 'numPoints',
+      type: 'simplenumber',
+      defaultValue: 1,
+      input: true,
+    },
+    {
+      label: 'Enable Submitter "My Location" button',
       description:
         'This allows for the user to center the map on their location.',
       key: 'myLocation',
-      type: 'simplecheckbox',
+      type: 'simplecheckboxadvanced',
       input: true,
+      defaultValue: true,
     },
   ],
 };