✨ [open-formulieren/open-forms#2173] Add backgroundUrl to map edit

open-formulieren · Nov 21, 2024 · caf8d84 · caf8d84
1 parent 95d2eb9
commit caf8d84
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 3 deletions.
diff --git 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
@@ -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
@@ -62,7 +62,8 @@ const EditForm: EditFormDefinition<MapComponentSchema> = () => {
             'isSensitiveData',
             'useConfigDefaultMapSettings',
             'defaultZoom',
-            'initialCenter'
+            'initialCenter',
+            'backgroundUrl'
           )}
         />
         <BuilderTabs.Advanced hasErrors={hasAnyError('conditional')} />
@@ -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
@@ -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 (
+    <TextField
+      name="backgroundUrl"
+      label={
+        <FormattedMessage
+          description="Label for 'backgroundUrl' builder field"
+          defaultMessage="Background URL"
+        />
+      }
+      tooltip={tooltip}
+      type="url"
+    />
+  );
+};
+
 const MapConfiguration: React.FC = () => (
   <Panel
     title={
@@ -94,6 +115,7 @@ const MapConfiguration: React.FC = () => (
     <DefaultZoom />
     <Latitude />
     <Longitude />
+    <BackgroundUrl />
   </Panel>
 );
 

diff --git a/src/registry/map/preview.tsx b/src/registry/map/preview.tsx
@@ -37,10 +37,12 @@ const Preview: React.FC<ComponentPreviewProps<MapComponentSchema>> = ({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
       type={component.type}
@@ -61,7 +63,7 @@ const Preview: React.FC<ComponentPreviewProps<MapComponentSchema>> = ({component
           minBlockSize: '400px',
         }}
       >
-        <TileLayer {...TILE_LAYER_RD} />
+        <TileLayer {...TILE_LAYER_RD} url={url} />
         <MapView lat={lat} lng={lng} zoom={zoom} />
       </MapContainer>
       {description && <Description text={description} />}