@delta10/atlas-sdk 0.1.1 → 0.1.2

package/README.md

@@ -17,29 +17,25 @@ npm install @delta10/atlas-sdk
 import { ref } from 'vue'
 import Map from '@delta10/atlas-sdk'
 import '@delta10/atlas-sdk/style.css'
-import type { LayerConfig } from '@delta10/atlas-sdk'
+import type { LayerConfig, InteractionsConfig } from '@delta10/atlas-sdk'
 
 const layers: LayerConfig[] = [
   {
     type: 'vector',
     options: {
-      identifier: 'panden',
-      title: 'Panden',
+      identifier: 'meetbouten',
+      title: 'Meetbouten',
       features: [
         {
-          type: 'Polygon',
-          coordinates: [[
-            [116044.07, 495387.61],
-            [116036.43, 495385.83],
-            [116041.45, 495365.34],
-            [116048.78, 495366.99],
-            [116044.07, 495387.61]
-          ]]
+          type: 'Point',
+          coordinates: [120000, 487000]
         }
       ],
       style: {
-        fill: { color: 'rgba(173, 216, 230, 0.6)' },
-        stroke: { color: 'blue', width: 2 }
+        'circle-radius': 8,
+        'circle-fill-color': 'rgba(173, 216, 230, 0.6)',
+        'circle-stroke-color': 'blue',
+        'circle-stroke-width': 3,
       }
     }
   }
@@ -56,6 +52,19 @@ const baseLayers: LayerConfig[] = [
   }
 ]
 
+const interactions: InteractionsConfig = {
+  selectable: {
+    enabled: true,
+    layers: ['meetbouten'],
+    style: {
+      'circle-radius': 8,
+      'circle-fill-color': 'red',
+      'circle-stroke-color': 'darkred',
+      'circle-stroke-width': 2,
+    }
+  }
+}
+
 const mapRef = ref()
 
 const onFeatureSelected = (event: any) => {
@@ -77,6 +86,7 @@ const onFeatureModified = (event: any) => {
       ref="mapRef"
       :layers="layers"
       :baseLayers="baseLayers"
+      :interactions="interactions"
       @featureSelected="onFeatureSelected"
       @featureDrawn="onFeatureDrawn"
       @featureModified="onFeatureModified"
@@ -111,27 +121,123 @@ The `Map` component is the main component of the SDK, providing an interactive m
 
 ### Methods
 
-- **`fitToFeatures(features)`** - Fit the map view to specific features
-  ```typescript
-  mapRef.value.fitToFeatures([
-    {
-      type: 'Polygon',
-      coordinates: [[...]]
+- **`fitToFeatures(features)`** - Fit the map view to include all specified features with appropriate padding
+
+Basic usage:
+```typescript
+mapRef.value.fitToFeatures([
+  {
+    type: 'Polygon',
+    coordinates: [[[x1, y1], [x2, y2], ...]]
+  },
+  {
+    type: 'Point',
+    coordinates: [x, y]
+  }
+])
+```
+
+Complete example in a Vue component:
+```vue
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import Map from '@delta10/atlas-sdk'
+import type { LayerConfig } from '@delta10/atlas-sdk'
+
+const mapRef = ref()
+const features = [/* your features */]
+
+const layers: LayerConfig[] = [
+  {
+    type: 'vector',
+    options: {
+      identifier: 'panden',
+      title: 'Panden',
+      features: features,
+      style: {
+        'fill-color': 'rgba(173, 216, 230, 0.6)',
+        'stroke-color': 'blue',
+        'stroke-width': 2
+      }
     }
-  ])
-  ```
+  }
+]
+
+// Fit map to features on component mount
+onMounted(() => {
+  if (mapRef.value) {
+    mapRef.value.fitToFeatures(features)
+  }
+})
+</script>
+
+<template>
+  <Map ref="mapRef" :layers="layers" />
+</template>
+```
 
 ## Layer Configuration
 
+### Vector Layer with Polygon
+```typescript
+{
+  type: 'vector',
+  options: {
+    identifier: 'panden',
+    title: 'Panden',
+    features: [
+      {
+        type: 'Polygon',
+        coordinates: [[
+          [116044.07, 495387.61],
+          [116036.43, 495385.83],
+          [116041.45, 495365.34],
+          [116048.78, 495366.99],
+          [116044.07, 495387.61]
+        ]]
+      }
+    ],
+    style: {
+      'fill-color': 'rgba(173, 216, 230, 0.6)',
+      'stroke-color': 'blue',
+      'stroke-width': 2
+    }
+  }
+}
+```
+
+### Vector Layer with Points
+```typescript
+{
+  type: 'vector',
+  options: {
+    identifier: 'meetbouten',
+    title: 'Meetbouten',
+    features: [
+      {
+        type: 'Point',
+        coordinates: [120000, 487000]
+      }
+    ],
+    style: {
+      'circle-radius': 8,
+      'circle-fill-color': 'rgba(173, 216, 230, 0.6)',
+      'circle-stroke-color': 'blue',
+      'circle-stroke-width': 3
+    }
+  }
+}
+```
+
 ### WMTS Layer
 ```typescript
 {
   type: 'wmts',
   options: {
-    identifier: 'layer-id',
-    title: 'Layer Title',
-    url: 'https://...',
-    format: 'image/png' // optional
+    identifier: 'referentiekaart',
+    title: 'Referentiekaart',
+    url: 'https://tiles.zaanstad.nl/mapproxy/service?REQUEST=GetCapabilities&service=wmts',
+    format: 'image/png' // optional, defaults to image/png
   }
 }
 ```
@@ -141,44 +247,61 @@ The `Map` component is the main component of the SDK, providing an interactive m
 {
   type: 'wms',
   options: {
-    identifier: 'layer-id',
-    title: 'Layer Title',
-    url: 'https://...',
-    layer: 'geoserver-layer-name'
+    identifier: 'bag-pand-bouwjaar',
+    title: 'BAG Pand Bouwjaar',
+    url: 'https://maps.zaanstad.nl/geoserver/wms',
+    layer: 'geo:bag_pand_bouwjaar'
   }
 }
 ```
 
-### Vector Layer
+## Styling
+
+### Static Styles
+Vector layers support flat style properties:
+- `fill-color` - Fill color (e.g., 'rgba(255, 0, 0, 0.5)')
+- `stroke-color` - Stroke color (e.g., 'blue')
+- `stroke-width` - Stroke width in pixels
+- `circle-radius` - Circle radius in pixels
+- `circle-fill-color` - Circle fill color
+- `circle-stroke-color` - Circle stroke color
+- `circle-stroke-width` - Circle stroke width
+
+### Conditional Styles
+
+You can create dynamic styles based on feature properties using flat style expressions with rules. Use OpenLayers expressions to conditionally set colors and other properties.
+
+#### Using Flat Style Expressions (Recommended)
+
 ```typescript
 {
   type: 'vector',
   options: {
-    identifier: 'layer-id',
-    title: 'Layer Title',
-    features: [
-      {
-        type: 'Point',
-        coordinates: [x, y]
-      },
-      {
-        type: 'Polygon',
-        coordinates: [[[x1, y1], [x2, y2], ...]]
-      }
-    ],
+    identifier: 'meetbouten',
+    title: 'Meetbouten',
+    features: meetboutenFeatures,
     style: {
-      fill: { color: 'rgba(255, 255, 255, 0.2)' },
-      stroke: { color: '#3399CC', width: 1.25 },
-      circle: {
-        radius: 5,
-        fill: { color: 'blue' },
-        stroke: { color: '#3399CC', width: 1.25 }
-      }
+      'circle-radius': 8,
+      'circle-fill-color': ['case', ['==', ['get', 'geplaatst'], true], 'blue', 'lightblue'],
+      'circle-stroke-color': 'blue',
+      'circle-stroke-width': 3,
     }
   }
 }
 ```
 
+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:
+- `'=='` - Equal to
+- `'!='` - Not equal to  
+- `'>'` - Greater than
+- `'<'` - Less than
+- `'>='` - Greater than or equal
+- `'<='` - Less than or equal
+
 ## Interactions Configuration
 
 ### Select Interaction
@@ -187,13 +310,12 @@ Allow users to select features from specific layers:
 {
   selectable: {
     enabled: true,
-    layers: ['layer-id-1', 'layer-id-2'],
+    layers: ['meetbouten'],
     style: {
-      circle: {
-        radius: 8,
-        fill: { color: 'red' },
-        stroke: { color: 'darkred', width: 2 }
-      }
+      'circle-radius': 8,
+      'circle-fill-color': 'red',
+      'circle-stroke-color': 'darkred',
+      'circle-stroke-width': 2
     }
   }
 }
@@ -205,8 +327,8 @@ Allow users to draw new geometries:
 {
   draw: {
     enabled: true,
-    layer: 'target-layer-id',
-    type: 'Polygon' // 'Point' | 'LineString' | 'Polygon'
+    layer: 'meetbouten',
+    type: 'Point' // 'Point' | 'LineString' | 'Polygon'
   }
 }
 ```
@@ -217,10 +339,7 @@ Allow users to edit existing geometries:
 {
   modify: {
     enabled: true,
-    layer: 'target-layer-id',
-    style: {
-      stroke: { color: 'orange', width: 2 }
-    }
+    layer: 'meetbouten'
   }
 }
 ```
@@ -231,7 +350,41 @@ Snap drawn/modified features to existing features:
 {
   snap: {
     enabled: true,
-    targetLayer: 'layer-to-snap-to'
+    targetLayer: 'panden',
+    pixelTolerance: 10  // Optional: distance in pixels where snap activates (default: 8)
+  }
+}
+```
+
+The `pixelTolerance` controls how close (in pixels) the cursor needs to be to snap to a feature. Adjust for your needs:
+- **Lower values** (e.g., 5-8 pixels) - More precise snapping, requires cursor to be very close
+- **Higher values** (e.g., 15-20 pixels) - Easier snapping, works from further away
+
+### Combined Interactions Example
+```typescript
+const interactions: InteractionsConfig = {
+  selectable: {
+    enabled: true,
+    layers: ['meetbouten'],
+    style: {
+      'circle-radius': 8,
+      'circle-fill-color': 'red',
+      'circle-stroke-color': 'darkred',
+      'circle-stroke-width': 2
+    }
+  },
+  draw: {
+    enabled: true,
+    layer: 'meetbouten',
+    type: 'Point'
+  },
+  modify: {
+    enabled: true,
+    layer: 'meetbouten'
+  },
+  snap: {
+    enabled: true,
+    targetLayer: 'panden'
   }
 }
 ```

package/dist/assets/basedecoder-B2c5_Eok.js

@@ -0,0 +1 @@
+function l(o,n){let t=o.length-n,s=0;do{for(let a=n;a>0;a--)o[s+n]+=o[s],s++;t-=n}while(t>0)}function d(o,n,t){let s=0,a=o.length;const i=a/t;for(;a>n;){for(let e=n;e>0;--e)o[s+n]+=o[s],++s;a-=n}const r=o.slice();for(let e=0;e<i;++e)for(let c=0;c<t;++c)o[t*e+c]=r[(t-c-1)*i+e]}function f(o,n,t,s,a,i){if(n===1)return o;for(let c=0;c<a.length;++c){if(a[c]%8!==0)throw new Error("When decoding with predictor, only multiple of 8 bits are supported.");if(a[c]!==a[0])throw new Error("When decoding with predictor, all samples must have the same size.")}const r=a[0]/8,e=i===2?1:a.length;for(let c=0;c<s&&!(c*e*t*r>=o.byteLength);++c){let h;if(n===2){switch(a[0]){case 8:h=new Uint8Array(o,c*e*t*r,e*t*r);break;case 16:h=new Uint16Array(o,c*e*t*r,e*t*r/2);break;case 32:h=new Uint32Array(o,c*e*t*r,e*t*r/4);break;default:throw new Error(`Predictor 2 not allowed with ${a[0]} bits per sample.`)}l(h,e)}else n===3&&(h=new Uint8Array(o,c*e*t*r,e*t*r),d(h,e,r))}return o}class g{async decode(n,t){const s=await this.decodeBlock(t),a=n.Predictor||1;if(a!==1){const i=!n.StripOffsets,r=i?n.TileWidth:n.ImageWidth,e=i?n.TileLength:n.RowsPerStrip||n.ImageLength;return f(s,a,r,e,n.BitsPerSample,n.PlanarConfiguration)}return s}}export{g as B};