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