diff --git a/src/layout/Map/Map.tsx b/src/layout/Map/Map.tsx index 7b8d3ccb09..dd78bc72e1 100644 --- a/src/layout/Map/Map.tsx +++ b/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, 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); diff --git a/src/layout/Map/config.ts b/src/layout/Map/config.ts index 4637e7c411..b94bb009e1 100644 --- a/src/layout/Map/config.ts +++ b/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') diff --git a/src/layout/Map/features/singleMarker/MapSingleMarker.tsx b/src/layout/Map/features/singleMarker/MapSingleMarker.tsx index 7a6df1d215..b7e1c7f007 100644 --- a/src/layout/Map/features/singleMarker/MapSingleMarker.tsx +++ b/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, diff --git a/src/layout/Map/index.tsx b/src/layout/Map/index.tsx index ff8b6339db..174575656e 100644 --- a/src/layout/Map/index.tsx +++ b/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), + }, + }; + } } diff --git a/src/layout/Map/types.ts b/src/layout/Map/types.ts index 8c1febe078..227dc2d1f8 100644 --- a/src/layout/Map/types.ts +++ b/src/layout/Map/types.ts @@ -11,3 +11,8 @@ export type Geometry = { data: GeoJSON; label?: string; }; + +export type Location = { + latitude: number; + longitude: number; +}; diff --git a/src/layout/Map/utils.ts b/src/layout/Map/utils.ts index 5073a649f2..c031802a97 100644 --- a/src/layout/Map/utils.ts +++ b/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,