@delta10/atlas-sdk 0.1.11 → 0.2.0

package/README.md

@@ -28,7 +28,11 @@ const layers: LayerConfig[] = [
       features: [
         {
           type: 'Point',
-          coordinates: [120000, 487000]
+          coordinates: [120000, 487000],
+          properties: {
+            id: '123482',
+            geplaatst: false
+          }
         }
       ],
       style: {
@@ -83,13 +87,17 @@ const onFeatureSelected = (event: any) => {
   console.log('Features selected:', event.selected)
 }
 
-const onFeatureDrawn = (event: any) => {
-  console.log('Feature drawn:', event.feature)
-}
-
 const onFeatureModified = (event: any) => {
   console.log('Features modified:', event.features)
 }
+
+const onModifyCancelled = (event: any) => {
+  console.log('Modification cancelled:', event.features)
+}
+
+const onMapClicked = (event: any) => {
+  console.log('Map clicked:', event.coordinate, event.pixel)
+}
 </script>
 
 <template>
@@ -101,8 +109,9 @@ const onFeatureModified = (event: any) => {
       :baseLayers="baseLayers"
       :interactions="interactions"
       @featureSelected="onFeatureSelected"
-      @featureDrawn="onFeatureDrawn"
       @featureModified="onFeatureModified"
+      @modifyCancelled="onModifyCancelled"
+      @mapClicked="onMapClicked"
     />
   </div>
 </template>
@@ -117,16 +126,16 @@ The `Map` component is the main component of the SDK, providing an interactive m
 - **`layers`** `LayerConfig[]` - Array of regular layers to display
 - **`baseLayers`** `LayerConfig[]` - Array of base layers (only one can be active)
 - **`toggleableLayers`** `LayerConfig[]` - Array of toggleable layers (users can show/hide)
-- **`interactions`** `InteractionsConfig` - Configuration for map interactions (select, draw, modify, snap)
+- **`interactions`** `InteractionsConfig` - Configuration for map interactions (select, modify, snap)
 - **`zoom`** `number` (default: `10`) - Initial zoom level
 - **`center`** `[number, number]` (default: `[120000, 487000]`) - Initial center coordinates
 
 ### Events
 
 - **`@featureSelected`** - Emitted when features are selected. Payload: `{ selected: Feature[] }`
-- **`@featureDrawn`** - Emitted when a new feature is drawn. Payload: `{ feature: Feature }`
 - **`@featureModified`** - Emitted when features are modified. Payload: `{ features: Feature[] }`
-- **`@baseLayerChanged`** - Emitted when the active base layer changes. Payload: `layerId: string | null`
+- **`@modifyCancelled`** - Emitted when a pending modification is cancelled. Payload: `{ features: Feature[] }`
+- **`@mapClicked`** - Emitted when the map is clicked. Payload: `{ coordinate: [number, number]; pixel: [number, number] }`
 
 ### Methods
 
@@ -225,7 +234,11 @@ onMounted(() => {
     features: [
       {
         type: 'Point',
-        coordinates: [120000, 487000]
+        coordinates: [120000, 487000],
+        properties: {
+          id: '123482',
+          geplaatst: false
+        }
       }
     ],
     style: {
@@ -303,13 +316,55 @@ This example checks if the `geplaatst` property equals `true`:
 - If true: circle fill color is `blue`
 - If false: circle fill color is `lightblue`
 
-You can use other comparison operators:
+Supported expression operators:
+- `'get'` - Read a feature property
+- `'case'` - Choose a value based on conditions
 - `'=='` - Equal to
-- `'!='` - Not equal to  
-- `'>'` - Greater than
-- `'<'` - Less than
-- `'>='` - Greater than or equal
-- `'<='` - Less than or equal
+- `'coalesce'` - Use the first non-null value
+
+### OpenLayers Style Functions
+
+For more control, vector layers can also use an OpenLayers style function. This is useful for resolution-dependent styling, feature labels, or logic that is easier to express in TypeScript:
+
+```typescript
+import { Style, Stroke, Fill, Circle as CircleStyle, Text } from 'ol/style'
+
+{
+  type: 'vector',
+  options: {
+    identifier: 'meetbouten',
+    title: 'Meetbouten',
+    features: meetboutenFeatures,
+    styleFunction: (feature, _currentStyle, resolution) => {
+      if (resolution > 0.2) {
+        return []
+      }
+
+      const properties = feature.getProperties()
+      const isGeplaatst = properties.geplaatst === true
+      const featureId = properties.id || ''
+
+      return [new Style({
+        image: new CircleStyle({
+          radius: 20,
+          fill: new Fill({ color: 'white' }),
+          stroke: new Stroke({
+            color: isGeplaatst ? 'green' : 'red',
+            width: 2
+          })
+        }),
+        text: featureId ? new Text({
+          text: String(featureId),
+          fill: new Fill({ color: '#000' }),
+          stroke: new Stroke({ color: '#fff', width: 2 })
+        }) : undefined
+      })]
+    }
+  }
+}
+```
+
+Returning an empty array hides the feature for that render pass.
 
 ## Interactions Configuration
 
@@ -330,31 +385,22 @@ Allow users to select features from specific layers:
 }
 ```
 
-### Draw Interaction
-Allow users to draw new geometries:
-```typescript
-{
-  draw: {
-    enabled: true,
-    layer: 'meetbouten',
-    type: 'Point' // 'Point' | 'LineString' | 'Polygon'
-  }
-}
-```
-
 ### Modify Interaction
 Allow users to edit existing geometries:
 ```typescript
 {
   modify: {
     enabled: true,
-    layer: 'meetbouten'
+    layer: 'meetbouten',
+    labelProperty: 'meetboutnummer' // Optional: feature property shown in the confirm/cancel overlay
   }
 }
 ```
 
+The `labelProperty` value is read from the selected feature's `properties`. For example, if a feature has `properties: { id: '123482' }`, use `labelProperty: 'id'` to show that value in the confirmation overlay.
+
 ### Snap Interaction
-Snap drawn/modified features to existing features:
+Snap modified features to existing features:
 ```typescript
 {
   snap: {
@@ -382,14 +428,10 @@ const interactions: InteractionsConfig = {
       'circle-stroke-width': 2
     }
   },
-  draw: {
-    enabled: true,
-    layer: 'meetbouten',
-    type: 'Point'
-  },
   modify: {
     enabled: true,
-    layer: 'meetbouten'
+    layer: 'meetbouten',
+    labelProperty: 'meetboutnummer'
   },
   snap: {
     enabled: true,
@@ -398,6 +440,41 @@ const interactions: InteractionsConfig = {
 }
 ```
 
+## Reactive Data
+
+Layer configuration can be reactive. Use `computed` when feature arrays are loaded or replaced after mount:
+
+```typescript
+const pandenFeatures = ref<any[]>([])
+const meetboutenFeatures = ref<any[]>([])
+
+const layers = computed<LayerConfig[]>(() => [
+  {
+    type: 'vector',
+    options: {
+      identifier: 'panden',
+      title: 'Panden',
+      features: pandenFeatures.value
+    }
+  },
+  {
+    type: 'vector',
+    options: {
+      identifier: 'meetbouten',
+      title: 'Meetbouten',
+      features: meetboutenFeatures.value
+    }
+  }
+])
+
+onMounted(() => {
+  pandenFeatures.value = loadedPandenFeatures
+  meetboutenFeatures.value = loadedMeetboutenFeatures
+
+  mapRef.value?.fitToFeatures(loadedPandenFeatures)
+})
+```
+
 ## Development
 
 ### Install dependencies