✨ [#2173] Show map background in form design view

src/openforms/js/components/form/map.js

@@ -5,6 +5,8 @@ import {CRS_RD, TILE_LAYER_RD} from '@open-formulieren/leaflet-tools';
 import * as L from 'leaflet';
 import {Formio} from 'react-formio';
 
+import jsonScriptToVar from 'utils/json-script';
+
 import {localiseSchema} from './i18n';
 
 const TextFieldComponent = Formio.Components.components.textfield;
@@ -70,8 +72,24 @@ export default class Map extends TextFieldComponent {
 
     const map = L.map(`map-${this.id}`, MAP_DEFAULTS);
 
-    const {url: tileUrl, ...options} = TILE_LAYER_RD;
-    const tiles = L.tileLayer(tileUrl, options);
+    const tiles = L.tileLayer(this.getMapBackgroundUrl(this.originalComponent), TILE_LAYER_RD);
     map.addLayer(tiles);
   }
+
+  // Try to get the map background url for the component.
+  // If it cannot be found, fall back to the TILE_LAYER_RD url.
+  getMapBackgroundUrl(originalComponent) {
+    const backgroundIdentifier = originalComponent?.backgroundIdentifier;
+    const LEAFLET_MAP_BACKGROUNDS = jsonScriptToVar('config-LEAFLET_MAP_BACKGROUNDS', {
+      default: [],
+    });
+    if (LEAFLET_MAP_BACKGROUNDS === [] || !backgroundIdentifier) {
+      return TILE_LAYER_RD.url;
+    }
+
+    const leafletBackground = LEAFLET_MAP_BACKGROUNDS.find(
+      background => background.identifier === backgroundIdentifier
+    );
+    return leafletBackground?.url || TILE_LAYER_RD.url;
+  }
 }