✨ [open-formulieren/open-forms#2173] Add background configuration to …

…map edit

src/components/ComponentConfiguration.tsx

@@ -33,6 +33,7 @@ const ComponentConfiguration: React.FC<ComponentConfigurationProps> = ({
   uniquifyKey,
   supportedLanguageCodes = ['nl', 'en'],
   richTextColors,
+  leafletMapBackgrounds,
   theme,
   getFormComponents,
   getValidatorPlugins,
@@ -60,6 +61,7 @@ const ComponentConfiguration: React.FC<ComponentConfigurationProps> = ({
         uniquifyKey,
         supportedLanguageCodes,
         richTextColors,
+        leafletMapBackgrounds,
         theme,
         getFormComponents,
         getValidatorPlugins,

src/context.ts

@@ -29,6 +29,17 @@ export interface DocumentTypeOption {
   description: string;
 }
 
+/*
+  Leaflet map background options
+
+  This datastructure is created by the Open Forms backend.
+ */
+export interface LeafletMapOption {
+  identifier: string;
+  url: string;
+  label: string;
+}
+
 /*
   Builder
  */
@@ -48,6 +59,7 @@ export interface BuilderContextType {
   getDocumentTypes: () => Promise<Array<DocumentTypeOption>>;
   getConfidentialityLevels: () => Promise<SelectOption[]>;
   getAuthPlugins: () => Promise<AuthPluginOption[]>;
+  leafletMapBackgrounds: LeafletMapOption[];
 }
 
 const BuilderContext = React.createContext<BuilderContextType>({
@@ -65,6 +77,7 @@ const BuilderContext = React.createContext<BuilderContextType>({
   getDocumentTypes: async () => [],
   getConfidentialityLevels: async () => [],
   getAuthPlugins: async () => [],
+  leafletMapBackgrounds: [],
 });
 
 BuilderContext.displayName = 'BuilderContext';

src/registry/map/edit.tsx

@@ -1,6 +1,6 @@
 import {MapComponentSchema} from '@open-formulieren/types';
 import {useFormikContext} from 'formik';
-import {useEffect} from 'react';
+import {useContext, useEffect} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
 
 import {
@@ -20,7 +20,8 @@ import {
   useDeriveComponentKey,
 } from '@/components/builder';
 import {LABELS} from '@/components/builder/messages';
-import {Checkbox, TabList, TabPanel, Tabs} from '@/components/formio';
+import {Checkbox, Select, TabList, TabPanel, Tabs} from '@/components/formio';
+import {BuilderContext} from '@/context';
 import {useErrorChecker} from '@/utils/errors';
 
 import {EditFormDefinition} from '../types';
@@ -62,7 +63,8 @@ const EditForm: EditFormDefinition<MapComponentSchema> = () => {
             'isSensitiveData',
             'useConfigDefaultMapSettings',
             'defaultZoom',
-            'initialCenter'
+            'initialCenter',
+            'backgroundIdentifier'
           )}
         />
         <BuilderTabs.Advanced hasErrors={hasAnyError('conditional')} />
@@ -83,6 +85,7 @@ const EditForm: EditFormDefinition<MapComponentSchema> = () => {
         <IsSensitiveData />
         <UseConfigDefaultMapSettings />
         {!values.useConfigDefaultMapSettings && <MapConfiguration />}
+        <Background />
       </TabPanel>
 
       {/* Advanced tab */}
@@ -134,6 +137,7 @@ EditForm.defaultValues = {
     lat: undefined,
     lng: undefined,
   },
+  backgroundIdentifier: undefined,
   defaultValue: null,
   // Advanced tab
   conditional: {
@@ -174,4 +178,31 @@ const UseConfigDefaultMapSettings: React.FC<{}> = () => {
   );
 };
 
+const Background: React.FC = () => {
+  const {leafletMapBackgrounds} = useContext(BuilderContext);
+
+  const intl = useIntl();
+  const tooltip = intl.formatMessage({
+    description: "Tooltip for 'backgroundIdentifier' builder field",
+    defaultMessage: 'The background to use as the map.',
+  });
+  return (
+    <Select
+      name="backgroundIdentifier"
+      label={
+        <FormattedMessage
+          description="Label for 'backgroundIdentifier' builder field"
+          defaultMessage="Background"
+        />
+      }
+      isClearable
+      tooltip={tooltip}
+      options={leafletMapBackgrounds?.map(background => ({
+        label: background.label,
+        value: background.identifier,
+      }))}
+    />
+  );
+};
+
 export default EditForm;

src/registry/map/preview.tsx

@@ -1,9 +1,10 @@
 import {CRS_RD, TILE_LAYER_RD} from '@open-formulieren/leaflet-tools';
 import {MapComponentSchema} from '@open-formulieren/types';
-import {useLayoutEffect} from 'react';
+import {useContext, useLayoutEffect} from 'react';
 import {MapContainer, TileLayer, useMap} from 'react-leaflet';
 
 import {Component, Description} from '@/components/formio';
+import {BuilderContext} from '@/context';
 
 import {ComponentPreviewProps} from '../types';
 
@@ -37,10 +38,22 @@ const Preview: React.FC<ComponentPreviewProps<MapComponentSchema>> = ({component
     validate = {},
     defaultZoom,
     initialCenter = {},
+    backgroundIdentifier,
   } = component;
+  const {leafletMapBackgrounds} = useContext(BuilderContext);
   const {required = false} = validate;
   const {lat = 52.1326332, lng = 5.291266} = initialCenter;
   const zoom = defaultZoom ?? 8;
+
+  const url = (): string => {
+    if (!leafletMapBackgrounds?.length || !backgroundIdentifier) {
+      return TILE_LAYER_RD.url;
+    }
+    return (
+      leafletMapBackgrounds?.find(background => background.identifier === backgroundIdentifier)
+        ?.url ?? TILE_LAYER_RD.url
+    );
+  };
   return (
     <Component
       type={component.type}
@@ -61,7 +74,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} />}