Add expression to latitude and longitude in centerLocation for Map

src/layout/Map/Map.tsx

@@ -14,6 +14,7 @@ import { MapSingleMarker } from 'src/layout/Map/features/singleMarker/MapSingleM
 import classes from 'src/layout/Map/MapComponent.module.css';
 import { DefaultBoundsPadding, DefaultFlyToZoomLevel, getMapStartingView, isLocationValid } from 'src/layout/Map/utils';
 import { useExternalItem } from 'src/utils/layout/hooks';
+import { useItemWhenType } from 'src/utils/layout/useNodeItem';
 
 type MapProps = {
   baseComponentId: string;
@@ -64,7 +65,8 @@ export function Map({ baseComponentId, className, readOnly, animate = true }: Ma
 
 function useAutoViewport(baseComponentId: string, map: RefObject<LeafletMap | null>, animate: boolean) {
   const markerLocation = useSingleMarker(baseComponentId);
-  const { centerLocation: customCenterLocation, zoom: customZoom } = useExternalItem(baseComponentId, 'Map');
+  const { centerLocation: customCenterLocation } = useItemWhenType(baseComponentId, 'Map');
+  const { zoom: customZoom } = useExternalItem(baseComponentId, 'Map');
   const geometryBounds = useMapGeometryBounds(baseComponentId);
   const { center, zoom, bounds } = getMapStartingView(markerLocation, customCenterLocation, customZoom, geometryBounds);
 

src/layout/Map/config.ts

@@ -1,4 +1,5 @@
 import { CG } from 'src/codegen/CG';
+import { ExprVal } from 'src/features/expressions/types';
 import { CompCategory } from 'src/layout/common';
 
 export const Config = new CG.component({
@@ -13,7 +14,7 @@ export const Config = new CG.component({
     renderInTabs: true,
   },
   functionality: {
-    customExpressions: false,
+    customExpressions: true,
   },
 })
   .addDataModelBinding(
@@ -150,7 +151,10 @@ export const Config = new CG.component({
   .addProperty(
     new CG.prop(
       'centerLocation',
-      new CG.obj(new CG.prop('latitude', new CG.num()), new CG.prop('longitude', new CG.num()))
+      new CG.obj(
+        new CG.prop('latitude', new CG.expr(ExprVal.Number)),
+        new CG.prop('longitude', new CG.expr(ExprVal.Number)),
+      )
         .optional()
         .exportAs('Location')
         .setTitle('Center location')

src/layout/Map/features/singleMarker/MapSingleMarker.tsx

@@ -10,7 +10,7 @@ import { FD } from 'src/features/formData/FormDataWrite';
 import { useSingleMarker } from 'src/layout/Map/features/singleMarker/hooks';
 import { isLocationValid, locationToTuple } from 'src/layout/Map/utils';
 import { useDataModelBindingsFor } from 'src/utils/layout/hooks';
-import type { Location } from 'src/layout/Map/config.generated';
+import type { Location } from 'src/layout/Map/types';
 
 const markerIcon = icon({
   iconUrl: Icon,

src/layout/Map/index.tsx

@@ -13,7 +13,7 @@ import { validateDataModelBindingsAny } from 'src/utils/layout/generator/validat
 import { useNodeFormDataWhenType } from 'src/utils/layout/useNodeItem';
 import type { PropsFromGenericComponent } from 'src/layout';
 import type { IDataModelBindings } from 'src/layout/layout';
-import type { SummaryRendererProps } from 'src/layout/LayoutComponent';
+import type { ExprResolver, SummaryRendererProps } from 'src/layout/LayoutComponent';
 import type { Summary2Props } from 'src/layout/Summary2/SummaryComponent2/types';
 
 export class Map extends MapDef {
@@ -58,4 +58,14 @@ export class Map extends MapDef {
 
     return errors;
   }
+
+  evalExpressions(props: ExprResolver<'Map'>) {
+    return {
+      ...this.evalDefaultExpressions(props),
+      centerLocation: {
+        latitude: props.evalNum(props.item.centerLocation?.latitude, 0),
+        longitude: props.evalNum(props.item.centerLocation?.longitude, 0),
+      },
+    };
+  }
 }

src/layout/Map/types.ts

@@ -11,3 +11,8 @@ export type Geometry = {
   data: GeoJSON;
   label?: string;
 };
+
+export type Location = {
+  latitude: number;
+  longitude: number;
+};

src/layout/Map/utils.ts

@@ -1,8 +1,8 @@
 import type { LatLngBounds, LatLngExpression, PointExpression } from 'leaflet';
 
-import type { Location, MapLayer } from 'src/layout/Map/config.generated';
+import type { MapLayer } from 'src/layout/Map/config.generated';
+import type { Location } from 'src/layout/Map/types';
 
-// Default is center of Norway
 export const DefaultCenterLocation: Location = {
   latitude: 64.888996,
   longitude: 12.8186054,