diff --git a/i18n/messages/en.json b/i18n/messages/en.json index 1d1a24ed..e4d5d54b 100644 --- a/i18n/messages/en.json +++ b/i18n/messages/en.json @@ -234,6 +234,11 @@ "description": "Missing datetime value for fixed value validation", "originalDefault": "You must specify a datetime." }, + "7DKUMi": { + "defaultMessage": "Background URL", + "description": "Label for 'backgroundUrl' builder field", + "originalDefault": "Background URL" + }, "7Ldfn+": { "defaultMessage": "Relative to variable", "description": "Date constraint mode 'relativeToVariable' label", @@ -969,6 +974,11 @@ "description": "Cancel component configuration button", "originalDefault": "Cancel" }, + "dLdeed": { + "defaultMessage": "URL to use as map background.", + "description": "Tooltip for 'backgroundUrl' builder field", + "originalDefault": "URL to use as map background." + }, "dWWO3N": { "defaultMessage": "Hide label", "description": "Label for 'hideLabel' builder field", diff --git a/i18n/messages/nl.json b/i18n/messages/nl.json index a0ecf430..70ea4ffd 100644 --- a/i18n/messages/nl.json +++ b/i18n/messages/nl.json @@ -236,6 +236,11 @@ "description": "Missing datetime value for fixed value validation", "originalDefault": "You must specify a datetime." }, + "7DKUMi": { + "defaultMessage": "Achtergrond URL", + "description": "Label for 'backgroundUrl' builder field", + "originalDefault": "Background URL" + }, "7Ldfn+": { "defaultMessage": "Ten opzichte van een variabele", "description": "Date constraint mode 'relativeToVariable' label", @@ -981,6 +986,11 @@ "description": "Cancel component configuration button", "originalDefault": "Cancel" }, + "dLdeed": { + "defaultMessage": "URL die gebruikt wordt als map achtergrond.", + "description": "Tooltip for 'backgroundUrl' builder field", + "originalDefault": "URL to use as map background." + }, "dWWO3N": { "defaultMessage": "Label verbergen", "description": "Label for 'hideLabel' builder field", diff --git a/src/registry/map/edit.tsx b/src/registry/map/edit.tsx index f4613db4..c9c1cb6c 100644 --- a/src/registry/map/edit.tsx +++ b/src/registry/map/edit.tsx @@ -62,7 +62,8 @@ const EditForm: EditFormDefinition = () => { 'isSensitiveData', 'useConfigDefaultMapSettings', 'defaultZoom', - 'initialCenter' + 'initialCenter', + 'backgroundUrl' )} /> @@ -134,6 +135,7 @@ EditForm.defaultValues = { lat: undefined, lng: undefined, }, + backgroundUrl: '', defaultValue: null, // Advanced tab conditional: { diff --git a/src/registry/map/map-configuration.tsx b/src/registry/map/map-configuration.tsx index 9db9f2c8..b3173eb7 100644 --- a/src/registry/map/map-configuration.tsx +++ b/src/registry/map/map-configuration.tsx @@ -1,7 +1,7 @@ import {TILE_LAYER_RD} from '@open-formulieren/leaflet-tools'; import {FormattedMessage, useIntl} from 'react-intl'; -import {NumberField, Panel} from '@/components/formio'; +import {NumberField, Panel, TextField} from '@/components/formio'; const DefaultZoom: React.FC = () => { const intl = useIntl(); @@ -80,6 +80,27 @@ const Longitude: React.FC = () => { ); }; +const BackgroundUrl: React.FC = () => { + const intl = useIntl(); + const tooltip = intl.formatMessage({ + description: "Tooltip for 'backgroundUrl' builder field", + defaultMessage: 'URL to use as map background.', + }); + return ( + + } + tooltip={tooltip} + type="url" + /> + ); +}; + const MapConfiguration: React.FC = () => ( ( + ); diff --git a/src/registry/map/preview.tsx b/src/registry/map/preview.tsx index fd373264..8c0b6a46 100644 --- a/src/registry/map/preview.tsx +++ b/src/registry/map/preview.tsx @@ -37,10 +37,12 @@ const Preview: React.FC> = ({component validate = {}, defaultZoom, initialCenter = {}, + backgroundUrl, } = component; const {required = false} = validate; const {lat = 52.1326332, lng = 5.291266} = initialCenter; const zoom = defaultZoom ?? 8; + const url = backgroundUrl && backgroundUrl !== '' ? backgroundUrl : TILE_LAYER_RD.url; return ( > = ({component minBlockSize: '400px', }} > - + {description && }