From 51db3c4f6ec26eb00e4d943af132b93b78a9cf9f Mon Sep 17 00:00:00 2001
From: robinvandermolen <robin@maykinmedia.nl>
Date: Mon, 25 Nov 2024 14:14:46 +0100
Subject: [PATCH 1/4] :sparkles: [open-formulieren/open-forms#2173] Using the
 component defined tile layer url

Allowing the component to determine the background used for the map
---
 src/components/Map/index.jsx  | 4 +++-
 src/formio/components/Map.jsx | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/Map/index.jsx b/src/components/Map/index.jsx
index a4beeb141..32dbf1bdc 100644
--- a/src/components/Map/index.jsx
+++ b/src/components/Map/index.jsx
@@ -66,6 +66,7 @@ const LeaftletMap = ({
   defaultCenter = DEFAULT_LAT_LNG,
   defaultZoomLevel = DEFAULT_ZOOM,
   disabled = false,
+  tileLayerUrl = TILE_LAYER_RD.url,
 }) => {
   const intl = useIntl();
   const defaultCoordinates = useDefaultCoordinates();
@@ -99,7 +100,7 @@ const LeaftletMap = ({
           duration: 3000,
         }}
       >
-        <TileLayer {...TILE_LAYER_RD} />
+        <TileLayer {...TILE_LAYER_RD} url={tileLayerUrl} />
         {coordinates ? (
           <>
             <MapView coordinates={coordinates} />
@@ -133,6 +134,7 @@ LeaftletMap.propTypes = {
   markerCoordinates: PropTypes.arrayOf(PropTypes.number),
   onMarkerSet: PropTypes.func,
   disabled: PropTypes.bool,
+  tileLayerUrl: PropTypes.string,
 };
 
 // Set the map view if coordinates are provided
diff --git a/src/formio/components/Map.jsx b/src/formio/components/Map.jsx
index f527ac270..dc81cac93 100644
--- a/src/formio/components/Map.jsx
+++ b/src/formio/components/Map.jsx
@@ -115,6 +115,7 @@ export default class Map extends Field {
             onMarkerSet={this.onMarkerSet.bind(this)}
             defaultCenter={defaultCenter}
             defaultZoomLevel={zoom || DEFAULT_ZOOM}
+            tileLayerUrl={this.component.tileLayerUrl}
           />
         </ConfigContext.Provider>
       </IntlProvider>

From 11be47af630cd2502a1ee6c8ca697a8705af0d86 Mon Sep 17 00:00:00 2001
From: robinvandermolen <robin@maykinmedia.nl>
Date: Tue, 3 Dec 2024 14:30:55 +0100
Subject: [PATCH 2/4] :white_check_mark: [open-formulieren/open-forms#2173]
 Added storybook entry for map with custom background

---
 src/components/Map/Map.stories.jsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/Map/Map.stories.jsx b/src/components/Map/Map.stories.jsx
index 3d9c8f100..76b75272d 100644
--- a/src/components/Map/Map.stories.jsx
+++ b/src/components/Map/Map.stories.jsx
@@ -52,3 +52,10 @@ export const MapReverseGeoEmpty = {
     },
   },
 };
+
+export const MapWithAerialPhotoBackground = {
+  args: {
+    tileLayerUrl:
+      'https://service.pdok.nl/hwh/luchtfotorgb/wmts/v1_0/Actueel_orthoHR/EPSG:28992/{z}/{x}/{y}.png',
+  },
+};

From 83cb8b08bef051f9e8e062178c1869f995c92418 Mon Sep 17 00:00:00 2001
From: robinvandermolen <robin@maykinmedia.nl>
Date: Mon, 9 Dec 2024 16:41:17 +0100
Subject: [PATCH 3/4] :sparkles: [open-formulieren/open-forms#2173] Using
 component tile layer url in summary

---
 src/components/FormStepSummary/ComponentValueDisplay.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/FormStepSummary/ComponentValueDisplay.jsx b/src/components/FormStepSummary/ComponentValueDisplay.jsx
index f6bfc251a..3a7af0997 100644
--- a/src/components/FormStepSummary/ComponentValueDisplay.jsx
+++ b/src/components/FormStepSummary/ComponentValueDisplay.jsx
@@ -189,7 +189,7 @@ const MapDisplay = ({component, value}) => {
     return <EmptyDisplay />;
   }
 
-  return <Map markerCoordinates={value} disabled />;
+  return <Map markerCoordinates={value} disabled tileLayerUrl={component.tileLayerUrl} />;
 };
 
 const CoSignDisplay = ({component, value}) => {

From d15d15f296499c70a1e5fd914cf4ce3858801357 Mon Sep 17 00:00:00 2001
From: robinvandermolen <robin@maykinmedia.nl>
Date: Tue, 10 Dec 2024 08:35:10 +0100
Subject: [PATCH 4/4] :white_check_mark: [open-formulieren/open-forms#2173]
 Added map component to summary storybook entry

---
 src/components/Summary/Summary.stories.jsx | 34 ++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/src/components/Summary/Summary.stories.jsx b/src/components/Summary/Summary.stories.jsx
index 9e23cae68..7986bf9a5 100644
--- a/src/components/Summary/Summary.stories.jsx
+++ b/src/components/Summary/Summary.stories.jsx
@@ -496,3 +496,37 @@ export const AddressNLSummaryEmpty = {
     await expect(canvas.getByRole('definition')).toHaveTextContent('');
   },
 };
+
+export const MapSummary = {
+  render,
+  args: {
+    summaryData: [
+      {
+        slug: 'maps',
+        name: 'Maps',
+        data: [
+          {
+            name: 'Map with default tile layer',
+            value: [52.1326332, 5.291266],
+            component: {
+              key: 'map',
+              type: 'map',
+              label: 'Map with default tile layer',
+            },
+          },
+          {
+            name: 'Map with custom tile layer',
+            value: [52.1326332, 5.291266],
+            component: {
+              key: 'map',
+              type: 'map',
+              label: 'Map with custom tile layer',
+              tileLayerUrl:
+                'https://service.pdok.nl/hwh/luchtfotorgb/wmts/v1_0/Actueel_orthoHR/EPSG:28992/{z}/{x}/{y}.png',
+            },
+          },
+        ],
+      },
+    ],
+  },
+};