✨ [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,
+  getLeafletMapBackgrounds,
   theme,
   getFormComponents,
   getValidatorPlugins,
@@ -60,6 +61,7 @@ const ComponentConfiguration: React.FC<ComponentConfigurationProps> = ({
         uniquifyKey,
         supportedLanguageCodes,
         richTextColors,
+        getLeafletMapBackgrounds,
         theme,
         getFormComponents,
         getValidatorPlugins,

src/context.ts

@@ -29,6 +29,17 @@ export interface DocumentTypeOption {
   omschrijving: 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[]>;
+  getLeafletMapBackgrounds: () => Promise<LeafletMapOption[]>;
 }
 
 const BuilderContext = React.createContext<BuilderContextType>({
@@ -65,6 +77,7 @@ const BuilderContext = React.createContext<BuilderContextType>({
   getDocumentTypes: async () => [],
   getConfidentialityLevels: async () => [],
   getAuthPlugins: async () => [],
+  getLeafletMapBackgrounds: async () => [],
 });
 
 BuilderContext.displayName = 'BuilderContext';

src/registry/map/edit.tsx

@@ -62,7 +62,8 @@ const EditForm: EditFormDefinition<MapComponentSchema> = () => {
             'isSensitiveData',
             'useConfigDefaultMapSettings',
             'defaultZoom',
-            'initialCenter'
+            'initialCenter',
+            'backgroundIdentifier'
           )}
         />
         <BuilderTabs.Advanced hasErrors={hasAnyError('conditional')} />
@@ -134,6 +135,7 @@ EditForm.defaultValues = {
     lat: undefined,
     lng: undefined,
   },
+  backgroundIdentifier: undefined,
   defaultValue: null,
   // Advanced tab
   conditional: {

src/registry/map/map-configuration.tsx

@@ -1,7 +1,10 @@
 import {TILE_LAYER_RD} from '@open-formulieren/leaflet-tools';
+import {useContext} from 'react';
 import {FormattedMessage, useIntl} from 'react-intl';
+import useAsync from 'react-use/esm/useAsync';
 
-import {NumberField, Panel} from '@/components/formio';
+import {NumberField, Panel, Select} from '@/components/formio';
+import {BuilderContext} from '@/context';
 
 const DefaultZoom: React.FC = () => {
   const intl = useIntl();
@@ -80,6 +83,39 @@ const Longitude: React.FC = () => {
   );
 };
 
+const Background: React.FC = () => {
+  const {getLeafletMapBackgrounds} = useContext(BuilderContext);
+  const {
+    value: options,
+    loading,
+    error,
+  } = useAsync(async () => await getLeafletMapBackgrounds(), []);
+  if (error) {
+    throw error;
+  }
+
+  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
+      isLoading={loading}
+      tooltip={tooltip}
+      options={options?.map(({identifier, label}) => ({label: label, value: identifier}))}
+    />
+  );
+};
+
 const MapConfiguration: React.FC = () => (
   <Panel
     title={
@@ -94,6 +130,7 @@ const MapConfiguration: React.FC = () => (
     <DefaultZoom />
     <Latitude />
     <Longitude />
+    <Background />
   </Panel>
 );
 

src/registry/map/preview.tsx

@@ -1,9 +1,11 @@
 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 useAsync from 'react-use/esm/useAsync';
 
 import {Component, Description} from '@/components/formio';
+import {BuilderContext} from '@/context';
 
 import {ComponentPreviewProps} from '../types';
 
@@ -37,10 +39,29 @@ const Preview: React.FC<ComponentPreviewProps<MapComponentSchema>> = ({component
     validate = {},
     defaultZoom,
     initialCenter = {},
+    backgroundIdentifier,
   } = component;
+  const {getLeafletMapBackgrounds} = useContext(BuilderContext);
+  const {
+    value: options,
+    loading,
+    error,
+  } = useAsync(async () => await getLeafletMapBackgrounds(), []);
+  if (error) {
+    throw error;
+  }
   const {required = false} = validate;
   const {lat = 52.1326332, lng = 5.291266} = initialCenter;
   const zoom = defaultZoom ?? 8;
+
+  const url = (): string => {
+    if (loading || !backgroundIdentifier) {
+      return TILE_LAYER_RD.url;
+    }
+    return (
+      options?.find(option => option.identifier === backgroundIdentifier)?.url ?? TILE_LAYER_RD.url
+    );
+  };
   return (
     <Component
       type={component.type}
@@ -61,7 +82,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} />}