From c346f38105ef01361095a09ca179965990de0117 Mon Sep 17 00:00:00 2001
From: robinvandermolen <robin@maykinmedia.nl>
Date: Mon, 25 Nov 2024 14:23:26 +0100
Subject: [PATCH] :sparkles: [#2173] Show map background in form design view

---
 src/openforms/js/components/form/map.js | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/openforms/js/components/form/map.js b/src/openforms/js/components/form/map.js
index af1ffbd2fa..15d7a87ebf 100644
--- a/src/openforms/js/components/form/map.js
+++ b/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;
@@ -71,7 +73,28 @@ 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 backgroundUrl =
+      this.getBackgroundUrl(this.originalComponent?.backgroundIdentifier) ?? tileUrl;
+    const tiles = L.tileLayer(backgroundUrl, options);
     map.addLayer(tiles);
   }
+
+  // Try to get the background url for the component.
+  // If it cannot be found, return null.
+  getBackgroundUrl(backgroundIdentifier) {
+    const LEAFLET_MAP_BACKGROUNDS = jsonScriptToVar('config-LEAFLET_MAP_BACKGROUNDS', {
+      default: [],
+    });
+    if (
+      !Array.isArray(LEAFLET_MAP_BACKGROUNDS) ||
+      LEAFLET_MAP_BACKGROUNDS.length === 0 ||
+      !backgroundIdentifier
+    ) {
+      return null;
+    }
+
+    return LEAFLET_MAP_BACKGROUNDS.find(
+      background => background?.identifier === backgroundIdentifier
+    )?.url;
+  }
 }