Merge pull request #747 from open-formulieren/feature/2173-custom-map…

…-background Custom map backgrounds
open-formulieren · Dec 12, 2024 · 0a335fa · 0a335fa
2 parents 81cacca + d15d15f
commit 0a335fa
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 2 deletions.
diff --git 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}) => {

diff --git 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',
+  },
+};
diff --git 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/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',
+            },
+          },
+        ],
+      },
+    ],
+  },
+};
diff --git 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>