@defra/interactive-map 0.0.31-alpha → 0.0.33-alpha

package/docs/plugins/datasets.md

@@ -129,15 +129,61 @@ Human-readable name shown in the LayersMenu panel and Key panel.
 
 **Type:** `string | GeoJSON.FeatureCollection`
 
-GeoJSON source. Provide a URL string for remote data, or a GeoJSON object for inline data. Use alongside `transformRequest` to add authentication or append bbox parameters to the request.
+GeoJSON source. Provide a URL string for remote data, or a `FeatureCollection` object for inline data.
+
+For data that needs authentication headers or viewport-based filtering, use `dynamicGeoJSON` instead.
+
+---
+
+### `dynamicGeoJSON`
+
+**Type:** `Object`
+
+Enables dynamic, bbox-aware GeoJSON fetching — the plugin calls your API as the map pans and zooms, loading features for the current viewport and evicting distant ones. Configure this instead of `geojson` when your data is too large to load all at once.
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `url` | `string` | **Required.** Base URL for the GeoJSON API endpoint |
+| `idProperty` | `string` | **Required.** Property name that uniquely identifies each feature. Used for deduplication across viewport fetches |
+| `transformRequest` | `Function` | Called before each fetch. Return a URL string or `{ url, headers }` object to add auth headers or modify the URL |
+| `maxFeatures` | `number` | Optional. Cap on features held in memory across all viewport fetches. Older out-of-viewport features are evicted when exceeded |
+
+**`transformRequest` signature:** `transformRequest(url, { bbox, zoom, dataset })`
+
+| Argument | Type | Description |
+|----------|------|-------------|
+| `url` | `string` | The base URL |
+| `bbox` | `number[]` | Current viewport bounds as `[west, south, east, north]` |
+| `zoom` | `number` | Current map zoom level |
+| `dataset` | `Object` | The full dataset configuration |
+
+```js
+{
+  id: 'land-parcels',
+  dynamicGeoJSON: {
+    url: 'https://example.com/api/parcels',
+    idProperty: 'parcel_id',
+    transformRequest: (url, { bbox }) => {
+      const separator = url.includes('?') ? '&' : '?'
+      return {
+        url: `${url}${separator}bbox=${bbox.join(',')}`,
+        headers: { Authorization: `Bearer ${getToken()}` }
+      }
+    },
+    maxFeatures: 50000
+  },
+  minZoom: 10,
+  style: { stroke: '#d4351c', strokeWidth: 2 }
+}
+```
 
 ---
 
 ### `tiles`
 
-**Type:** `string[]`
+**Type:** `string | string[]`
 
-Array of vector tile URL templates (e.g. `https://example.com/tiles/{z}/{x}/{y}`). When set, the dataset uses a vector tile source instead of GeoJSON.
+Vector tile URL template or array of templates (e.g. `'https://example.com/tiles/{z}/{x}/{y}'`). When set, the dataset uses a vector tile source instead of GeoJSON.
 
 ---
 
@@ -149,55 +195,44 @@ The layer name within the vector tile source to render. Required when using `til
 
 ---
 
-### `transformRequest`
-
-**Type:** `Function`
-
-A function called before each fetch to transform the request. Its primary purpose is to attach authentication credentials — API keys, OAuth tokens, or other headers. It also receives the current viewport context so you can append bbox or zoom parameters to the URL if your API supports spatial filtering.
+### `idProperty`
 
-The plugin handles all dynamic fetching concerns (viewport tracking, debouncing, deduplication, caching, request cancellation) — `transformRequest` only needs to return the final URL and any headers.
+**Type:** `string`
 
-**Signature:** `transformRequest(url, { bbox, zoom, dataset })`
+Property name used to uniquely identify features in a static `geojson` source. When set, the plugin promotes this property to the MapLibre feature ID (`promoteId`) so that feature IDs are stable and derived from your data rather than auto-generated.
 
-| Argument | Type | Description |
-|----------|------|-------------|
-| `url` | `string` | The base URL from `geojson` |
-| `bbox` | `number[]` | Current viewport bounds as `[west, south, east, north]` |
-| `zoom` | `number` | Current map zoom level |
-| `dataset` | `Object` | The full dataset configuration |
+Required for `setFeatureVisibility` to work correctly — the IDs you pass must match the values of this property in your data.
 
-Return either a plain URL string or an object `{ url, headers }`. The object form is needed when attaching auth headers.
+> [!NOTE]
+> For `dynamicGeoJSON` sources, set `idProperty` inside the `dynamicGeoJSON` object, not here.
 
 ```js
-// Auth headers only (no bbox filtering)
-transformRequest: (url) => ({
-  url,
-  headers: { Authorization: `Bearer ${getToken()}` }
-})
-
-// Append bbox to URL for server-side spatial filtering
-transformRequest: (url, { bbox }) => {
-  const separator = url.includes('?') ? '&' : '?'
-  return { url: `${url}${separator}bbox=${bbox.join(',')}` }
-}
-
-// Both — auth + bbox
-transformRequest: (url, { bbox }) => {
-  const separator = url.includes('?') ? '&' : '?'
-  return {
-    url: `${url}${separator}bbox=${bbox.join(',')}`,
-    headers: { Authorization: `Bearer ${getToken()}` }
-  }
+// Features have { properties: { parcel_id: 'ABC123', ... } }
+{
+  id: 'my-parcels',
+  geojson: 'https://example.com/api/parcels',
+  idProperty: 'parcel_id'
 }
 ```
 
 ---
 
-### `idProperty`
+### `generateIds`
 
-**Type:** `string`
+**Type:** `boolean`
 
-Property name used to uniquely identify features. Required alongside `transformRequest` to enable dynamic bbox-based fetching — the plugin uses it internally to deduplicate features across successive viewport fetches.
+When `true`, MapLibre auto-generates integer IDs for GeoJSON features by their array index position (0-based). Use this when your features have no natural unique ID property and you need `setFeatureVisibility` to work.
+
+> [!NOTE]
+> Auto-generated IDs are positional and reset on every `setData` call. If your data changes between calls, the same integer ID may refer to a different feature. Prefer `idProperty` whenever your data has a stable unique field.
+
+```js
+{
+  id: 'my-parcels',
+  geojson: 'https://example.com/api/parcels',
+  generateIds: true
+}
+```
 
 ---
 
@@ -231,18 +266,10 @@ Maximum zoom level at which the dataset is visible.
 
 ---
 
-### `maxFeatures`
-
-**Type:** `number`
-
-Only applies to dynamic sources (those using `transformRequest`). Caps the number of features held in memory across all viewport fetches — older out-of-viewport features are evicted when the limit is exceeded. Omit for small or bounded datasets; set it when users are likely to pan extensively over a large dataset.
-
----
-
-### `visibility`
+### `visible`
 
-**Type:** `'visible' | 'hidden'`
-**Default:** `'visible'`
+**Type:** `boolean`
+**Default:** `true`
 
 Initial visibility of the dataset.
 
@@ -253,7 +280,7 @@ Initial visibility of the dataset.
 **Type:** `boolean`
 **Default:** `false`
 
-When `true`, the dataset appears in the Key panel with its style symbol and label.
+When `true`, the dataset appears in the Key panel with its style symbol and label. Sublayers inherit this value — set `showInKey: false` on an individual sublayer to opt it out.
 
 ---
 
@@ -262,7 +289,7 @@ When `true`, the dataset appears in the Key panel with its style symbol and labe
 **Type:** `boolean`
 **Default:** `false`
 
-When `true`, the dataset appears in the LayersMenu panel and can be toggled on and off by the user.
+When `true`, the dataset appears in the LayersMenu panel and can be toggled on and off by the user. Sublayers inherit this value — set `showInMenu: false` on an individual sublayer to opt it out.
 
 ---
 
@@ -367,7 +394,7 @@ style: {
 
 Array of sublayer rules that partition the dataset into visually distinct groups based on feature filters. Each sublayer is rendered as a separate map layer.
 
-Sublayers inherit the parent dataset's style and only override what they specify in their own `style` object. For polygon/line datasets, fill precedence is (highest to lowest): sublayer `fillPattern` → sublayer `fill` → parent `fillPattern` → parent `fill`. For symbol datasets, each symbol property is inherited individually from the parent unless the sublayer sets it explicitly.
+Sublayer styles merge over the parent's — the sublayer wins on any property it sets. Rendering type is driven by the merged result: `symbol` > `fillPattern`/`fill` > `stroke`.
 
 #### `Sublayer` properties
 
@@ -377,70 +404,71 @@ Sublayers inherit the parent dataset's style and only override what they specify
 | `label` | `string` | Human-readable name shown in the LayersMenu and Key panels |
 | `filter` | `FilterExpression` | MapLibre filter expression to match features for this sublayer |
 | `style` | `Object` | Style overrides. Accepts the same properties as the dataset `style` object |
-| `showInKey` | `boolean` | Shows this sublayer in the Key panel. Inherits from dataset if not set |
-| `showInMenu` | `boolean` | Shows this sublayer in the LayersMenu panel. **Default:** `false` |
+| `showInKey` | `boolean` | Shows this sublayer in the Key panel. Inherits from the dataset when not set; explicit `false` overrides a dataset-level `true` |
+| `showInMenu` | `boolean` | Shows this sublayer in the LayersMenu panel. Inherits from the dataset when not set; explicit `false` overrides a dataset-level `true` |
 
 **Polygon/line example:**
 
 ```js
-sublayers: [
-  {
-    id: 'active',
-    label: 'Active parcels',
-    filter: ['==', ['get', 'status'], 'active'],
-    showInMenu: true,
-    style: {
-      stroke: '#00703c',
-      fill: 'rgba(0,112,60,0.1)',
-      symbolDescription: 'Green outline'
-    }
-  },
-  {
-    id: 'inactive',
-    label: 'Inactive parcels',
-    filter: ['==', ['get', 'status'], 'inactive'],
-    showInMenu: true,
-    style: {
-      stroke: '#d4351c',
-      fillPattern: 'diagonal-cross-hatch',
-      fillPatternForegroundColor: '#d4351c'
+{
+  id: 'field-parcels',
+  label: 'Field parcels',
+  geojson: parcelsData,
+  showInKey: true,
+  showInMenu: true,
+  sublayers: [
+    {
+      id: 'active',
+      label: 'Active parcels',
+      filter: ['==', ['get', 'status'], 'active'],
+      style: {
+        stroke: '#00703c',
+        fill: 'rgba(0,112,60,0.1)',
+        symbolDescription: 'Green outline'
+      }
+    },
+    {
+      id: 'inactive',
+      label: 'Inactive parcels',
+      filter: ['==', ['get', 'status'], 'inactive'],
+      style: {
+        stroke: '#d4351c',
+        fillPattern: 'diagonal-cross-hatch',
+        fillPatternForegroundColor: '#d4351c'
+      }
     }
-  }
-]
+  ]
+}
 ```
 
 **Symbol (point) example — scheduled monuments by type:**
 
-When the parent dataset has `symbol` set, each sublayer can override individual symbol properties to represent different categories. Properties not set on the sublayer are inherited from the parent.
+Here the parent defines the shared symbol shape; each sublayer only overrides what differs.
 
 ```js
 {
   id: 'scheduled-monuments',
   geojson: scheduledMonumentsData,
+  showInKey: true,
+  showInMenu: true,
   style: { symbol: 'square' },
   sublayers: [
     {
       id: 'prehistoric',
       label: 'Prehistoric sites',
       filter: ['==', ['get', 'type'], 'prehistoric'],
-      showInKey: true,
-      showInMenu: true,
       style: { symbolBackgroundColor: '#0f7a52' }
     },
     {
       id: 'roman',
       label: 'Roman sites',
       filter: ['==', ['get', 'type'], 'roman'],
-      showInKey: true,
-      showInMenu: true,
       style: { symbolBackgroundColor: '#54319f' }
     },
     {
       id: 'medieval',
       label: 'Medieval sites',
       filter: ['==', ['get', 'type'], 'medieval'],
-      showInKey: true,
-      showInMenu: true,
       style: { symbolBackgroundColor: '#ca357c' }
     }
   ]
@@ -520,26 +548,26 @@ datasetsPlugin.setDatasetVisibility(false, { datasetId: 'my-parcels', sublayerId
 
 ### `setFeatureVisibility(visible, featureIds, scope)`
 
-Show or hide specific features within a dataset without removing them from the source.
+Show or hide specific features within a dataset without removing them from the source. The feature IDs you pass are matched against the dataset's `idProperty` value, or against the native feature `id` when `idProperty` is not set.
+
+> [!NOTE]
+> The dataset must have `idProperty` or `generateIds: true` configured for feature matching to work. A console warning is emitted if neither is set.
 
 | Argument | Type | Description |
 |----------|------|-------------|
 | `visible` | `boolean` | `true` to show, `false` to hide |
-| `featureIds` | `(string \| number)[]` | IDs of the features to target |
+| `featureIds` | `(string \| number)[]` | IDs of the features to target — must match the `idProperty` values in your data |
 | `scope.datasetId` | `string` | ID of the dataset |
-| `scope.idProperty` | `string \| null` | Property name to match features on. Pass `null` to match against the top-level `feature.id` |
 
 ```js
-// Hide by a feature property
-datasetsPlugin.setFeatureVisibility(false, [123, 456], {
-  datasetId: 'my-parcels',
-  idProperty: 'parcel_id'
+// Dataset configured with idProperty: 'parcel_id'
+datasetsPlugin.setFeatureVisibility(false, ['ABC123', 'DEF456'], {
+  datasetId: 'my-parcels'
 })
 
-// Show using feature.id
-datasetsPlugin.setFeatureVisibility(true, [123, 456], {
-  datasetId: 'my-parcels',
-  idProperty: null
+// Show previously hidden features
+datasetsPlugin.setFeatureVisibility(true, ['ABC123'], {
+  datasetId: 'my-parcels'
 })
 ```
 
@@ -661,6 +689,26 @@ datasetsPlugin.setData(
 
 ---
 
+### `setGlobals(values)`
+
+Set global state that applies across all datasets. Currently supports `opacityMode`.
+
+| Argument | Type | Description |
+|----------|------|-------------|
+| `values.opacityMode` | `'dataset' \| 'global' \| 'multiply'` | Controls how opacity values are combined when both a global opacity and a per-dataset opacity are set |
+
+| Mode | Behaviour |
+|------|-----------|
+| `'dataset'` | Each dataset uses its own `style.opacity` only. Global opacity is ignored |
+| `'global'` | All datasets use the global opacity, ignoring per-dataset values |
+| `'multiply'` | Effective opacity is `globalOpacity × datasetOpacity` |
+
+```js
+datasetsPlugin.setGlobals({ opacityMode: 'multiply' })
+```
+
+---
+
 ## Events
 
 Subscribe to events using `interactiveMap.on()`.

package/docs/plugins/interact.md

@@ -295,7 +295,6 @@ Emitted when the user confirms their selection (clicks "Done").
 
   // If features were selected:
   selectedFeatures: [...],
-  selectionBounds: [west, south, east, north],
 
   // If markers were selected:
   selectedMarkers: ['...']
@@ -340,10 +339,9 @@ Emitted whenever the selected features or selected markers change.
 ```js
 {
   selectedFeatures: [
-    { featureId: '...', layerId: '...', properties: {...}, geometry: {...} }
+    { featureId: '...', layerId: '...', idProperty: '...', properties: {...} }
   ],
   selectedMarkers: ['...'],  // array of selected marker IDs
-  selectionBounds: [west, south, east, north] | null,
   contiguous: boolean  // true when 2+ features are selected and all form a single contiguous group
 }
 ```
@@ -351,7 +349,6 @@ Emitted whenever the selected features or selected markers change.
 ```js
 interactiveMap.on('interact:selectionchange', (e) => {
   console.log('Selected features:', e.selectedFeatures)
-  console.log('Bounds:', e.selectionBounds)
 })
 ```
 

package/docusaurus.config.cjs

@@ -91,12 +91,15 @@ const config = {
           sidebar: [
             { text: 'Basic map', href: '/examples/basic-map' },
             { text: 'Button-triggered map', href: '/examples/button-map' },
-            { text: 'Add a marker with a panel', href: '/examples/add-marker-with-panel' },
+            { text: 'Map with marker and panel', href: '/examples/add-marker-with-panel' },
             { text: 'Toggle marker label', href: '/examples/toggle-marker-label' },
+            { text: 'Place a marker to continue', href: '/examples/place-marker' },
             { text: 'Add a search control', href: '/examples/search-control' },
             { text: 'Select a feature', href: '/examples/select-feature' },
             { text: 'Change map style', href: '/examples/style-switcher' },
-            { text: 'Draw tools', href: '/examples/draw' },
+            { text: 'Draw tools', href: '/examples/draw-tools' },
+            { text: 'Add symbols', href: '/examples/add-symbols' },
+            { text: 'Add polygons', href: '/examples/add-polygons' },
           ],
         },
         {

package/govuk-prototype-kit.config.json

@@ -1,8 +1,58 @@
 {
   "templates": [
     {
-      "name": "Map page",
-      "path": "/assets/templates/map.njk",
+      "name": "Basic map",
+      "path": "/assets/templates/basic-map.njk",
+      "type": "nunjucks"
+    },
+    {
+      "name": "Map with marker and panel",
+      "path": "/assets/templates/marker-panel.njk",
+      "type": "nunjucks"
+    },
+    {
+      "name": "Button-triggered map",
+      "path": "/assets/templates/button-map.njk",
+      "type": "nunjucks"
+    },
+    {
+      "name": "Toggle marker label",
+      "path": "/assets/templates/toggle-marker-label.njk",
+      "type": "nunjucks"
+    },
+    {
+      "name": "Place a marker to continue",
+      "path": "/assets/templates/place-marker.njk",
+      "type": "nunjucks"
+    },
+    {
+      "name": "Add a search control",
+      "path": "/assets/templates/search-control.njk",
+      "type": "nunjucks"
+    },
+    {
+      "name": "Select a feature",
+      "path": "/assets/templates/select-feature.njk",
+      "type": "nunjucks"
+    },
+    {
+      "name": "Change map style",
+      "path": "/assets/templates/style-switcher.njk",
+      "type": "nunjucks"
+    },
+    {
+      "name": "Draw tools",
+      "path": "/assets/templates/draw-tools.njk",
+      "type": "nunjucks"
+    },
+    {
+      "name": "Add symbols",
+      "path": "/assets/templates/add-symbols.njk",
+      "type": "nunjucks"
+    },
+    {
+      "name": "Add polygons",
+      "path": "/assets/templates/add-polygons.njk",
       "type": "nunjucks"
     }
   ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@defra/interactive-map",
-  "version": "0.0.31-alpha",
+  "version": "0.0.33-alpha",
   "description": "An accessible map component",
   "repository": {
     "type": "git",

package/plugins/beta/datasets/dist/css/index.css

@@ -93,8 +93,7 @@
 .im-c-datasets-layers-group .im-c-datasets-layers__item:not(:last-child) {
   margin-bottom: 0;
 }
-
-.im-c-datasets-layers__item-label {
+.im-c-datasets-layers__item .im-c-datasets-layers__item-label {
   width: 100%;
   max-width: none;
   align-items: start;

package/plugins/beta/datasets/dist/esm/im-datasets-ml-adapter.js

@@ -1 +1 @@
-import t from"@babel/runtime/helpers/asyncToGenerator";import e from"@babel/runtime/helpers/defineProperty";import{g as r,a,D as i,h as s,d as o}from"./im-datasets-plugin.js";import"preact/compat";import"preact/jsx-runtime";function l(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);e&&(a=a.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),r.push.apply(r,a)}return r}var y=(t,r,i)=>{var{hasStroke:s,strokeLayerId:o}=r;if(s&&!t.getLayer(o)){var y=function(t){for(var r=1;r<arguments.length;r++){var a=null!=arguments[r]?arguments[r]:{};r%2?l(Object(a),!0).forEach(function(r){e(t,r,a[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(a)):l(Object(a)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(a,e))})}return t}({"line-color":a(r.style.stroke,i),"line-width":r.style.strokeWidth||1,"line-opacity":r.opacity},r.style.strokeDashArray?{"line-dasharray":r.style.strokeDashArray}:{}),n=r.getStrokeSource(y);t.addLayer(n)}},n=(t,e,i,s,o,l)=>{var h,{sourceId:d,source:p}=e;p&&!t.getSource(d)&&t.addSource(d,p);var c=i.id;return((t,e,a,i,s)=>{var{hasSymbol:o,symbolLayerId:l}=e;if(o&&i&&l&&!t.getLayer(l)){var y=i.getSymbolDef(e.style);if(y){var n=i.getSymbolImageId(e.style,a,!1,s);if(n){var h=r(e.style,y);t.addLayer(e.getSymbolSource(n,h,y))}}}})(t,e,i,s,l),function(t,e,r,i){var s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:1,{hasFill:o,fillLayerId:l}=e;if(o&&l&&!t.getLayer(l)){var y=i.getPatternImageId(e.style,r,s),n=y?{"fill-pattern":y,"fill-opacity":e.opacity}:{"fill-color":a(e.style.fill,r),"fill-opacity":e.opacity};t.addLayer(e.getFillSource(n))}}(t,e,c,o,l),y(t,e,c),null!==(h=e.sublayers)&&void 0!==h&&h.length?(e.sublayers.forEach(e=>{n(t,e,i,s,o,l)}),d):e.isSublayer?void 0:d},h=t=>{var[e,r]=t,a=(t=>t<=.25?"left":t>=.75?"right":"")(e),i=(t=>t<=.25?"top":t>=.75?"bottom":"")(r);return i+(a&&i?"-":"")+a||"center"};function d(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(t);e&&(a=a.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),r.push.apply(r,a)}return r}function p(t){for(var r=1;r<arguments.length;r++){var a=null!=arguments[r]?arguments[r]:{};r%2?d(Object(a),!0).forEach(function(r){e(t,r,a[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(a)):d(Object(a)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(a,e))})}return t}class c extends i{get visibility(){return this.visible?"visible":"none"}get fillLayerId(){return this.hasSublayers||this.hasSymbol?null:this.hasFill?this.id:null}get strokeLayerId(){return this.hasSublayers||this.hasSymbol?null:this.hasStroke?this.hasFill?"".concat(this.id,"-stroke"):this.id:null}get symbolLayerId(){return this.hasSublayers?null:this.hasSymbol?this.id:null}get layerIds(){return this.hasSublayers?this.sublayers.flatMap(t=>t.layerIds).filter(Boolean):[this.symbolLayerId,this.fillLayerId,this.strokeLayerId].filter(Boolean)}getLayersWithValue(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1],r=[];if(!1===e||this[e]){var a=[this.symbolLayerId,this.fillLayerId,this.strokeLayerId].filter(Boolean);if(a.length){var i=this[t];r.push({layerIds:a,[t]:i})}}return this.hasSublayers&&this.sublayers.forEach(a=>{(!1===e||a[e])&&r.push(a.getLayersWithValue(t)[0])}),r}getLayersWithVisibility(){return this.getLayersWithValue("visibility")}getLayersWithOpacity(){return this.getLayersWithValue("opacity")}getLayersWithFilters(){return this.getLayersWithValue("filter","hasHiddenFeatures")}get sourceId(){if(this.isSublayer)return this.parent.sourceId;if(this.hasDynamicGeoJSON)return this.dynamicGeoJSON.sourceId;if(this.tiles){var t=Array.isArray(this.tiles)?this.tiles.join(","):this.tiles;return"tiles-".concat(s(t))}return this.geojson?"string"==typeof this.geojson?"geojson-".concat(s(this.geojson)):"geojson-".concat(this.id):"source-".concat(this.id)}get source(){return this.hasDynamicGeoJSON?this.dynamicGeoJSON.source:this.tiles?{type:"vector",tiles:this.tiles,minzoom:this.minZoom||0,maxzoom:this.maxZoom||22}:this.geojson?{type:"geojson",data:this.geojson,generateId:!0}:null}getSymbolSource(t,e,r){return p({id:this.symbolLayerId,type:"symbol",source:this.sourceId,"source-layer":this.sourceLayer,minzoom:this.minZoom,maxzoom:this.maxZoom,layout:{visibility:this.visibility,"icon-image":t,"icon-anchor":h(e||(null==r?void 0:r.anchor)||[.5,.5]),"icon-allow-overlap":!0}},this.filter?{filter:this.filter}:{})}getFillSource(t){return p({id:this.fillLayerId,type:"fill",source:this.sourceId,"source-layer":this.sourceLayer,minzoom:this.minZoom,maxzoom:this.maxZoom,layout:{visibility:this.visibility},paint:t},this.filter?{filter:this.filter}:{})}getStrokeSource(t){return p({id:this.strokeLayerId,type:"line",source:this.sourceId,"source-layer":this.sourceLayer,minzoom:this.minZoom,maxzoom:this.maxZoom,layout:{visibility:this.visibility},paint:t},this.filter?{filter:this.filter}:{})}get _hiddenFeaturesIdExpression(){return this.hasDynamicGeoJSON?this.dynamicGeoJSON.hiddenFeaturesIdExpression:["to-string",["id"]]}get _hiddenFeaturesFilter(){var t,e=null===(t=this.hiddenFeatures)||void 0===t?void 0:t.filter(t=>-1!==t);return null!=e&&e.length?["!",["in",this._hiddenFeaturesIdExpression,["literal",e.map(String)]]]:null}get filter(){var t,e=["all"];null!==(t=this.parent)&&void 0!==t&&t.filter&&e.push(this.parent.filter),this._datasetDefinition.filter&&e.push(this._datasetDefinition.filter);var r=this._hiddenFeaturesFilter;return r&&e.push(r),1===e.length?null:e.length>2?e:e[1]}}class u{constructor(t,e,r){this._mapProvider=t,this._map=t.map,this._symbolRegistry=e,this._patternRegistry=r,this._datasetSourceMap=new Map,window._datasetSourceMap=this._datasetSourceMap,this._symbolLayerIds=new Set}createDataset(t){return new c(t)}init(e){var r=this;return t(function*(){var{patternConfigs:t,symbolConfigs:a}=o.getPatternAndSymbolConfigs();yield r.addPatternsAndSymbolsToMap(t,a,e),r._symbolLayerIds.clear(),o.forEachDataset(t=>r._addLayers(t,e)),yield new Promise(t=>r._map.once("idle",t))})()}removeLayer(t){this._map.getLayer(t)&&this._map.removeLayer(t),this._symbolLayerIds.delete(t)}addPatternsAndSymbolsToMap(e,r,a){var i=this;return t(function*(){var t=a.id;return Promise.all([i._mapProvider.addPatternsToMap(e,t,i._patternRegistry),i._mapProvider.addSymbolsToMap(r,a,i._symbolRegistry)])})()}destroy(){var t=new Set;o.forEachDataset(e=>{var r=e.sourceId;this._getLayersUsingSource(r).forEach(t=>this.removeLayer(t)),!t.has(r)&&this._map.getSource(r)&&(this._map.removeSource(r),t.add(r))}),this._datasetSourceMap.clear()}onMapStyleChange(e,r){var a=this;return t(function*(){yield new Promise(t=>a._map.once("idle",t));var{patternConfigs:t,symbolConfigs:i}=o.getPatternAndSymbolConfigs();yield a.addPatternsAndSymbolsToMap(t,i,e),a._symbolLayerIds.clear(),o.forEachDataset(t=>{a._addLayers(t,e),a._applyFeatureFilter(t)}),r.forEach(t=>t.reapply())})()}onMapSizeChange(e){var r=this;return t(function*(){var{patternConfigs:t,symbolConfigs:a}=o.getPatternAndSymbolConfigs();yield r.addPatternsAndSymbolsToMap(t,a,e),o.forEach(t=>{var{fillLayerId:a,symbolLayerId:i}=t;if(i&&r._symbolLayerIds.has(i)&&r._map.getLayer(i)){var s=r._symbolRegistry.getSymbolImageId(t.style,e,!1,r._pixelRatio);s&&r._map.setLayoutProperty(i,"icon-image",s)}else if(a&&r._map.getLayer(a)){var o=r._patternRegistry.getPatternImageId(t.style,e.id,r._pixelRatio);o&&r._map.setPaintProperty(a,"fill-pattern",o)}})})()}addDataset(e,r){var a=this;return t(function*(){var t=o.getDataset(e);yield a.addPatternsAndSymbolsToMap(t.patternConfigs,t.symbolConfigs,r),a._addLayers(t,r)})()}removeDataset(t){var e=o.getDataset(t);if(e){var{sourceId:r,layerIds:a}=e;a.forEach(t=>this.removeLayer(t));var i=o.topLevelDatasets().filter(e=>e.id!==t&&e.sourceId===r).length>0;!i&&this._map.getSource(r)&&this._map.removeSource(r),this._datasetSourceMap.delete(t)}}applyFeatureFilter(t){var e=o.getDataset(t);e&&this._applyFeatureFilter(e)}applyStyle(e,r){var a=this;return t(function*(){var t=o.getDataset(e);t.layerIds.forEach(t=>a.removeLayer(t)),yield a.addPatternsAndSymbolsToMap(t.patternConfigs,t.symbolConfigs,r),a._addLayers(t,r)})()}applyDatasetOpacity(t){var e=o.getDataset(t);e&&this._applyRegistryDatasetOpacity(e)}_applyRegistryDatasetOpacity(t){t.getLayersWithOpacity().forEach(t=>{var{layerIds:e,opacity:r}=t;e.forEach(t=>this._setPaintOpacity(t,r))})}applyGlobalOpacity(){o.forEachDataset(t=>this._applyRegistryDatasetOpacity(t))}setData(t,e){var r=this._datasetSourceMap.get(t);if(r){var a=this._map.getSource(r);a&&"function"==typeof a.setData&&a.setData(e)}}get _pixelRatio(){return this._mapProvider.map.getPixelRatio()}_addLayers(t,e){var r=n(this._map,t,e,this._symbolRegistry,this._patternRegistry,this._pixelRatio);this._datasetSourceMap.set(t.id,r),this._maintainSymbolOrdering(t)}_getFirstSymbolLayerId(){var t,e=this._map.getStyle();if(null==e||!e.layers)return null;var r=e.layers.find(t=>this._symbolLayerIds.has(t.id));return null!==(t=null==r?void 0:r.id)&&void 0!==t?t:null}_maintainSymbolOrdering(t){var e=(t=t.isSublayer?t.parent:t).layerIds.filter(t=>t&&this._map.getLayer(t));e.forEach(t=>{var e;"symbol"===(null===(e=this._map.getLayer(t))||void 0===e?void 0:e.type)?this._symbolLayerIds.add(t):this._symbolLayerIds.delete(t)});var r=this._getFirstSymbolLayerId();r&&e.forEach(t=>{this._symbolLayerIds.has(t)||this._map.moveLayer(t,r)})}applyDatasetVisibility(t){var e=o.getDataset(t);e&&this._applyRegistryDatasetVisibility(e)}_applyRegistryDatasetVisibility(t){t.getLayersWithVisibility().forEach(t=>{var{layerIds:e,visibility:r}=t;e.forEach(t=>{this._map.getLayer(t)&&this._map.setLayoutProperty(t,"visibility",r)})})}applyGlobalVisibility(){o.forEachDataset(t=>this._applyRegistryDatasetVisibility(t))}_applyFeatureFilter(t){t.getLayersWithFilters().forEach(t=>{var{layerIds:e,filter:r}=t;e.forEach(t=>{this._map.getLayer(t)&&this._map.setFilter(t,r)})})}_setPaintOpacity(t,e){var r=this._map.getLayer(t);if(r){var a={line:"line-opacity",symbol:"icon-opacity"}[r.type]||"fill-opacity";this._map.setPaintProperty(t,a,e)}}_getLayersUsingSource(t){var e=this._map.getStyle();return null!=e&&e.layers?e.layers.filter(e=>e.source===t).map(t=>t.id):[]}}export{u as default};
+import t from"@babel/runtime/helpers/asyncToGenerator";import e from"@babel/runtime/helpers/defineProperty";import{g as r,a as i,D as a,h as s,l as o,d as l}from"./im-datasets-plugin.js";import"preact/compat";import"preact/jsx-runtime";function y(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),r.push.apply(r,i)}return r}var n=(t,r,a)=>{var{hasStroke:s,strokeLayerId:o}=r;if(s&&!t.getLayer(o)){var l=function(t){for(var r=1;r<arguments.length;r++){var i=null!=arguments[r]?arguments[r]:{};r%2?y(Object(i),!0).forEach(function(r){e(t,r,i[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(i)):y(Object(i)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(i,e))})}return t}({"line-color":i(r.style.stroke,a),"line-width":r.style.strokeWidth||1,"line-opacity":r.opacity},r.style.strokeDashArray?{"line-dasharray":r.style.strokeDashArray}:{}),n=r.getStrokeSource(l);t.addLayer(n)}},h=(t,e,a,s,o,l)=>{var y,{sourceId:d,source:p}=e;p&&!t.getSource(d)&&t.addSource(d,p);var u=a.id;return((t,e,i,a,s)=>{var{hasSymbol:o,symbolLayerId:l}=e;if(o&&a&&l&&!t.getLayer(l)){var y=a.getSymbolDef(e.style);if(y){var n=a.getSymbolImageId(e.style,i,!1,s);if(n){var h=r(e.style,y);t.addLayer(e.getSymbolSource(n,h,y))}}}})(t,e,a,s,l),function(t,e,r,a){var s=arguments.length>4&&void 0!==arguments[4]?arguments[4]:1,{hasFill:o,fillLayerId:l}=e;if(o&&l&&!t.getLayer(l)){var y=a.getPatternImageId(e.style,r,s),n=y?{"fill-pattern":y,"fill-opacity":e.opacity}:{"fill-color":i(e.style.fill,r),"fill-opacity":e.opacity};t.addLayer(e.getFillSource(n))}}(t,e,u,o,l),n(t,e,u),null!==(y=e.sublayers)&&void 0!==y&&y.length?(e.sublayers.forEach(e=>{h(t,e,a,s,o,l)}),d):e.isSublayer?void 0:d},d=t=>{var[e,r]=t,i=(t=>t<=.25?"left":t>=.75?"right":"")(e),a=(t=>t<=.25?"top":t>=.75?"bottom":"")(r);return a+(i&&a?"-":"")+i||"center"};function p(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),r.push.apply(r,i)}return r}function u(t){for(var r=1;r<arguments.length;r++){var i=null!=arguments[r]?arguments[r]:{};r%2?p(Object(i),!0).forEach(function(r){e(t,r,i[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(i)):p(Object(i)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(i,e))})}return t}class c extends a{get visibility(){return this.visible?"visible":"none"}get fillLayerId(){return this.hasSublayers||this.hasSymbol?null:this.hasFill?this.id:null}get strokeLayerId(){return this.hasSublayers||this.hasSymbol?null:this.hasStroke?this.hasFill?"".concat(this.id,"-stroke"):this.id:null}get symbolLayerId(){return this.hasSublayers?null:this.hasSymbol?this.id:null}get layerIds(){return this.hasSublayers?this.sublayers.flatMap(t=>t.layerIds).filter(Boolean):[this.symbolLayerId,this.fillLayerId,this.strokeLayerId].filter(Boolean)}getLayersWithValue(t){var e=arguments.length>1&&void 0!==arguments[1]&&arguments[1],r=[];if(!1===e||this[e]){var i=[this.symbolLayerId,this.fillLayerId,this.strokeLayerId].filter(Boolean);if(i.length){var a=this[t];r.push({layerIds:i,[t]:a})}}return this.hasSublayers&&this.sublayers.forEach(i=>{(!1===e||i[e])&&r.push(i.getLayersWithValue(t)[0])}),r}getLayersWithVisibility(){return this.getLayersWithValue("visibility")}getLayersWithOpacity(){return this.getLayersWithValue("opacity")}getLayersWithFilters(){return this.getLayersWithValue("filter","hasHiddenFeatures")}get sourceId(){if(this.isSublayer)return this.parent.sourceId;if(this.hasDynamicGeoJSON)return this.dynamicGeoJSON.sourceId;if(this.tiles){var t=Array.isArray(this.tiles)?this.tiles.join(","):this.tiles;return"tiles-".concat(s(t))}return this.geojson?"string"==typeof this.geojson?"geojson-".concat(s(this.geojson)):"geojson-".concat(this.id):"source-".concat(this.id)}_geojsonIdStrategy(){var t;return this.idProperty?{promoteId:this.idProperty}:this.generateIds?{generateId:!0}:(null!==(t=this.geojson)&&void 0!==t&&null!==(t=t.features)&&void 0!==t&&t.some(t=>"string"==typeof t.id)&&o.warn('Dataset "'.concat(this.id,'" has GeoJSON features with string native IDs. MapLibre only surfaces integer native feature IDs through queryRenderedFeatures. Use idProperty to promote a string property instead.')),{})}get source(){if(this.hasDynamicGeoJSON)return this.dynamicGeoJSON.source;if(this.tiles){var t={type:"vector",tiles:this.tiles,minzoom:this.minZoom||0,maxzoom:this.maxZoom||22};return this.idProperty&&this.sourceLayer&&(t.promoteId={[this.sourceLayer]:this.idProperty}),t}return this.geojson?u({type:"geojson",data:this.geojson},this._geojsonIdStrategy()):null}getSymbolSource(t,e,r){return u({id:this.symbolLayerId,type:"symbol",source:this.sourceId,"source-layer":this.sourceLayer,minzoom:this.minZoom,maxzoom:this.maxZoom,layout:{visibility:this.visibility,"icon-image":t,"icon-anchor":d(e||(null==r?void 0:r.anchor)||[.5,.5]),"icon-allow-overlap":!0}},this.filter?{filter:this.filter}:{})}getFillSource(t){return u({id:this.fillLayerId,type:"fill",source:this.sourceId,"source-layer":this.sourceLayer,minzoom:this.minZoom,maxzoom:this.maxZoom,layout:{visibility:this.visibility},paint:t},this.filter?{filter:this.filter}:{})}getStrokeSource(t){return u({id:this.strokeLayerId,type:"line",source:this.sourceId,"source-layer":this.sourceLayer,minzoom:this.minZoom,maxzoom:this.maxZoom,layout:{visibility:this.visibility},paint:t},this.filter?{filter:this.filter}:{})}get _hiddenFeaturesIdExpression(){return this.hasDynamicGeoJSON?this.dynamicGeoJSON.hiddenFeaturesIdExpression:this.idProperty?["to-string",["get",this.idProperty]]:["to-string",["id"]]}get _hiddenFeaturesFilter(){var t,e=null===(t=this.hiddenFeatures)||void 0===t?void 0:t.filter(t=>-1!==t);return null!=e&&e.length?["!",["in",this._hiddenFeaturesIdExpression,["literal",e.map(String)]]]:null}get filter(){var t,e=["all"];null!==(t=this.parent)&&void 0!==t&&t.filter&&e.push(this.parent.filter),this._datasetDefinition.filter&&e.push(this._datasetDefinition.filter);var r=this._hiddenFeaturesFilter;return r&&e.push(r),1===e.length?null:e.length>2?e:e[1]}}class m{constructor(t,e,r){this._mapProvider=t,this._map=t.map,this._symbolRegistry=e,this._patternRegistry=r,this._datasetSourceMap=new Map,window._datasetSourceMap=this._datasetSourceMap,this._symbolLayerIds=new Set}createDataset(t){return new c(t)}init(e){var r=this;return t(function*(){var{patternConfigs:t,symbolConfigs:i}=l.getPatternAndSymbolConfigs();yield r.addPatternsAndSymbolsToMap(t,i,e),r._symbolLayerIds.clear(),l.forEachDataset(t=>r._addLayers(t,e)),yield new Promise(t=>r._map.once("idle",t))})()}removeLayer(t){this._map.getLayer(t)&&this._map.removeLayer(t),this._symbolLayerIds.delete(t)}addPatternsAndSymbolsToMap(e,r,i){var a=this;return t(function*(){var t=i.id;return Promise.all([a._mapProvider.addPatternsToMap(e,t,a._patternRegistry),a._mapProvider.addSymbolsToMap(r,i,a._symbolRegistry)])})()}destroy(){var t=new Set;l.forEachDataset(e=>{var r=e.sourceId;this._getLayersUsingSource(r).forEach(t=>this.removeLayer(t)),!t.has(r)&&this._map.getSource(r)&&(this._map.removeSource(r),t.add(r))}),this._datasetSourceMap.clear()}onMapStyleChange(e,r){var i=this;return t(function*(){yield new Promise(t=>i._map.once("idle",t));var{patternConfigs:t,symbolConfigs:a}=l.getPatternAndSymbolConfigs();yield i.addPatternsAndSymbolsToMap(t,a,e),i._symbolLayerIds.clear(),l.forEachDataset(t=>{i._addLayers(t,e),i._applyFeatureFilter(t)}),r.forEach(t=>t.reapply())})()}onMapSizeChange(e){var r=this;return t(function*(){var{patternConfigs:t,symbolConfigs:i}=l.getPatternAndSymbolConfigs();yield r.addPatternsAndSymbolsToMap(t,i,e),l.forEach(t=>{var{fillLayerId:i,symbolLayerId:a}=t;if(a&&r._symbolLayerIds.has(a)&&r._map.getLayer(a)){var s=r._symbolRegistry.getSymbolImageId(t.style,e,!1,r._pixelRatio);s&&r._map.setLayoutProperty(a,"icon-image",s)}else if(i&&r._map.getLayer(i)){var o=r._patternRegistry.getPatternImageId(t.style,e.id,r._pixelRatio);o&&r._map.setPaintProperty(i,"fill-pattern",o)}})})()}addDataset(e,r){var i=this;return t(function*(){var t=l.getDataset(e);yield i.addPatternsAndSymbolsToMap(t.patternConfigs,t.symbolConfigs,r),i._addLayers(t,r)})()}removeDataset(t){var e=l.getDataset(t);if(e){var{sourceId:r,layerIds:i}=e;i.forEach(t=>this.removeLayer(t));var a=l.topLevelDatasets().filter(e=>e.id!==t&&e.sourceId===r).length>0;!a&&this._map.getSource(r)&&this._map.removeSource(r),this._datasetSourceMap.delete(t)}}applyFeatureFilter(t){var e=l.getDataset(t);e&&this._applyFeatureFilter(e)}applyStyle(e,r){var i=this;return t(function*(){var t=l.getDataset(e);t.layerIds.forEach(t=>i.removeLayer(t)),yield i.addPatternsAndSymbolsToMap(t.patternConfigs,t.symbolConfigs,r),i._addLayers(t,r)})()}applyDatasetOpacity(t){var e=l.getDataset(t);e&&this._applyRegistryDatasetOpacity(e)}_applyRegistryDatasetOpacity(t){t.getLayersWithOpacity().forEach(t=>{var{layerIds:e,opacity:r}=t;e.forEach(t=>this._setPaintOpacity(t,r))})}applyGlobalOpacity(){l.forEachDataset(t=>this._applyRegistryDatasetOpacity(t))}setData(t,e){var r=this._datasetSourceMap.get(t);if(r){var i=this._map.getSource(r);i&&"function"==typeof i.setData&&i.setData(e)}}get _pixelRatio(){return this._mapProvider.map.getPixelRatio()}_addLayers(t,e){var r=h(this._map,t,e,this._symbolRegistry,this._patternRegistry,this._pixelRatio);this._datasetSourceMap.set(t.id,r),this._maintainSymbolOrdering(t)}_getFirstSymbolLayerId(){var t,e=this._map.getStyle();if(null==e||!e.layers)return null;var r=e.layers.find(t=>this._symbolLayerIds.has(t.id));return null!==(t=null==r?void 0:r.id)&&void 0!==t?t:null}_maintainSymbolOrdering(t){var e=(t=t.isSublayer?t.parent:t).layerIds.filter(t=>t&&this._map.getLayer(t));e.forEach(t=>{var e;"symbol"===(null===(e=this._map.getLayer(t))||void 0===e?void 0:e.type)?this._symbolLayerIds.add(t):this._symbolLayerIds.delete(t)});var r=this._getFirstSymbolLayerId();r&&e.forEach(t=>{this._symbolLayerIds.has(t)||this._map.moveLayer(t,r)})}applyDatasetVisibility(t){var e=l.getDataset(t);e&&this._applyRegistryDatasetVisibility(e)}_applyRegistryDatasetVisibility(t){t.getLayersWithVisibility().forEach(t=>{var{layerIds:e,visibility:r}=t;e.forEach(t=>{this._map.getLayer(t)&&this._map.setLayoutProperty(t,"visibility",r)})})}applyGlobalVisibility(){l.forEachDataset(t=>this._applyRegistryDatasetVisibility(t))}_applyFeatureFilter(t){t.getLayersWithFilters().forEach(t=>{var{layerIds:e,filter:r}=t;e.forEach(t=>{this._map.getLayer(t)&&this._map.setFilter(t,r)})})}_setPaintOpacity(t,e){var r=this._map.getLayer(t);if(r){var i={line:"line-opacity",symbol:"icon-opacity"}[r.type]||"fill-opacity";this._map.setPaintProperty(t,i,e)}}_getLayersUsingSource(t){var e=this._map.getStyle();return null!=e&&e.layers?e.layers.filter(e=>e.source===t).map(t=>t.id):[]}}export{m as default};