make changing geometries work nicely

Altinn · Aug 13, 2024 · d1a2faa · d1a2faa
1 parent fb0f97f
commit d1a2faa
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 3 deletions.
diff --git a/src/layout/Map/Map.tsx b/src/layout/Map/Map.tsx
@@ -10,6 +10,7 @@ import IconShadow from 'leaflet/dist/images/marker-shadow.png';
 import classes from 'src/layout/Map/MapComponent.module.css';
 import {
   calculateBounds,
+  DefaultBoundsPadding,
   DefaultFlyToZoomLevel,
   DefaultMapLayers,
   getMapStartingView,
@@ -85,13 +86,19 @@ export function Map({
     }
   }, [isSummary, markerLocationIsValid, map, markerLocation]);
 
+  useEffect(() => {
+    if (bounds && map) {
+      map.fitBounds(bounds, { padding: DefaultBoundsPadding, animate: !isSummary });
+    }
+  }, [bounds, isSummary, map]);
+
   return (
     <MapContainer
       className={cn(classes.map, { [classes.mapReadOnly]: !isInteractive }, className)}
       center={center}
       zoom={zoom}
       bounds={bounds}
-      boundsOptions={{ padding: [50, 50] }}
+      boundsOptions={{ padding: DefaultBoundsPadding }}
       minZoom={3}
       maxBounds={[
         [-90, -200],

diff --git a/src/layout/Map/utils.ts b/src/layout/Map/utils.ts
@@ -1,7 +1,7 @@
 import { type GeoJSON } from 'geojson';
 import { geoJson, LatLngBounds } from 'leaflet';
 import WKT from 'terraformer-wkt-parser';
-import type { LatLngExpression } from 'leaflet';
+import type { LatLngExpression, PointExpression } from 'leaflet';
 
 import type { IGeometryType, Location, MapLayer } from 'src/layout/Map/config.generated';
 import type { Geometry, RawGeometry } from 'src/layout/Map/types';
@@ -14,7 +14,6 @@ export const DefaultCenterLocation: Location = {
 export const DefaultZoom = 4;
 // Default zoom level that should be used when when flying to new markerLocation
 export const DefaultFlyToZoomLevel = 16;
-// Default map layers from Kartverket
 export const DefaultMapLayers: MapLayer[] = [
   {
     url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
@@ -25,6 +24,7 @@ export const DefaultMapLayers: MapLayer[] = [
     attribution: '&copy; <a href="http://www.kartverket.no/">Kartverket</a>',
   },
 ];
+export const DefaultBoundsPadding: PointExpression = [50, 50];
 
 export function parseLocation(locationString: string | undefined): Location | undefined {
   if (!locationString) {

diff --git a/test/e2e/integration/frontend-test/all-process-steps.ts b/test/e2e/integration/frontend-test/all-process-steps.ts
@@ -329,6 +329,7 @@ const knownDataModels: { [key: string]: any } = {
         { data: 'POLYGON ((16.091294225332 67.1416937521884,16.1095151961509 67.1415683466908,16.109477740932 67.1407522039498,16.0912573849201 67.1408776044743,16.091294225332 67.1416937521884))', label: 'Hankabakken 4' },
         { data: 'POLYGON ((16.0957778974798 67.1408466860878,16.118841539588 67.1406869499763,16.1186340551949 67.1362026617326,16.0955746880334 67.1363623630455,16.0957778974798 67.1408466860878))', label: 'Hankabakken 5' },
       ],
+      Selected: '1,2,3,4,5',
     },
     TestCustomButtonInput: null,
     TestCustomButtonReadOnlyInput: null,

diff --git a/test/e2e/integration/frontend-test/components.ts b/test/e2e/integration/frontend-test/components.ts
@@ -814,6 +814,29 @@ describe('UI Components', () => {
     cy.get(component('mapSummary')).findByRole('tooltip', { name: /hankabakken 5/i }).should('be.visible');
     }
 
+    cy.findByRole('checkbox', { name: /hankabakken 2/i }).dsUncheck();
+    cy.findByRole('checkbox', { name: /hankabakken 4/i }).dsUncheck();
+
+    // prettier-ignore
+    {
+    cy.get(component('map')).findByRole('tooltip', { name: /hankabakken 1/i }).should('be.visible');
+    cy.get(component('map')).findByRole('tooltip', { name: /hankabakken 2/i }).should('not.exist');
+    cy.get(component('map')).findByRole('tooltip', { name: /hankabakken 3/i }).should('be.visible');
+    cy.get(component('map')).findByRole('tooltip', { name: /hankabakken 4/i }).should('not.exist');
+    cy.get(component('map')).findByRole('tooltip', { name: /hankabakken 5/i }).should('be.visible');
+    }
+
+    cy.get(component('mapSummary')).should('not.contain.text', 'Du har ikke lagt inn informasjon her');
+
+    // prettier-ignore
+    {
+    cy.get(component('mapSummary')).findByRole('tooltip', { name: /hankabakken 1/i }).should('be.visible');
+    cy.get(component('mapSummary')).findByRole('tooltip', { name: /hankabakken 2/i }).should('not.exist');
+    cy.get(component('mapSummary')).findByRole('tooltip', { name: /hankabakken 3/i }).should('be.visible');
+    cy.get(component('mapSummary')).findByRole('tooltip', { name: /hankabakken 4/i }).should('not.exist');
+    cy.get(component('mapSummary')).findByRole('tooltip', { name: /hankabakken 5/i }).should('be.visible');
+    }
+
     cy.snapshot('components:map-geometries');
   });
 });