@defra/interactive-map 0.0.21-alpha → 0.0.23-alpha

package/docs/api.md

@@ -248,6 +248,32 @@ new InteractiveMap('map', {
 })
 ```
 
+#### MapLibre provider options
+
+`maplibreProvider()` accepts an optional config object.
+
+##### `workerUrl`
+**Type:** `string`
+**Default:** `undefined`
+
+URL to a separately hosted MapLibre worker file (`maplibre-gl-csp-worker.js`). Required when running under a Content Security Policy that blocks `blob:` worker URLs — a common restriction on government and enterprise platforms.
+
+When set, MapLibre loads its rendering worker from this URL instead of generating an inline blob, so your CSP only needs `worker-src 'self'` rather than `worker-src blob:`.
+
+The worker file ships with maplibre-gl and must be served from your own origin (copy from `node_modules/maplibre-gl/dist/maplibre-gl-csp-worker.js`).
+
+**ESM:**
+
+```js
+maplibreProvider({ workerUrl: '/your-assets-path/maplibre-gl-csp-worker.js' })
+```
+
+**UMD:**
+
+```js
+defra.maplibreProvider({ workerUrl: '/your-assets-path/maplibre-gl-csp-worker.js' })
+```
+
 ---
 
 ### `mapSize`
@@ -277,14 +303,27 @@ See [MapStyleConfig](./api/map-style-config.md) for full details.
 
 ---
 
-### `mapViewParamKey`
+### `mapViewQueryParam`
 **Type:** `string`
 **Default:** `'mv'`
 
-URL query parameter key used to persist map visibility state. Override if the default value clashes with an existing parameter on your page.
+URL query parameter used to control fullscreen/hybrid/buttonFirst state. Override if the default value clashes with an existing parameter on your page.
 
 ---
 
+### `urlPosition`
+**Type:** `'sync' | 'readOnly' | 'none'`
+**Default:** `'sync'`
+
+Controls how map center and zoom interact with the page URL.
+
+| Value | Behaviour |
+|---|---|
+| `'sync'` | Reads center/zoom from the URL on load and writes back on pan/zoom — enables bookmarking and sharing the current map view |
+| `'readOnly'` | Seeds the initial view from the URL but never writes back |
+| `'none'` | Ignores the URL entirely — use when you don't want the user's pan/zoom to be persisted or shared |
+---
+
 ### `markers`
 **Type:** `MarkerConfig[]`
 
@@ -304,8 +343,6 @@ App-wide defaults for symbol and marker appearance.
 | `symbol` | `'pin'` |
 | `backgroundColor` | `'#ca3535'` |
 | `foregroundColor` | `'#ffffff'` |
-| `haloWidth` | `'1'` |
-| `selectedWidth` | `'6'` |
 
 ```js
 new InteractiveMap('map', {
@@ -525,6 +562,30 @@ interactiveMap.addMarker('home', [-0.1276, 51.5074], { backgroundColor: '#1d70b8
 
 ---
 
+### `updateMarker(id, options)`
+
+Update an existing marker's properties. Wont do anything if the marker id is not found.
+
+Merges the provided options into the existing marker — unspecified properties are preserved. Pass `coords` inside `options` to move the marker to new coordinates.
+
+| Parameter | Type | Description |
+|-----------|------|-------------|
+| `id` | `string` | Marker identifier to update |
+| `options` | `MarkerOptions & { coords?: [number, number] }` | Properties to merge into the marker |
+
+```js
+// Show the label bubble on an existing marker
+interactiveMap.updateMarker('home', { showLabel: true })
+
+// Move the marker to new coordinates
+interactiveMap.updateMarker('home', { coords: [-0.1276, 51.5074] })
+
+// Change colour and move simultaneously
+interactiveMap.updateMarker('home', { coords: [-0.1276, 51.5074], backgroundColor: '#d4351c' })
+```
+
+---
+
 ### `removeMarker(id)`
 
 Remove a marker from the map.

package/docs/assets/css/{docusaurus.css → docusaurus.scss}

@@ -9,6 +9,10 @@
   background-color: #f4f8fb;
 }
 
+.govuk-template__body.app-homepage #main-content {
+  background-color: #ffffff;
+}
+
 .app-section--features {
   background-color: #f4f8fb;
   border-bottom: 1px solid #8eb8dc;
@@ -26,6 +30,19 @@
   }
 }
 
+/* Override prose-scope heading sizes to match pre-theme-downgrade for homepage sections. */
+@import 'govuk-frontend/dist/govuk/base';
+
+.govuk-template .app-prose-scope .app-section h2 {
+  @include govuk-font($size: 36, $weight: bold);
+  @include govuk-responsive-margin(6, 'bottom');
+}
+
+.govuk-template .app-prose-scope .app-section h3 {
+  @include govuk-font($size: 24, $weight: bold);
+  @include govuk-responsive-margin(4, 'bottom');
+}
+
 /* Hero image */
 .govuk-template--rebranded .app-masthead .govuk-grid-row {
   @media (min-width: 48.125em) {
@@ -35,7 +52,7 @@
 
 .govuk-template--rebranded .app-masthead .govuk-grid-column-one-third-from-desktop {
   @media (min-width: 48.125em) {
-    background-image: url('/images/hero.png');
+    background-image: url('https://defra.github.io/interactive-map/images/hero.png');
     background-repeat: no-repeat;
     background-position: center bottom;
     background-size: 220px;
@@ -103,17 +120,6 @@
   inset: 0;
 }
 
-/* Fix sticky footer: the theme gives flex: 1 0 auto to any govuk-width-container
-   that is a direct child of govuk-template__body-inner, but the phase banner div
-   also matches that selector and grows incorrectly on short pages. Move the
-   flex-grow to <main> instead so only the content area stretches. */
-.govuk-template--rebranded .govuk-template__body-inner > .govuk-width-container {
-  flex: none;
-}
-
-.govuk-template--rebranded .govuk-main-wrapper {
-  flex: 1 0 auto;
-}
 
 /* GOV.UK tabs — enhanced styles for all devices; React manages active state.
    Extra specificity via .app-prose-scope required to override the theme. */

package/docs/examples/index.mdx

@@ -2,11 +2,13 @@ import useBaseUrl from '@docusaurus/useBaseUrl'
 import basicMapImg from '../assets/images/basic-map.jpg'
 import buttonFirstImg from '../assets/images/button-first.jpg'
 import markerPanelImg from '../assets/images/marker-panel.jpg'
+import toggleMarkerLabelImg from '../assets/images/toggle-marker-label.jpg'
 
 export function ExampleCards() {
   const basicHref = useBaseUrl('/examples/basic-map')
   const buttonHref = useBaseUrl('/examples/button-map')
   const interactHref = useBaseUrl('/examples/add-marker-with-panel')
+  const toggleMarkerLabelHref = useBaseUrl('/examples/toggle-marker-label')
 
   return (
     <div className='govuk-grid-row'>
@@ -40,6 +42,16 @@ export function ExampleCards() {
           </div>
         </div>
       </div>
+      <div className='govuk-grid-column-one-half'>
+        <div className='app-example-card'>
+          <img src={toggleMarkerLabelImg} alt='' />
+          <div className='app-example-card__body'>
+            <h2 className='govuk-heading-m'>
+              <a href={toggleMarkerLabelHref}>Toggle marker label on click</a>
+            </h2>
+          </div>
+        </div>
+      </div>
     </div>
   )
 }

package/docs/examples/toggle-marker-label.mdx

@@ -0,0 +1,89 @@
+import DemoMapToggleMarkerLabel from '../../demo/DemoMapToggleMarkerLabel.js'
+import CodeTabs from '../../demo/js/codeTabs.js'
+
+# Toggle marker label on click
+
+Add a marker with a hidden label, then use the interact plugin to show the label when the marker is selected and hide it when the user clicks elsewhere.
+
+<DemoMapToggleMarkerLabel />
+
+<CodeTabs tabs={[
+  {
+    label: 'ESM',
+    language: 'js',
+    code: `
+      import InteractiveMap from '@defra/interactive-map'
+      import maplibreProvider from '@defra/interactive-map/providers/maplibre'
+      import createInteractPlugin from '@defra/interactive-map/plugins/interact'
+
+      const interactPlugin = createInteractPlugin({
+        deselectOnClickOutside: true
+      })
+
+      const map = new InteractiveMap('my-map', {
+        behaviour: 'inline',
+        mapProvider: maplibreProvider(),
+        mapStyle: {
+          url: 'https://your-tile-url/style.json',
+          attribution: 'Your tile attribution'
+        },
+        center: [-2.96, 54.43],
+        zoom: 15,
+        containerHeight: '500px',
+        plugins: [interactPlugin]
+      })
+
+      map.on('map:ready', () => {
+        map.addMarker('my-marker', [-2.96, 54.43], {
+          label: 'My location',
+          showLabel: false
+        })
+        interactPlugin.enable()
+      })
+
+      map.on('interact:selectionchange', ({ selectedMarkers }) => {
+        map.updateMarker('my-marker', { showLabel: selectedMarkers.includes('my-marker') })
+      })
+    `
+  },
+  {
+    label: 'UMD',
+    language: 'html',
+    code: `
+      <script src="/your-assets-path/interactive-map/index.js"></script>
+      <script src="/your-assets-path/maplibre-provider/index.js"></script>
+      <script src="/your-assets-path/interact-plugin/index.js"></script>
+
+      <script>
+      const interactPlugin = defra.interactPlugin({
+        deselectOnClickOutside: true
+      })
+
+      const map = new defra.InteractiveMap('my-map', {
+        behaviour: 'inline',
+        mapProvider: defra.maplibreProvider(),
+        mapStyle: {
+          url: 'https://your-tile-url/style.json',
+          attribution: 'Your tile attribution'
+        },
+        center: [-2.96, 54.43],
+        zoom: 15,
+        containerHeight: '500px',
+        plugins: [interactPlugin]
+      })
+
+      map.on('map:ready', () => {
+        map.addMarker('my-marker', [-2.96, 54.43], {
+          label: 'My location',
+          showLabel: false
+        })
+        interactPlugin.enable()
+      })
+
+      map.on('interact:selectionchange', ({ selectedMarkers }) => {
+        map.updateMarker('my-marker', { showLabel: selectedMarkers.includes('my-marker') })
+      })
+      </script>
+    `
+  }
+]} />

package/docs/plugins/datasets.md

@@ -2,7 +2,7 @@
 
 The datasets plugin renders GeoJSON and vector tile datasets on the map, with support for polygon, line, and symbol (point) layer types, sublayer style rules, layer visibility toggling, a key panel, and runtime style and data updates.
 
-## Usage
+## ESM usage
 
 ```js
 import createDatasetsPlugin from '@defra/interactive-map/plugins/datasets'
@@ -33,6 +33,41 @@ const interactiveMap = new InteractiveMap({
 })
 ```
 
+## UMD usage
+
+Copy `plugins/beta/datasets/dist/umd/maplibre/` to `/your-assets-path/plugins/beta/datasets/umd/maplibre/`, then load the script tag. The MapLibre adapter is included — no `layerAdapter` config is needed.
+
+```html
+<script defer src="/your-assets-path/plugins/beta/datasets/umd/maplibre/index.js"></script>
+```
+
+```js
+const datasetsPlugin = defra.datasetsMaplibrePlugin({
+  datasets: [
+    {
+      id: 'my-parcels',
+      label: 'My parcels',
+      geojson: 'https://example.com/api/parcels',
+      minZoom: 10,
+      maxZoom: 24,
+      showInKey: true,
+      showInMenu: true,
+      style: {
+        stroke: '#d4351c',
+        strokeWidth: 2,
+        fill: 'transparent'
+      }
+    }
+  ]
+})
+```
+
+> [!NOTE]
+> **GOV.UK Prototype Kit** — skip the copy step. The file is served automatically. Use this path instead:
+> ```html
+> <script defer src="/plugin-assets/%40defra%2Finteractive-map/plugins/beta/datasets/dist/umd/maplibre/index.js"></script>
+> ```
+
 ## Options
 
 Options are passed to the factory function when creating the plugin.
@@ -41,6 +76,9 @@ Options are passed to the factory function when creating the plugin.
 
 ### `layerAdapter`
 
+> [!NOTE]
+> UMD users using the `datasetsMaplibrePlugin` bundle do not need to set this — the MapLibre adapter is pre-configured.
+
 **Type:** `LayerAdapter`
 **Required**
 

package/docs/plugins/interact.md

@@ -85,9 +85,11 @@ layers: [
 |----------|------|-------------|
 | `layerId` | `string` | **Required.** The map layer identifier to enable selection on |
 | `idProperty` | `string` | Property name used as the feature's unique identifier. If omitted, features are matched by index |
+| `labelProperty` | `string` | Property name used as the feature's display label in the keyboard-accessible listbox. **Required for features to appear in keyboard navigation** |
 | `selectedStroke` | `string` | Overrides the selection stroke colour for this layer. Defaults to `MapStyleConfig.selectedColor` |
 | `selectedFill` | `string` | Overrides the selection fill colour for this layer. Defaults to `transparent` |
 | `selectedStrokeWidth` | `number` | Overrides the selection stroke width for this layer. Defaults to `3` |
+| `activeStroke` | `string` | Overrides the keyboard cursor ring colour for this layer. Defaults to `MapStyleConfig.activeColor` |
 
 #### Finding layer IDs
 
@@ -109,14 +111,6 @@ When `true`, clicking additional features adds them to the selection rather than
 
 ---
 
-### `contiguous`
-**Type:** `boolean`
-**Default:** `false`
-
-When `true`, only features that touch or overlap the existing selection can be added. Uses spatial intersection to determine contiguity. Works with polygons, lines, and points.
-
----
-
 ### `deselectOnClickOutside`
 **Type:** `boolean`
 **Default:** `false`
@@ -207,7 +201,7 @@ interactPlugin.disable()
 
 ### `clear()`
 
-Clear all selected features and markers, and remove the location marker.
+Clear all selected features and markers.
 
 ```js
 interactPlugin.clear()
@@ -350,8 +344,7 @@ Emitted whenever the selected features or selected markers change.
   ],
   selectedMarkers: ['...'],  // array of selected marker IDs
   selectionBounds: [west, south, east, north] | null,
-  canMerge: boolean,  // true when all selected features are contiguous
-  canSplit: boolean   // true when exactly one Polygon or MultiPolygon is selected
+  contiguous: boolean  // true when 2+ features are selected and all form a single contiguous group
 }
 ```
 

package/docusaurus.config.cjs

@@ -45,7 +45,7 @@ const config = {
       return {
         name: 'custom-css',
         getClientModules() {
-          return [require.resolve('./docs/assets/css/docusaurus.css')];
+          return [require.resolve('./docs/assets/css/docusaurus.scss')];
         },
       };
     },
@@ -92,6 +92,7 @@ const config = {
             { 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: 'Toggle marker label on click', href: '/examples/toggle-marker-label' },
           ],
         },
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@defra/interactive-map",
-  "version": "0.0.21-alpha",
+  "version": "0.0.23-alpha",
   "description": "An accessible map component",
   "repository": {
     "type": "git",
@@ -41,12 +41,10 @@
       "require": "./plugins/interact/dist/umd/index.js"
     },
     "./plugins/datasets": {
-      "import": "./plugins/beta/datasets/dist/esm/index.js",
-      "require": "./plugins/beta/datasets/dist/umd/index.js"
+      "import": "./plugins/beta/datasets/dist/esm/index.js"
     },
     "./plugins/datasets/adapters/maplibre": {
-      "import": "./plugins/beta/datasets/adapters/maplibre/dist/esm/index.js",
-      "require": "./plugins/beta/datasets/adapters/maplibre/dist/umd/index.js"
+      "import": "./plugins/beta/datasets/dist/adapters/maplibre/esm/index.js"
     },
     "./plugins/map-styles": {
       "import": "./plugins/beta/map-styles/dist/esm/index.js",
@@ -131,11 +129,13 @@
     "@babel/plugin-transform-runtime": "^7.29.0",
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
-    "@defra/docusaurus-theme-govuk": "^0.0.19-alpha",
-    "@docusaurus/core": "^3.9.2",
-    "@docusaurus/module-type-aliases": "^3.9.2",
-    "@docusaurus/plugin-content-docs": "^3.9.2",
-    "@docusaurus/tsconfig": "^3.9.2",
+    "@defra/docusaurus-theme-govuk": "^0.0.22-alpha",
+    "@docusaurus/core": "^3.10.1",
+    "@docusaurus/module-type-aliases": "^3.10.1",
+    "@docusaurus/plugin-content-docs": "^3.10.1",
+    "@docusaurus/theme-common": "^3.10.1",
+    "@docusaurus/tsconfig": "^3.10.1",
+    "@easyops-cn/docusaurus-search-local": "^0.55.1",
     "@esri/arcgis-rest-request": "^4.7.3",
     "@mapbox/mapbox-gl-draw": "^1.5.0",
     "@mdx-js/react": "^3.1.1",
@@ -208,8 +208,6 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.28.6",
-    "@docusaurus/theme-common": "^3.9.2",
-    "@easyops-cn/docusaurus-search-local": "^0.55.0",
     "@turf/area": "^7.2.0",
     "@turf/bbox": "^7.3.4",
     "@turf/bearing": "^7.3.3",

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

@@ -0,0 +1 @@
+import e from"@babel/runtime/helpers/asyncToGenerator";import t from"@babel/runtime/helpers/defineProperty";var r=(e,t,r,a,i)=>{if(e.getLayer(t)){var o=((e,t,r)=>{if(!r||0===r.length)return e;var a=["!",["in",t?["to-string",["get",t]]:["to-string",["id"]],["literal",r.map(String)]]];return e?["all",e,a]:a})(r,a,i);e.setFilter(t,o)}},a=e=>!(!e.fillPattern&&!e.fillPatternSvgContent),i=e=>"string"==typeof e.geojson&&!!e.idProperty&&"function"==typeof e.transformRequest,o=e=>{var t=0;for(var r of e)t=Math.trunc((t<<5)-t+r.codePointAt(0));return Math.abs(t).toString(36)},l=e=>{if(e.tiles){var t=Array.isArray(e.tiles)?e.tiles.join(","):e.tiles;return"tiles-".concat(o(t))}return e.geojson?i(e)?"geojson-dynamic-".concat(e.id):"string"==typeof e.geojson?"geojson-".concat(o(e.geojson)):"geojson-".concat(e.id):"source-".concat(e.id)},s=e=>{if((e=>!!e.symbol)(e))return{fillLayerId:null,strokeLayerId:null,symbolLayerId:e.id};var t=!!e.fill&&"transparent"!==e.fill||a(e),r=!!e.stroke,i=t?e.id:null,o=null;return r&&(o=t?"".concat(e.id,"-stroke"):e.id),{fillLayerId:i,strokeLayerId:o,symbolLayerId:null}},n=(e,t)=>({fillLayerId:"".concat(e,"-").concat(t),strokeLayerId:"".concat(e,"-").concat(t,"-stroke"),symbolLayerId:"".concat(e,"-").concat(t,"-symbol")}),y=e=>{var t;if(null!==(t=e.sublayers)&&void 0!==t&&t.length)return e.sublayers.flatMap(t=>{var{fillLayerId:r,strokeLayerId:a,symbolLayerId:i}=n(e.id,t.id);return[a,r,i]});var{fillLayerId:r,strokeLayerId:a,symbolLayerId:i}=s(e);return[a,r,i].filter(Boolean)},d=(e,t)=>{if(!e)return null;if("string"==typeof e)return e.trim();if("object"==typeof e){if(t&&e[t])return e[t];var r=Object.values(e)[0];return null!=r?r:null}return null},m=["stroke","fill","fillPattern","fillPatternSvgContent","symbol","symbolSvgContent"];function p(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,a)}return r}var u=(e,t)=>{return"symbolDescription"in t?t.symbolDescription:(r=t,m.some(e=>e in r)?void 0:e.symbolDescription);var r},c=(e,r)=>{var a,i,o,l,s,n,y,d,m,c,f,b,v,g,h,_,L,P=r.style||{},S=(_=e.filter,L=r.filter,_&&L?["all",_,L]:L||_||null);return function(e){for(var r=1;r<arguments.length;r++){var a=null!=arguments[r]?arguments[r]:{};r%2?p(Object(a),!0).forEach(function(r){t(e,r,a[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):p(Object(a)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))})}return e}({id:r.id,label:r.label,stroke:null!==(a=P.stroke)&&void 0!==a?a:e.stroke,strokeWidth:null!==(i=P.strokeWidth)&&void 0!==i?i:e.strokeWidth,strokeDashArray:null!==(o=P.strokeDashArray)&&void 0!==o?o:e.strokeDashArray,opacity:null!==(l=P.opacity)&&void 0!==l?l:e.opacity,keySymbolShape:null!==(s=P.keySymbolShape)&&void 0!==s?s:e.keySymbolShape,symbolDescription:u(e,P),showInKey:null!==(n=r.showInKey)&&void 0!==n?n:e.showInKey,showInMenu:null!==(y=r.showInMenu)&&void 0!==y&&y,filter:S,minZoom:e.minZoom,maxZoom:e.maxZoom,symbol:null!==(d=P.symbol)&&void 0!==d?d:e.symbol,symbolSvgContent:null!==(m=P.symbolSvgContent)&&void 0!==m?m:e.symbolSvgContent,symbolViewBox:null!==(c=P.symbolViewBox)&&void 0!==c?c:e.symbolViewBox,symbolAnchor:null!==(f=P.symbolAnchor)&&void 0!==f?f:e.symbolAnchor,symbolBackgroundColor:null!==(b=P.symbolBackgroundColor)&&void 0!==b?b:e.symbolBackgroundColor,symbolForegroundColor:null!==(v=P.symbolForegroundColor)&&void 0!==v?v:e.symbolForegroundColor,symbolHaloWidth:null!==(g=P.symbolHaloWidth)&&void 0!==g?g:e.symbolHaloWidth,symbolGraphic:null!==(h=P.symbolGraphic)&&void 0!==h?h:e.symbolGraphic},((e,t)=>{var r,a;return t.fillPattern||t.fillPatternSvgContent?{fillPattern:t.fillPattern,fillPatternSvgContent:t.fillPatternSvgContent,fillPatternForegroundColor:null!==(r=t.fillPatternForegroundColor)&&void 0!==r?r:e.fillPatternForegroundColor,fillPatternBackgroundColor:null!==(a=t.fillPatternBackgroundColor)&&void 0!==a?a:e.fillPatternBackgroundColor}:"fill"in t?{fill:t.fill}:{fill:e.fill,fillPattern:e.fillPattern,fillPatternSvgContent:e.fillPatternSvgContent,fillPatternForegroundColor:e.fillPatternForegroundColor,fillPatternBackgroundColor:e.fillPatternBackgroundColor}})(e,P))},f=(e,t)=>e.flatMap(e=>{var t,r=a(e)?[e]:[];return null!==(t=e.sublayers)&&void 0!==t&&t.length&&e.sublayers.forEach(t=>{var i=c(e,t);a(i)&&r.push(i)}),r}),b=e=>!(!e.symbol&&!e.symbolSvgContent),v=e=>{var[t,r]=e,a=(e=>e<=.25?"left":e>=.75?"right":"")(t),i=(e=>e<=.25?"top":e>=.75?"bottom":"")(r);return i+(a&&i?"-":"")+a||"center"},g=e=>e.flatMap(e=>{var t,r=b(e)?[e]:[];return null!==(t=e.sublayers)&&void 0!==t&&t.length&&e.sublayers.forEach(t=>{var a=c(e,t);b(a)&&r.push(a)}),r});function h(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter(function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable})),r.push.apply(r,a)}return r}function _(e){for(var r=1;r<arguments.length;r++){var a=null!=arguments[r]?arguments[r]:{};r%2?h(Object(a),!0).forEach(function(r){t(e,r,a[r])}):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):h(Object(a)).forEach(function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))})}return e}var L=(e,t,r,i,o,l,s)=>{var{mapStyleId:n,patternRegistry:y,pixelRatio:m=1}=s;if(r&&!e.getLayer(r)&&(t.fill||a(t))){var p=a(t)?y.getPatternImageId(t,n,m):null,u=p?{"fill-pattern":p,"fill-opacity":t.opacity||1}:{"fill-color":d(t.fill,n),"fill-opacity":t.opacity||1};e.addLayer(_({id:r,type:"fill",source:i,"source-layer":o,minzoom:t.minZoom,maxzoom:t.maxZoom,layout:{visibility:l},paint:u},t.filter?{filter:t.filter}:{}))}},P=(e,t,r,a,i,o,l)=>{r&&t.stroke&&!e.getLayer(r)&&e.addLayer(_({id:r,type:"line",source:a,"source-layer":i,minzoom:t.minZoom,maxzoom:t.maxZoom,layout:{visibility:o},paint:_({"line-color":d(t.stroke,l),"line-width":t.strokeWidth||1,"line-opacity":t.opacity||1},t.strokeDashArray?{"line-dasharray":t.strokeDashArray}:{})},t.filter?{filter:t.filter}:{}))},S=(e,t,r,a,i,o,l)=>{var{mapStyle:s,symbolRegistry:n,pixelRatio:y}=l;if(r&&!e.getLayer(r)){var d=n.getSymbolDef(t);if(d){var m=n.getSymbolImageId(t,s,!1,y);if(m){var p=((e,t)=>{var r;return e.symbolAnchor?e.symbolAnchor:null!==(r=null==t?void 0:t.anchor)&&void 0!==r?r:[.5,.5]})(t,d);e.addLayer(_({id:r,type:"symbol",source:a,"source-layer":i,minzoom:t.minZoom,maxzoom:t.maxZoom,layout:{visibility:o,"icon-image":m,"icon-anchor":v(p),"icon-allow-overlap":!0}},t.filter?{filter:t.filter}:{}))}}}},I=(e,t,r,a,i,o)=>{var l,{mapStyle:s,symbolRegistry:y,patternRegistry:d,pixelRatio:m}=o,p=s.id,u=c(t,r),{fillLayerId:f,strokeLayerId:v,symbolLayerId:g}=n(t.id,r.id),h="hidden"===t.visibility,_="hidden"===(null===(l=t.sublayerVisibility)||void 0===l?void 0:l[r.id]),I=h||_?"none":"visible";b(u)&&y?S(e,u,g,a,i,I,{mapStyle:s,symbolRegistry:y,pixelRatio:m}):(L(e,u,f,a,i,I,{mapStyleId:p,patternRegistry:d,pixelRatio:m}),P(e,u,v,a,i,I,p))},R=(e,t,r,a,o,n)=>{var y,d,m=r.id,p=l(t);((e,t,r)=>{if(!e.getSource(r))if(t.tiles)e.addSource(r,{type:"vector",tiles:t.tiles,minzoom:t.minZoom||0,maxzoom:t.maxZoom||22});else if(t.geojson){var a=i(t)?{type:"FeatureCollection",features:[]}:t.geojson;e.addSource(r,{type:"geojson",data:a,generateId:!0})}})(e,t,p);var u=null!==(y=t.tiles)&&void 0!==y&&y.length?t.sourceLayer:void 0;if(null!==(d=t.sublayers)&&void 0!==d&&d.length)return t.sublayers.forEach(i=>{I(e,t,i,p,u,{mapStyle:r,symbolRegistry:a,patternRegistry:o,pixelRatio:n})}),p;var{fillLayerId:c,strokeLayerId:f,symbolLayerId:v}=s(t),g="hidden"===t.visibility?"none":"visible";return b(t)&&a?(S(e,t,v,p,u,g,{mapStyle:r,symbolRegistry:a,pixelRatio:n}),p):(L(e,t,c,p,u,g,{mapStyleId:m,patternRegistry:o,pixelRatio:n}),P(e,t,f,p,u,g,m),p)};class O{constructor(e,t,r){this._mapProvider=e,this._map=e.map,this._symbolRegistry=t,this._patternRegistry=r,this._datasetSourceMap=new Map,this._symbolLayerIds=new Set}init(t,r){var a=this;return e(function*(){var e=r.id;yield Promise.all([a._mapProvider.addPatternsToMap(f(t,a._patternRegistry),e,a._patternRegistry),a._mapProvider.addSymbolsToMap(g(t),r,a._symbolRegistry)]),a._symbolLayerIds.clear(),t.forEach(e=>a._addLayers(e,r)),yield new Promise(e=>a._map.once("idle",e))})()}destroy(e){var t=new Set;e.forEach(e=>{var r=l(e);this._getLayersUsingSource(r).forEach(e=>{this._map.getLayer(e)&&this._map.removeLayer(e)}),!t.has(r)&&this._map.getSource(r)&&(this._map.removeSource(r),t.add(r))}),this._datasetSourceMap.clear()}onStyleChange(t,r,a,i){var o=this;return e(function*(){yield new Promise(e=>o._map.once("idle",e));var e=r.id;yield Promise.all([o._mapProvider.addPatternsToMap(f(t,o._patternRegistry),e,o._patternRegistry),o._mapProvider.addSymbolsToMap(g(t),r,o._symbolRegistry)]),o._symbolLayerIds.clear(),t.forEach(e=>o._addLayers(e,r)),i.forEach(e=>e.reapply()),Object.entries(a).forEach(e=>{var[r,{idProperty:a,ids:i}]=e,l=t.find(e=>e.id===r);l&&o._applyFeatureFilter(l,a,i)})})()}onSizeChange(t,r){var i=this;return e(function*(){yield Promise.all([i._mapProvider.addSymbolsToMap(g(t),r,i._symbolRegistry),i._mapProvider.addPatternsToMap(f(t,i._patternRegistry),r.id,i._patternRegistry)]),t.forEach(e=>{var t;if(y(e).forEach(t=>{if(i._symbolLayerIds.has(t)&&i._map.getLayer(t)){var a=i._symbolRegistry.getSymbolImageId(e,r,!1,i._pixelRatio);a&&i._map.setLayoutProperty(t,"icon-image",a)}}),a(e)){var{fillLayerId:o}=s(e);if(i._map.getLayer(o)){var l=i._patternRegistry.getPatternImageId(e,r.id,i._pixelRatio);l&&i._map.setPaintProperty(o,"fill-pattern",l)}}null===(t=e.sublayers)||void 0===t||t.forEach(t=>{var o=c(e,t),{symbolLayerId:l,fillLayerId:s}=n(e.id,t.id);if(i._map.getLayer(l)){var y=i._symbolRegistry.getSymbolImageId(o,r,!1,i._pixelRatio);y&&i._map.setLayoutProperty(l,"icon-image",y)}if(a(o)&&i._map.getLayer(s)){var d=i._patternRegistry.getPatternImageId(o,r.id,i._pixelRatio);d&&i._map.setPaintProperty(s,"fill-pattern",d)}})})})()}addDataset(e,t){this._addLayers(e,t)}removeDataset(e,t){var r=l(e);y(e).forEach(e=>{this._map.getLayer(e)&&this._map.removeLayer(e),this._symbolLayerIds.delete(e)}),!t.some(t=>t.id!==e.id&&l(t)===r)&&this._map.getSource(r)&&this._map.removeSource(r),this._datasetSourceMap.delete(e.id)}showDataset(e){this._setDatasetVisibility(e,"visible")}hideDataset(e){this._setDatasetVisibility(e,"none")}showSublayer(e,t){var{fillLayerId:r,strokeLayerId:a,symbolLayerId:i}=n(e,t);[r,a,i].forEach(e=>{this._map.getLayer(e)&&this._map.setLayoutProperty(e,"visibility","visible")})}hideSublayer(e,t){var{fillLayerId:r,strokeLayerId:a,symbolLayerId:i}=n(e,t);[r,a,i].forEach(e=>{this._map.getLayer(e)&&this._map.setLayoutProperty(e,"visibility","none")})}showFeatures(e,t,r){this._applyFeatureFilter(e,t,r)}hideFeatures(e,t,r){this._applyFeatureFilter(e,t,r)}setStyle(t,r){var a=this;return e(function*(){var e=r.id;y(t).forEach(e=>{a._map.getLayer(e)&&a._map.removeLayer(e),a._symbolLayerIds.delete(e)}),yield Promise.all([a._mapProvider.addPatternsToMap(f([t],a._patternRegistry),e,a._patternRegistry),a._mapProvider.addSymbolsToMap(g([t]),r,a._symbolRegistry)]),a._addLayers(t,r)})()}setSublayerStyle(t,r,a){var i=this;return e(function*(){var e,o,l=a.id,s=i._pixelRatio,{fillLayerId:y,strokeLayerId:d,symbolLayerId:m}=n(t.id,r);[y,d,m].forEach(e=>{i._map.getLayer(e)&&i._map.removeLayer(e),i._symbolLayerIds.delete(e)});var p=null===(e=t.sublayers)||void 0===e?void 0:e.find(e=>e.id===r);if(p){yield Promise.all([i._mapProvider.addPatternsToMap(f([t],i._patternRegistry),l,i._patternRegistry),i._mapProvider.addSymbolsToMap(g([t]),a,i._symbolRegistry)]);var u=i._datasetSourceMap.get(t.id),c=null!==(o=t.tiles)&&void 0!==o&&o.length?t.sourceLayer:void 0;I(i._map,t,p,u,c,{mapStyle:a,symbolRegistry:i._symbolRegistry,patternRegistry:i._patternRegistry,pixelRatio:s}),i._maintainSymbolOrdering(t)}})()}setOpacity(e,t){var r=this._map.getStyle();null!=r&&r.layers&&r.layers.filter(t=>t.id===e||t.id.startsWith("".concat(e,"-"))).forEach(e=>this._setPaintOpacity(e.id,t))}setSublayerOpacity(e,t,r){var{fillLayerId:a,strokeLayerId:i}=n(e,t);this._setPaintOpacity(a,r),this._setPaintOpacity(i,r)}setData(e,t){var r=this._datasetSourceMap.get(e);if(r){var a=this._map.getSource(r);a&&"function"==typeof a.setData&&a.setData(t)}}get _pixelRatio(){return this._mapProvider.map.getPixelRatio()}_addLayers(e,t){var r=R(this._map,e,t,this._symbolRegistry,this._patternRegistry,this._pixelRatio);this._datasetSourceMap.set(e.id,r),this._maintainSymbolOrdering(e)}_getFirstSymbolLayerId(){var e,t=this._map.getStyle();if(null==t||!t.layers)return null;var r=t.layers.find(e=>this._symbolLayerIds.has(e.id));return null!==(e=null==r?void 0:r.id)&&void 0!==e?e:null}_maintainSymbolOrdering(e){var t=y(e).filter(e=>e&&this._map.getLayer(e));t.forEach(e=>{var t;"symbol"===(null===(t=this._map.getLayer(e))||void 0===t?void 0:t.type)?this._symbolLayerIds.add(e):this._symbolLayerIds.delete(e)});var r=this._getFirstSymbolLayerId();r&&t.forEach(e=>{this._symbolLayerIds.has(e)||this._map.moveLayer(e,r)})}_setDatasetVisibility(e,t){var r=this._map.getStyle();null!=r&&r.layers&&r.layers.filter(t=>t.id===e||t.id.startsWith("".concat(e,"-"))).forEach(e=>this._map.setLayoutProperty(e.id,"visibility",t))}_applyFeatureFilter(e,t,a){var i;if(null!==(i=e.sublayers)&&void 0!==i&&i.length)e.sublayers.forEach(i=>{var{fillLayerId:o,strokeLayerId:l}=n(e.id,i.id),s=e.filter&&i.filter?["all",e.filter,i.filter]:i.filter||e.filter||null;r(this._map,o,s,t,a),r(this._map,l,s,t,a)});else{var{fillLayerId:o,strokeLayerId:l,symbolLayerId:y}=s(e),d=e.filter||null;[o,l,y].filter(Boolean).forEach(e=>{r(this._map,e,d,t,a)})}}_setPaintOpacity(e,t){var r=this._map.getLayer(e);if(r){var a={line:"line-opacity",symbol:"icon-opacity"}[r.type]||"fill-opacity";this._map.setPaintProperty(e,a,t)}}_getLayersUsingSource(e){var t=this._map.getStyle();return null!=t&&t.layers?t.layers.filter(t=>t.source===e).map(e=>e.id):[]}}export{O as default};

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

@@ -54,11 +54,11 @@
 .am-c-datasets-key-symbol {
   position: relative;
   flex-shrink: 0;
-  margin: 0 13px 0 2px;
+  margin: 0 13px 0 3px;
 }
 
 .am-c-datasets-key-symbol--point {
-  margin: -9px 3px -9px -7px;
+  margin: -12px 1px -12px -9px;
 }
 
 .im-c-datasets-layers--has-groups > *:not(:first-child) {