Add background image configuration to map component

.storybook/decorators.tsx

@@ -10,6 +10,7 @@ import {
   DEFAULT_COMPONENT_TREE,
   DEFAULT_DOCUMENT_TYPES,
   DEFAULT_FILE_TYPES,
+  DEFAULT_MAP_TILE_LAYERS,
   DEFAULT_PREFILL_ATTRIBUTES,
   DEFAULT_PREFILL_PLUGINS,
   DEFAULT_REGISTRATION_ATTRIBUTES,
@@ -74,6 +75,7 @@ export const BuilderContextDecorator: Decorator = (Story, context) => {
         uniquifyKey: key => key,
         supportedLanguageCodes: supportedLanguageCodes,
         richTextColors: DEFAULT_COLORS,
+        getMapTileLayers: async () => DEFAULT_MAP_TILE_LAYERS,
         theme,
         getFormComponents: () => context?.args?.componentTree || defaultComponentTree,
         getValidatorPlugins: async () => {

package.json

@@ -66,7 +66,7 @@
     "@formatjs/cli": "^6.1.1",
     "@formatjs/ts-transformer": "^3.12.0",
     "@fortawesome/fontawesome-free": "^6.4.0",
-    "@open-formulieren/types": "^0.35.0",
+    "@open-formulieren/types": "^0.37.0",
     "@storybook/addon-actions": "^8.3.5",
     "@storybook/addon-essentials": "^8.3.5",
     "@storybook/addon-interactions": "^8.3.5",

src/components/ComponentConfiguration.stories.tsx

@@ -13,6 +13,7 @@ import {
   DEFAULT_COLORS,
   DEFAULT_DOCUMENT_TYPES,
   DEFAULT_FILE_TYPES,
+  DEFAULT_MAP_TILE_LAYERS,
 } from '@/tests/sharedUtils';
 import {AnyComponentSchema} from '@/types';
 
@@ -109,6 +110,7 @@ const Template: StoryFn<TemplateArgs> = ({
     getPrefillPlugins={async () => prefillPlugins}
     getPrefillAttributes={async (plugin: string) => prefillAttributes[plugin]}
     getFileTypes={async () => fileTypes}
+    getMapTileLayers={async () => DEFAULT_MAP_TILE_LAYERS}
     serverUploadLimit="50MB"
     getDocumentTypes={async () => DEFAULT_DOCUMENT_TYPES}
     getConfidentialityLevels={async () => CONFIDENTIALITY_LEVELS}

src/components/ComponentConfiguration.tsx

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

src/components/builder/loader.stories.tsx

@@ -0,0 +1,15 @@
+import {Meta, StoryObj} from '@storybook/react';
+
+import Loader from '@/components/builder/loader';
+
+type Story = StoryObj<typeof Loader>;
+
+export default {
+  title: 'Formio/Builder/Loader',
+  component: Loader,
+  parameters: {
+    modal: {noModal: true},
+  },
+} satisfies Meta<typeof Loader>;
+
+export const Default: Story = {};

src/components/builder/loader.tsx

@@ -0,0 +1,13 @@
+import {FormattedMessage} from 'react-intl';
+
+const Loader: React.FC = () => {
+  return (
+    <div className="spinner-border text-primary" role="status">
+      <span className="sr-only">
+        <FormattedMessage description="Loading content text" defaultMessage="Loading..." />
+      </span>
+    </div>
+  );
+};
+
+export default Loader;

src/context.ts

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

src/registry/map/edit.tsx

@@ -1,7 +1,8 @@
 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 useAsync from 'react-use/esm/useAsync';
 
 import {
   BuilderTabs,
@@ -20,7 +21,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 +64,8 @@ const EditForm: EditFormDefinition<MapComponentSchema> = () => {
             'isSensitiveData',
             'useConfigDefaultMapSettings',
             'defaultZoom',
-            'initialCenter'
+            'initialCenter',
+            'tileLayerIdentifier'
           )}
         />
         <BuilderTabs.Advanced hasErrors={hasAnyError('conditional')} />
@@ -83,6 +86,7 @@ const EditForm: EditFormDefinition<MapComponentSchema> = () => {
         <IsSensitiveData />
         <UseConfigDefaultMapSettings />
         {!values.useConfigDefaultMapSettings && <MapConfiguration />}
+        <TileLayer />
       </TabPanel>
 
       {/* Advanced tab */}
@@ -134,6 +138,7 @@ EditForm.defaultValues = {
     lat: undefined,
     lng: undefined,
   },
+  tileLayerIdentifier: undefined,
   defaultValue: null,
   // Advanced tab
   conditional: {
@@ -174,4 +179,38 @@ const UseConfigDefaultMapSettings: React.FC<{}> = () => {
   );
 };
 
+const TileLayer: React.FC = () => {
+  const {getMapTileLayers} = useContext(BuilderContext);
+  const intl = useIntl();
+  const {value: options, loading, error} = useAsync(async () => await getMapTileLayers(), []);
+  if (error) {
+    throw error;
+  }
+
+  const tooltip = intl.formatMessage({
+    description: "Tooltip for 'tileLayerIdentifier' builder field",
+    defaultMessage:
+      'The tile layer is responsible for showing the map background. ' +
+      'This effects the map style at particular coordinates and zoom levels.',
+  });
+  return (
+    <Select
+      name="tileLayerIdentifier"
+      label={
+        <FormattedMessage
+          description="Label for 'tileLayerIdentifier' builder field"
+          defaultMessage="Tile layer"
+        />
+      }
+      isClearable
+      tooltip={tooltip}
+      isLoading={loading}
+      options={options?.map(tileLayer => ({
+        label: tileLayer.label,
+        value: tileLayer.identifier,
+      }))}
+    />
+  );
+};
+
 export default EditForm;

src/registry/map/preview.tsx

@@ -1,9 +1,12 @@
 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 Loader from '@/components/builder/loader';
 import {Component, Description} from '@/components/formio';
+import {BuilderContext} from '@/context';
 
 import {ComponentPreviewProps} from '../types';
 
@@ -37,10 +40,29 @@ const Preview: React.FC<ComponentPreviewProps<MapComponentSchema>> = ({component
     validate = {},
     defaultZoom,
     initialCenter = {},
+    tileLayerIdentifier,
   } = component;
+  const {getMapTileLayers} = useContext(BuilderContext);
+  const {value: tileLayers, loading, error} = useAsync(async () => await getMapTileLayers(), []);
+  if (error) {
+    throw error;
+  }
+  if (loading) {
+    return <Loader />;
+  }
+
   const {required = false} = validate;
   const {lat = 52.1326332, lng = 5.291266} = initialCenter;
   const zoom = defaultZoom ?? 8;
+
+  const tileLayerUrl = (): string => {
+    // Try to find the url of the chosen tile layer. If it is found, return the url,
+    // else return the default tile layer url.
+    return (
+      tileLayers?.find(tileLayer => tileLayer.identifier === tileLayerIdentifier)?.url ??
+      TILE_LAYER_RD.url
+    );
+  };
   return (
     <Component
       type={component.type}
@@ -61,7 +83,7 @@ const Preview: React.FC<ComponentPreviewProps<MapComponentSchema>> = ({component
           minBlockSize: '400px',
         }}
       >
-        <TileLayer {...TILE_LAYER_RD} />
+        <TileLayer {...TILE_LAYER_RD} url={tileLayerUrl()} />
         <MapView lat={lat} lng={lng} zoom={zoom} />
       </MapContainer>
       {description && <Description text={description} />}

src/tests/sharedUtils.tsx

@@ -1,5 +1,5 @@
 // This module contains shared utilities and constants between Jest and Storybook.
-import type {DocumentTypeOption, SelectOption} from '@/context';
+import type {DocumentTypeOption, MapTileLayer, SelectOption} from '@/context';
 import {ColorOption} from '@/registry/content/rich-text';
 import {AnyComponentSchema} from '@/types';
 
@@ -235,6 +235,19 @@ export const DEFAULT_COLORS: ColorOption[] = [
   },
 ];
 
+export const DEFAULT_MAP_TILE_LAYERS: MapTileLayer[] = [
+  {
+    identifier: 'brt',
+    url: 'https://service.pdok.nl/brt/achtergrondkaart/wmts/v2_0/standaard/EPSG:28992/{z}/{x}/{y}.png',
+    label: 'BRT',
+  },
+  {
+    identifier: 'luchtfoto',
+    url: 'https://service.pdok.nl/hwh/luchtfotorgb/wmts/v1_0/Actueel_orthoHR/EPSG:28992/{z}/{x}/{y}.png',
+    label: 'Luchtfoto',
+  },
+];
+
 export function sleep(ms: number) {
   return new Promise(resolve => setTimeout(resolve, ms));
 }