Add styling and hidden geometry props

src/layout/Map/config.ts

@@ -48,6 +48,22 @@ export const Config = new CG.component({
             'Should point to a boolean indicating if this geometry is editable. This has no default value, geometries will not be editable if this is not specified.',
           ),
       ),
+      new CG.prop(
+        'geometryIsHidden',
+        new CG.dataModelBinding()
+          .optional()
+          .setDescription(
+            'Should point to a boolean indicating if this geometry is hidden. Geometries will be visible by default if this is not specified.',
+          ),
+      ),
+      new CG.prop(
+        'geometryStyle',
+        new CG.dataModelBinding()
+          .optional()
+          .setDescription(
+            'Should point to a string indicating the style of this geometry. Overrides the default style of the geometry.',
+          ),
+      ),
     ).exportAs('IDataModelBindingsForMap'),
   )
   .addProperty(

src/layout/Map/features/geometries/fixed/MapGeometries.tsx

@@ -35,16 +35,19 @@ export function MapGeometries({ baseComponentId, readOnly }: MapGeometriesProps)
     geometries = geometries?.filter((g) => !g.isEditable);
   }
 
+  geometries = geometries?.filter((g) => !g.isHidden);
+
   return (
     <>
-      {geometries.map(({ altinnRowId, data, label }) => (
+      {geometries.map(({ altinnRowId, data, label, style }) => (
         <GeoJSON
           key={altinnRowId}
           data={data}
           interactive={false}
           pointToLayer={(_, position) =>
             marker(position, { icon: markerIcon, interactive: false, draggable: false, keyboard: false })
           }
+          style={style ? JSON.parse(style) : undefined}
         >
           {label && (
             <Tooltip

src/layout/Map/features/geometries/fixed/hooks.ts

@@ -25,6 +25,9 @@ export function useMapRawGeometries(baseComponentId: string): RawGeometry[] | un
     const dataPath = toRelativePath(dataModelBindings?.geometries, dataModelBindings?.geometryData) ?? 'data';
     const isEditablePath =
       toRelativePath(dataModelBindings?.geometries, dataModelBindings?.geometryIsEditable) ?? 'isEditable';
+    const isHiddenPath =
+      toRelativePath(dataModelBindings?.geometries, dataModelBindings?.geometryIsHidden) ?? 'isHidden';
+    const stylePath = toRelativePath(dataModelBindings?.geometries, dataModelBindings?.geometryStyle) ?? 'style';
 
     return formData.map((item: unknown): RawGeometry => {
       if (!item || typeof item !== 'object' || !item[ALTINN_ROW_ID]) {
@@ -38,13 +41,17 @@ export function useMapRawGeometries(baseComponentId: string): RawGeometry[] | un
         data: dot.pick(dataPath, item),
         label: dot.pick(labelPath, item),
         isEditable: dot.pick(isEditablePath, item),
+        isHidden: dot.pick(isHiddenPath, item),
+        style: dot.pick(stylePath, item),
       };
     });
   }, [
     dataModelBindings?.geometries,
     dataModelBindings?.geometryData,
     dataModelBindings?.geometryLabel,
     dataModelBindings?.geometryIsEditable,
+    dataModelBindings?.geometryIsHidden,
+    dataModelBindings?.geometryStyle,
     formData,
   ]);
 }
@@ -75,13 +82,13 @@ function parseGeometries(geometries: RawGeometry[] | undefined, geometryType?: I
   }
 
   const out: Geometry[] = [];
-  for (const { altinnRowId, data: rawData, label, isEditable } of geometries) {
+  for (const { altinnRowId, data: rawData, label, isEditable, isHidden, style } of geometries) {
     if (geometryType === 'WKT') {
       const data = wktToGeoJSON(rawData);
-      out.push({ altinnRowId, data, label, isEditable });
+      out.push({ altinnRowId, data, label, isEditable, isHidden, style });
     } else {
       const data = JSON.parse(rawData) as GeoJSON;
-      out.push({ altinnRowId, data, label, isEditable });
+      out.push({ altinnRowId, data, label, isEditable, isHidden, style });
     }
   }
 

src/layout/Map/types.ts

@@ -5,13 +5,17 @@ export type RawGeometry = {
   data: string;
   label?: string;
   isEditable?: boolean;
+  isHidden?: boolean;
+  style?: string;
 };
 
 export type Geometry = {
   altinnRowId: string;
   data: GeoJSON;
   label?: string;
   isEditable?: boolean;
+  isHidden?: boolean;
+  style?: string;
 };
 
 export type Location = {