diff --git a/components/src/components/Map/Component.ts b/components/src/components/Map/Component.ts index bc92c7f8f..4644c3f94 100644 --- a/components/src/components/Map/Component.ts +++ b/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, diff --git a/components/src/components/Map/editForm/Component.edit.data.ts b/components/src/components/Map/editForm/Component.edit.data.ts index 54af345e9..5a0d9e456 100644 --- a/components/src/components/Map/editForm/Component.edit.data.ts +++ b/components/src/components/Map/editForm/Component.edit.data.ts @@ -3,6 +3,14 @@ export default { label: 'Data', weight: 20, components: [ + { + html: '

Default Values

', + 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: '

Submitter Options

', + 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, }, ], };