Feat: Draw geometries on map

package.json

@@ -55,6 +55,7 @@
     "@types/js-levenshtein": "1.1.3",
     "@types/json-schema": "7.0.15",
     "@types/leaflet": "1",
+    "@types/leaflet-draw": "1.0.13",
     "@types/marked": "6.0.0",
     "@types/mime": "4.0.0",
     "@types/node": "24.10.13",
@@ -142,6 +143,7 @@
     "@digdir/designsystemet-theme": "1.11.0",
     "@navikt/aksel-icons": "8.5.2",
     "@tanstack/react-query": "5.90.21",
+    "@terraformer/wkt": "2.2.1",
     "@types/cypress": "^1.1.6",
     "ajv": "8.18.0",
     "ajv-errors": "3.0.0",
@@ -160,6 +162,7 @@
     "immer": "11.1.4",
     "jsonpointer": "5.0.1",
     "leaflet": "1.9.4",
+    "leaflet-draw": "1.0.4",
     "lru-cache": "11.2.6",
     "marked": "17.0.3",
     "marked-mangle": "1.1.12",
@@ -172,10 +175,10 @@
     "react-dom": "19.2.4",
     "react-dropzone": "14.4.1",
     "react-leaflet": "5.0.0",
+    "react-leaflet-draw": "0.21.0",
     "react-number-format": "5.4.4",
     "react-router-dom": "6.30.3",
     "react-toastify": "11.0.5",
-    "terraformer-wkt-parser": "1.2.1",
     "typescript": "5.9.3",
     "typescript-eslint": "8.56.0",
     "uuid": "13.0.0",

src/index.tsx

@@ -41,6 +41,7 @@ import { PartyPrefetcher } from 'src/queries/partyPrefetcher';
 import * as queries from 'src/queries/queries';
 
 import 'leaflet/dist/leaflet.css';
+import 'leaflet-draw/dist/leaflet.draw.css';
 import 'react-toastify/dist/ReactToastify.css';
 import 'src/index.css';
 

src/layout/Map/Map.tsx

@@ -6,6 +6,7 @@ import cn from 'classnames';
 import { type Map as LeafletMap } from 'leaflet';
 
 import { useIsPdf } from 'src/hooks/useIsPdf';
+import { MapEditGeometries } from 'src/layout/Map/features/geometries/editable/MapEditGeometries';
 import { useMapGeometryBounds } from 'src/layout/Map/features/geometries/fixed/hooks';
 import { MapGeometries } from 'src/layout/Map/features/geometries/fixed/MapGeometries';
 import { MapLayers } from 'src/layout/Map/features/layers/MapLayers';
@@ -27,6 +28,8 @@ export function Map({ baseComponentId, className, readOnly, animate = true }: Ma
   const map = useRef<LeafletMap | null>(null);
   const isPdf = useIsPdf();
   const { center, zoom, bounds } = useAutoViewport(baseComponentId, map, animate);
+  const { toolbar, dataModelBindings } = useItemWhenType(baseComponentId, 'Map');
+  const simpleBinding = dataModelBindings?.simpleBinding;
 
   return (
     <MapContainer
@@ -49,15 +52,18 @@ export function Map({ baseComponentId, className, readOnly, animate = true }: Ma
       scrollWheelZoom={!readOnly}
       attributionControl={false}
     >
+      {toolbar !== undefined && <MapEditGeometries baseComponentId={baseComponentId} />}
       <MapLayers baseComponentId={baseComponentId} />
       <MapGeometries
         baseComponentId={baseComponentId}
         readOnly={readOnly}
       />
-      <MapSingleMarker
-        baseComponentId={baseComponentId}
-        readOnly={readOnly}
-      />
+      {toolbar === undefined && simpleBinding && (
+        <MapSingleMarker
+          baseComponentId={baseComponentId}
+          readOnly={readOnly}
+        />
+      )}
       <AttributionControl prefix={false} />
     </MapContainer>
   );

src/layout/Map/config.ts

@@ -40,6 +40,14 @@ export const Config = new CG.component({
           .optional()
           .setDescription('Should point to a string (defaults to a "data" property on the geometries array objects)'),
       ),
+      new CG.prop(
+        'geometryIsEditable',
+        new CG.dataModelBinding()
+          .optional()
+          .setDescription(
+            '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.',
+          ),
+      ),
     ).exportAs('IDataModelBindingsForMap'),
   )
   .addProperty(
@@ -168,6 +176,47 @@ export const Config = new CG.component({
       new CG.enum('GeoJSON', 'WKT').optional({ default: 'GeoJSON' }).exportAs('IGeometryType'),
     ),
   )
+  .addProperty(
+    new CG.prop(
+      'toolbar',
+      new CG.obj(
+        new CG.prop(
+          'polyline',
+          new CG.expr(ExprVal.Boolean)
+            .optional({ default: false })
+            .setDescription('Expression or boolean allowing the user to draw lines on the map'),
+        ),
+        new CG.prop(
+          'polygon',
+          new CG.expr(ExprVal.Boolean)
+            .optional({ default: false })
+            .setDescription('Expression or boolean allowing the user to draw a polygon on the map'),
+        ),
+        new CG.prop(
+          'rectangle',
+          new CG.expr(ExprVal.Boolean)
+            .optional({ default: false })
+            .setDescription('Expression or boolean allowing the user to draw a rectangle on the map'),
+        ),
+        new CG.prop(
+          'circle',
+          new CG.expr(ExprVal.Boolean)
+            .optional({ default: false })
+            .setDescription('Expression or boolean allowing the user to draw a circle on the map'),
+        ),
+        new CG.prop(
+          'marker',
+          new CG.expr(ExprVal.Boolean)
+            .optional({ default: false })
+            .setDescription('Expression or boolean allowing the user to place multiple markers on the map'),
+        ),
+      )
+        .optional()
+        .exportAs('Toolbar')
+        .setTitle('Toolbar')
+        .setDescription('Sets which geometries the user is allowed to draw'),
+    ),
+  )
   .extends(CG.common('LabeledComponentProps'))
   .extendTextResources(CG.common('TRBLabel'))
   .addSummaryOverrides();

src/layout/Map/features/geometries/editable/MapEditGeometries.tsx

@@ -0,0 +1,200 @@
+import React, { useEffect, useRef } from 'react';
+import { FeatureGroup } from 'react-leaflet';
+import { EditControl } from 'react-leaflet-draw';
+
+import { geojsonToWKT } from '@terraformer/wkt';
+// Import GeoJSON type
+import L from 'leaflet';
+import { v4 as uuidv4 } from 'uuid';
+import type { Feature } from 'geojson';
+
+import { FD } from 'src/features/formData/FormDataWrite';
+import { ALTINN_ROW_ID } from 'src/features/formData/types';
+import { toRelativePath } from 'src/features/saveToGroup/useSaveToGroup';
+import { useLeafletDrawSpritesheetFix } from 'src/layout/Map/features/geometries/editable/useLeafletDrawSpritesheetFix';
+import { useMapParsedGeometries } from 'src/layout/Map/features/geometries/fixed/hooks';
+import { useDataModelBindingsFor } from 'src/utils/layout/hooks';
+import { useItemWhenType } from 'src/utils/layout/useNodeItem';
+
+interface FeatureWithId extends Feature {
+  properties: {
+    altinnRowId?: string;
+  };
+}
+interface MapEditGeometriesProps {
+  baseComponentId: string;
+}
+
+export function MapEditGeometries({ baseComponentId }: MapEditGeometriesProps) {
+  const { geometryType } = useItemWhenType(baseComponentId, 'Map');
+
+  const editRef = useRef<L.FeatureGroup>(null);
+
+  const geometryBinding = useDataModelBindingsFor(baseComponentId, 'Map')?.geometries;
+  const geometryDataBinding = useDataModelBindingsFor(baseComponentId, 'Map')?.geometryData;
+  const isEditableBinding = useDataModelBindingsFor(baseComponentId, 'Map')?.geometryIsEditable;
+  const geometryDataFieldName = geometryDataBinding?.field.split('.').pop();
+  const isEditableFieldName = isEditableBinding?.field.split('.').pop();
+  const initialGeometries = useMapParsedGeometries(baseComponentId)?.filter((g) => g.isEditable);
+
+  const geometryDataPath = toRelativePath(geometryBinding, geometryDataBinding);
+
+  const appendToList = FD.useAppendToList();
+  const setLeafValue = FD.useSetLeafValue();
+  const removeFromList = FD.useRemoveFromListCallback();
+
+  const { toolbar } = useItemWhenType(baseComponentId, 'Map');
+
+  useLeafletDrawSpritesheetFix();
+
+  // Load initial data into the FeatureGroup on component mount
+  useEffect(() => {
+    const featureGroup = editRef.current;
+    if (featureGroup && initialGeometries) {
+      // Clear existing layers to prevent duplication if initialData changes
+      featureGroup.clearLayers();
+
+      initialGeometries.forEach((item) => {
+        if (item.data && item.data.type === 'FeatureCollection') {
+          item.data.features.forEach((feature: Feature) => {
+            // Attach the unique ID to the feature's properties
+            const newFeature: FeatureWithId = {
+              ...feature,
+              properties: {
+                ...feature.properties,
+                altinnRowId: item.altinnRowId,
+              },
+            };
+
+            // Create a GeoJSON layer for the single feature and add it to the group
+            const leafletLayer = L.geoJSON(newFeature);
+            leafletLayer.eachLayer((layer) => {
+              featureGroup.addLayer(layer);
+            });
+          });
+        } else {
+          // Handle case where item.data is a single Feature / PolyLine / Polygon, etc.
+          const geoData = item.data;
+
+          const isFeature = 'type' in geoData && geoData.type === 'Feature';
+
+          const newFeature: FeatureWithId = isFeature
+            ? {
+                ...(geoData as Feature),
+                properties: {
+                  ...(geoData as Feature).properties,
+                  altinnRowId: item.altinnRowId,
+                },
+              }
+            : {
+                type: 'Feature',
+                geometry: geoData,
+                properties: {
+                  altinnRowId: item.altinnRowId,
+                },
+              };
+
+          const leafletLayer = L.geoJSON(newFeature);
+          leafletLayer.eachLayer((layer) => {
+            featureGroup.addLayer(layer);
+          });
+        }
+      });
+    }
+  }, [initialGeometries]);
+
+  const onCreatedHandler = (e: L.DrawEvents.Created) => {
+    if (!geometryBinding || !geometryDataFieldName || !isEditableFieldName) {
+      return;
+    }
+
+    const uuid = uuidv4();
+    const layer = e.layer;
+    const geo = layer.toGeoJSON();
+
+    // Ensure the Leaflet layer object itself knows its ID for future edits
+    if (!layer.feature) {
+      layer.feature = { type: 'Feature', geometry: geo.geometry, properties: {} };
+    }
+    layer.feature.properties = {
+      ...layer.feature.properties,
+      altinnRowId: uuid,
+    };
+
+    let geoString = JSON.stringify(geo);
+    if (geometryType === 'WKT') {
+      geoString = geojsonToWKT(geo.geometry);
+    }
+
+    appendToList({
+      reference: geometryBinding,
+      newValue: {
+        [ALTINN_ROW_ID]: uuid,
+        [geometryDataFieldName]: geoString,
+        [isEditableFieldName]: true,
+      },
+    });
+  };
+
+  const onEditedHandler = (e: L.DrawEvents.Edited) => {
+    if (!geometryBinding || !geometryDataBinding || !isEditableBinding) {
+      return;
+    }
+
+    e.layers.eachLayer((layer) => {
+      // @ts-expect-error - Leaflet's typings don't guarantee feature or properties exist, but we ensure they do in onCreatedHandler
+      const editedGeo = layer.toGeoJSON();
+      const altinnRowId = editedGeo.properties?.altinnRowId;
+
+      let geoString = JSON.stringify(editedGeo);
+
+      if (geometryType === 'WKT') {
+        geoString = geojsonToWKT(editedGeo.geometry);
+      }
+
+      initialGeometries?.forEach((g, index) => {
+        if (g.altinnRowId === altinnRowId) {
+          const field = `${geometryBinding.field}[${index}].${geometryDataPath}`;
+          setLeafValue({
+            reference: { dataType: geometryDataBinding?.dataType, field },
+            newValue: geoString,
+          });
+        }
+      });
+    });
+  };
+
+  const onDeletedHandler = (e: L.DrawEvents.Deleted) => {
+    if (!geometryBinding) {
+      return;
+    }
+
+    e.layers.eachLayer((layer) => {
+      // @ts-expect-error - Leaflet's typings don't guarantee feature or properties exist, but we ensure they do in onCreatedHandler
+      const deletedGeo = layer.toGeoJSON();
+      removeFromList({
+        reference: geometryBinding,
+        callback: (item) => item[ALTINN_ROW_ID] === deletedGeo.properties?.altinnRowId,
+      });
+    });
+  };
+
+  return (
+    <FeatureGroup ref={editRef}>
+      <EditControl
+        position='topright'
+        onCreated={onCreatedHandler}
+        onEdited={onEditedHandler}
+        onDeleted={onDeletedHandler}
+        draw={{
+          polyline: !!toolbar?.polyline,
+          polygon: !!toolbar?.polygon,
+          rectangle: !!toolbar?.rectangle,
+          circle: !!toolbar?.circle,
+          marker: !!toolbar?.marker,
+          circlemarker: false,
+        }}
+      />
+    </FeatureGroup>
+  );
+}

src/layout/Map/features/geometries/editable/useLeafletDrawSpritesheetFix.ts

@@ -0,0 +1,32 @@
+import { useEffect } from 'react';
+
+import DrawSpriteSheetPng from 'leaflet-draw/dist/images/spritesheet.png';
+import DrawSpriteSheetPng2x from 'leaflet-draw/dist/images/spritesheet-2x.png';
+
+const STYLE_ID = 'leaflet-draw-spritesheet-override';
+
+/**
+ * Hook to fix leaflet-draw spritesheet paths by overriding the CSS with webpack-processed image URLs.
+ * This is needed because the default leaflet-draw.css references relative image paths that don't work
+ * after webpack processing.
+ */
+export function useLeafletDrawSpritesheetFix() {
+  useEffect(() => {
+    // Only inject the style once globally
+    if (document.getElementById(STYLE_ID)) {
+      return;
+    }
+
+    const style = document.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = `
+      .leaflet-draw-toolbar a {
+        background-image: url(${DrawSpriteSheetPng}) !important;
+      }
+      .leaflet-retina .leaflet-draw-toolbar a {
+        background-image: url(${DrawSpriteSheetPng2x}) !important;
+      }
+    `;
+    document.head.appendChild(style);
+  }, []);
+}